iOS add to home screen startup and icon image meta

[argyleink]

No description provided.

[addyosmani]

Thanks. Have you filled out our contributor license agreement?

Looking into this some more from the Safari on iOS guidelines:

On iOS, similar to native applications, you can specify a startup image that is displayed while your web application launches. This is especially useful when your web application is offline. By default, a screenshot of the web application the last time it was launched is used.

@mathiasbynens you've done a ton of great research into touch icons as part of http://mathiasbynens.be/notes/touch-icons. Would you recommend that we include apple-touch-startup-image as part of our default boilerplate?

[sindresorhus]

Would you recommend that we include apple-touch-startup-image as part of our default boilerplate?

I wouldn't. Last time I used it it was completely broken and it wasn't even possible to specify a retina launch screen.

As for touch icon. I wonder if we could just use one for all:

<link rel="icon apple-touch-icon" sizes="196x196" href="images/touch/touch-icon-196x196.png">

No idea if this works though.

[addyosmani]

I'm happy to not use apple-touch-startup-image if it isn't reliable.

[mathias]

I think you want @mathiasbynens in this thread.

[mathiasbynens]

Thanks for the heads up, @mathias! :)

This is a personal preference of course, but I’m not a big fan of startup images either. I prefer non-full-screen web apps over full-screen ones, in general (and startup images only make sense or even work for full-screen ones). IMHO @cheeaun’s HackerWeb is a great example of a web app that doesn’t need full screen or a startup image: https://github.com/cheeaun/hackerweb

That said, it depends on the use case. Perhaps an entry can be added to the docs? (That’s how we usually deal with such things for H5BP projects, and it works fairly well, FWIW.)

[sindresorhus]

Perhaps an entry can be added to the docs? (That’s how we usually deal with such things for H5BP projects, and it works fairly well, FWIW.)

👍 I think we can just refer to https://github.com/h5bp/html5-boilerplate/blob/master/doc/extend.md#apple-touch-startup-image

<link rel="icon apple-touch-icon" sizes="196x196" href="images/touch/touch-icon-196x196.png">

@mathiasbynens Do you know if this would work?

[mathiasbynens]

<link rel="icon apple-touch-icon" sizes="196x196" href="images/touch/touch-icon-196x196.png">

@mathiasbynens Do you know if this would work?

It should work (as per HTML). I do know sizes is not supported in iOS versions older than 4.2, though – but nowadays I don’t think that is a concern anymore. Here’s a test case: http://mathiasbynens.be/demo/touch-icons Save it to the home screen and report back the results (device, OS, screen resolution) please!

[sindresorhus]

@mathiasbynens thanks for looking into it. Works fine on iPhone 5S iOS 8.

Can someone try Android Chrome?

[alrra]

Can someone try Android Chrome?

Device: Samsung Galaxy S III
OS: Android 4.3

1. Chrome (Stable)

   .

2. Chrome (Beta)

   .

3. Firefox (Stable and Beta)

   . .

---

Device: iPad (3rd generation)
OS: iOS 7.1.2

1. Safari

   

[argyleink]

@addyosmani I have filled out the agreement =)

You guys sure you want to skip on the splash image? Someone could comment it out, but at least it's there for their starter kit. It helps add to the native illusion. If you're going for that kind of thing, like add to home screen support provides.

There's also build scripts to take a 1024x1024 png/jpg and make all the icons for each OS. Same goes for splash images landscape/portrait/2x/etc. That's a feature request, but would help with the pain of all these icons and splash images. They are tedious, but that's where a starter kit can help?

Would be really nice if 'add to home screen' support was an option for starting a project. Because it adds so much meta and images to the projects, would shave cruft off the project if an option was available.

Thanks for considering my pull request guys, glad to help make a go to web starter =)

[addyosmani]

I'll comment on the build script note: @gauntface and I discussed the idea of creating all of the icons and images at build time for you, but on doing further research agreed that most real world sites end up customizing these images per target OS themselves. Simply say, centering a logo in the middle of the graphic usually isn't enough. With that in mind, I think we'll (for now) skip on trying to automate this step but I'm interested in @sindresorhus's suggestion above landing.

[sindresorhus]

@alrra Thanks for testing. Though looks like we need a larger sized image. (re Chrome Beta). Any idea how large we need to cover all devices?

I think we should go with the combined icon. The default should be simple or people won't use it. We can rather document more advanced use-cases.

Build tools for this: 👎

Splash screen: 👎

[addyosmani]

ping @alrra in case he has time to take a look at Sindre's comment.

[alrra]

Though looks like we need a larger sized image. (re Chrome Beta). Any idea how large we need to cover all devices?

@sindresorhus Sorry, I haven't done any research regarding this. I think @mathiasbynens is the person to ask. :)

Note: I'm updated my previous comment.

[addyosmani]

Thanks for the PR! Before this can be merged, please sign the CLA at https://developers.google.com/open-source/cla/individual

[argyleink]

Signed

[addyosmani]

Achievement unlocked: CLA signature found!

[singwhatiwanna]

good job

[addyosmani]

Thank you for working on this PR @argyleink. We've since decided that it would be significantly easier for developers if we allowed them to automatically generate the icons and artwork necessary for their sites as part of the build process.

@gauntface is looking at this as part of #442