Update to consistent index.html and manifest.json

abdonrd commented 8 years ago

Trying to make a consistent index.html and manifest.jsonfor all the Polymer templates. Based on the Google I/O 2016 website.

index.html:

We need more or less meta tags?
We want these two images paths? /images/touch/ and images/favicon/
We need two favicon references? L20 and L38.

manifest.json:

We need more or less icons?
We want this image path? /images/touch/

Please, take a look. @ebidel @justinfagnani @robdodson @chuckh

robdodson commented 8 years ago

@addyosmani do we still want to include all the meta tags for icons or just be like "everyone use manifest!" ?

addyosmani commented 8 years ago

@robdodson Imo, as much as it sucks I would include the other meta tags. I've just filed another bug with WebKit to see if we can get hints at where they're heading with the app manifest but until they support it we should probably make sure things look decent on iOS and Windows phones too. 💸

abdonrd commented 8 years ago

@robdodson @addyosmani remember the five top questions, please. :)

addyosmani commented 8 years ago

1 x favicon. I have no idea why we have two of them in there but it's possible it's because we used a generation service.

1 x image path. I try to keep mine under images/touch but I've also previously been lazy and ended up with two paths. Fewer is better.

More or less icons. This is a tricky one. Recent research suggests you just need a 192 and a 512 in manifest.json in order for most Android-based browsers to pick up what they need for the homescreen and splashscreen. The more nuanced answer is: we need to test. I'd drop it down to two and see if that works well on real devices. If we can't do that for now, keeping the set airs on the side of caution.

robdodson commented 8 years ago

Some of the icons may be useful for supporting Manifold.js apps. There was a PSK issue around it a while ago: https://github.com/PolymerElements/polymer-starter-kit/issues/218

I'm not a manifold.js user so not sure if it's still required to have so many sized

abdonrd commented 8 years ago

@addyosmani @robdodson thanks! I will update!

@robdodson and we need support Manifold.js apps? I think less is better. And if someone want to use Manifold.js apps, you can create the other icons.

abdonrd commented 8 years ago

Updated! Another question... We really want lazyRegister and Shadow DOM by default? I don't think so:

// Setup Polymer options
window.Polymer = {lazyRegister: true, dom: 'shadow'};

robdodson commented 8 years ago

I think we want lazyRegister. Shadow DOM by default... that's a tricky one as it may lead to potential issues if folks only test in one browser.

robdodson commented 8 years ago

Also I'm fine dropping Manifold.js support. It's just a thing that came up in PSK and a few people wanted it so ¯(ツ)/¯

abdonrd commented 8 years ago

Thanks @robdodson! Updated! :)

addyosmani commented 8 years ago

Also I'm fine dropping Manifold.js support. It's just a thing that came up in PSK and a few people wanted it so ¯(ツ)/¯

👍

abdonrd commented 8 years ago

Added the new icons!

chuckh commented 8 years ago

LGTM!

robdodson commented 8 years ago

I think my only comment is to add dom: shadow back in. Otherwise lgtm

abdonrd commented 8 years ago

@robdodson added! :)

PS: I can't merge PR in this repository.

robdodson commented 8 years ago

Boom! Thanks @abdonrd 💃

abdonrd commented 8 years ago

Yay! 💃

FluorescentHallucinogen commented 8 years ago

1) What about using vector icon in SVG format in addition to raster icons in various resolutions in manifest.json?

{
    "src": "images/logo.svg",
    "type": "image/svg+xml"
}

IMO, using SVG icon in manifest.json is a very good idea. Vector icons is completely independent of the resolution. SVG icons are allowed in https://w3c.github.io/manifest/. But some user agents may not support SVG. That's why we should use vector in addition to (not instead of) raster icons.

2) I've found that Chrome doesn't use the value of "theme_color" key from manifest.json for color browser elements. See https://goo.gl/oetGgf and https://goo.gl/8viLMX for more info about color browser elements. It means that we can't just remove a meta tag with the name "theme-color" from <head> of page and rely only on "theme_color" in manifest.json.

3) What about a consistent value of "start_url" key in manifest.json across all Polymer web apps?

https://github.com/googlechrome/ioweb2016 uses "./?utm_source=web_app_manifest" value https://github.com/polymer/docs uses "./?utm_source=web_app_manifest" value https://github.com/polymer/shop uses "/" value https://github.com/polymer/app-drawer-template uses "/?homescreen=1" value https://github.com/polymerelements/polymer-starter-kit has no "start_url" key in manifest.json file https://github.com/polymerelements/polymer-starter-kit/tree/psk2 uses "/?homescreen=1" value https://github.com/polymer/polymer-element-catalog has no manifest.json file at all https://github.com/google/santa-tracker-web uses "https://santatracker.google.com/?utm_source=web_app_manifest&utm_medium=web_app_manifest" value

IMO, "./?utm_source=homescreen" is the best option because a) it uses relative path instead of absolute b) it is based on UTM parameters standard.

I've also found that using a simply slash (/) instead of dot-slash (./) as the value of "start_url" key in manifest.json file (e.g. using "/?utm_source=homescreen" instead of "./?utm_source=homescreen") may cause issues if the web app deployed not to the root of domain (e.g. if the app deployed to GitHub Pages).

Example:

"/?utm_source=homescreen" value of "start_url" key of https://user.github.io/project/manifest.json file points to https://user.github.io/?utm_source=homescreen URL instead of https://user.github.io/project/?utm_source=homescreen.

"./?utm_source=homescreen" points to https://user.github.io/project/?utm_source=homescreen – this is what need.

4) I suggest store all icons in /images folder (not in /images/manifest subfolder) and name it something like logo.svg, logo-192x192.png, logo-512x512.png, etc. i.e. use resolution of raster images as a part of file name.

FluorescentHallucinogen commented 8 years ago

What you think about my suggestions?

googlearchive / app-drawer-template

Update to consistent index.html and manifest.json #13