search

nolanlawson / pokedex.org

Offline-capable Pokédex web site (unmaintained)
https://www.pokedex.org
Apache License 2.0
2.27k stars 325 forks source link

Enable a better launch screen on cold boot on android #28

Closed samccone closed 8 years ago

samccone commented 8 years ago

ref: https://developers.google.com/web/updates/2015/10/splashscreen

The old icon was just a wee bit too small :)

High quality icons that will displayed in the center of the splash screen - ensure your icon is at least 196px.

nolanlawson commented 8 years ago

Oh, my bad! I dunno where I got the idea it was supposed to be 192. Thanks!

nolanlawson commented 8 years ago

Huh, weird, it says here that the size for xxxhdpi is indeed 192. Are you sure the issue isn't that we should add a 512 icon so that it shows that for the splash screen?

nolanlawson commented 8 years ago

Oh I see, web icons vs Android native icons. Got it! Thanks for the link. :)

samccone commented 8 years ago

heh :hocho: :cry:

yeah the manifest story right now is not as strong as I want it to be... but I am going to work on fixing that :dancer:

nolanlawson commented 8 years ago

b1d7a9fe836f84f44172e5f7bb343bf765bc563e and 013576afd5c0d2a0ae0470db8435be9fa51aa988

samccone commented 8 years ago

@nolanlawson let me know when this lands (on the sever) :)

nolanlawson commented 8 years ago

Awesome. Thanks again!

BTW it might be good to confirm in that post that it's 196, not 192. I saw some folks getting confused. cc @paulkinlan

samccone commented 8 years ago

cc @surma @mounirlamouri

nolanlawson commented 8 years ago

Landed! Service worker bumped to 1.0.9 as well.

samccone commented 8 years ago

welp, this still is not working on a nexus 5 or nexus 5x :crying_cat_face: dang

I guess we could push some higher res options and see if that does it here

nolanlawson commented 8 years ago

Hm, I think I noticed that a few days ago as well. The icon was bizarrely tiny. I cleared out the Chrome site settings and re-added to homescreen, though, and then the big icon was back. ¯_(ツ)_/¯

samccone commented 8 years ago

oh so it is working for you now?

surma commented 8 years ago

@samccone You’ll have to kill the SW, clear cache and re-add to homescreen for the icon to update. It’s known (and annoying!) issue.

samccone commented 8 years ago

word, I just did the entire dance ^ on a 5x and no luck.. I will try on some other devices though

alrra commented 8 years ago

ref: https://developers.google.com/web/updates/2015/10/splashscreen that it's 196, not 192

@samccone, @nolanlawson If nothing changed in Android, AFAIK, it should be 192x192px, see:

(Cc: @paulkinlan, @addyosmani)

samccone commented 8 years ago

ok I just tested on chrome 47 and 48 and it works as expected... this feature has just not landed in chrome 46 like the blog post said :)

To be clear @alrra this is not the touch app icon, rather the splash screen loading icon, which is different as far as I know.

alrra commented 8 years ago

To be clear @alrra this is not the touch app icon, rather the splash screen loading icon, which is different as far as I know.

@samccone I was referring to both (sorry for the confusion).

the splash screen loading icon

@samccone See the second link, namely, https://www.youtube.com/watch?v=MyQ8mtR9WxI&t=21m12s.

samccone commented 8 years ago

welp dang (I was even in the audience for that talk :tomato: )

Going to try and wrangle the authorities on this to the thread :postal_horn: so we can get the "official" answer

addyosmani commented 8 years ago

The authority on this one would be @mounirlamouri. I've seen different dimensions (192) used more recently for PWAs, though Mounir has previously suggested opting for 384x384 (what we use in Polymer Starter Kit). Would be good to get a confirm :)

mounirlamouri commented 8 years ago

The issue is that a blog post describing a feature can go so far into details. There is unfortunately one size fit all icon size. The size Chrome expects for the splash screen is 128dp. We will use a smaller size if available. Below 80dp, in latest Chrome versions, we will change slightly the splashscreen layout. Below 48dp, we will no longer show an image on the splashscreen.

Anything below 200px is going to be a very poor match. I recommended 384px to @addyosmani because it is 128dp for devices with a pixel density of 3. It's a fairly high pixel density (Nexus 5 is lower than that). I believe some devices have a slightly higher pixel density. If you have 512px image, it would go be a 128dp for a pixel density of 4 (I don't know any device with a pixel density that high).

What I would highly recommend you to do is having multiple icons listed in your Manifest. Have a 128, 256, 384 and 512 icons. That way, you can let Chrome make the right decision and download the icon that has the size matching the one needed. The issue if you only have a 512px (or 384px) icon is that users with a low end device on a slow network will still end up downloading that bigger image and Chrome will resize it to fit the required dimensions.