New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update touch icons on the document <head> #385

Closed
ivogomes opened this Issue Aug 1, 2014 · 11 comments

Comments

Projects
None yet
4 participants
@ivogomes

ivogomes commented Aug 1, 2014

The current tags used in InK are outdated and the sizes of the icons don't match with the most recent specifications from Apple:

https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

@gnpfonseca

This comment has been minimized.

Show comment
Hide comment
@gnpfonseca

gnpfonseca Aug 4, 2014

Collaborator

Indeed, that will be addressed in a future release.

Thx @ivogomes

Collaborator

gnpfonseca commented Aug 4, 2014

Indeed, that will be addressed in a future release.

Thx @ivogomes

@ivogomes

This comment has been minimized.

Show comment
Hide comment
@ivogomes

ivogomes Aug 4, 2014

Also, this can be added also:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">

To make the websites installed in the user's phone home screen open in full screen instead of in a tab in the browser. Reference: http://www.html5rocks.com/en/mobile/fullscreen/

ivogomes commented Aug 4, 2014

Also, this can be added also:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">

To make the websites installed in the user's phone home screen open in full screen instead of in a tab in the browser. Reference: http://www.html5rocks.com/en/mobile/fullscreen/

@andr3

This comment has been minimized.

Show comment
Hide comment
@andr3

andr3 Aug 7, 2014

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">

@ivogomes heads up, those tags (at least for iOS) are only recommended if your "thing" is actually a single page webapp. If it's a site or has any ordinary link, it will switch to safari to open it.

At least, I'd recommend testing this and maybe having this opt-in. Off by default or commented out. Very few cases will need this meta tag.

andr3 commented Aug 7, 2014

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">

@ivogomes heads up, those tags (at least for iOS) are only recommended if your "thing" is actually a single page webapp. If it's a site or has any ordinary link, it will switch to safari to open it.

At least, I'd recommend testing this and maybe having this opt-in. Off by default or commented out. Very few cases will need this meta tag.

@ivogomes

This comment has been minimized.

Show comment
Hide comment
@ivogomes

ivogomes Aug 7, 2014

Thanks.

I thought they had already updated that to be able to work with regular websites. Will test and give feedback soon.

ivogomes commented Aug 7, 2014

Thanks.

I thought they had already updated that to be able to work with regular websites. Will test and give feedback soon.

@ivogomes

This comment has been minimized.

Show comment
Hide comment
@ivogomes

ivogomes Aug 7, 2014

https://developer.chrome.com/multidevice/android/installtohomescreen

It seems it should work with regular websites.
Also, apple-touch-* meta-tags will be deprecated soon and the recommended is <link rel="icon" sizes="196x196" href="nice-highres.png">

ivogomes commented Aug 7, 2014

https://developer.chrome.com/multidevice/android/installtohomescreen

It seems it should work with regular websites.
Also, apple-touch-* meta-tags will be deprecated soon and the recommended is <link rel="icon" sizes="196x196" href="nice-highres.png">

@ivogomes

This comment has been minimized.

Show comment
Hide comment
@ivogomes

ivogomes Aug 7, 2014

Just tested it on Android (Chrome) and (Safari) on a regular website. It worked as expected, as the website loaded in full screen instead of just opening in the browser.

ivogomes commented Aug 7, 2014

Just tested it on Android (Chrome) and (Safari) on a regular website. It worked as expected, as the website loaded in full screen instead of just opening in the browser.

@ivogomes

This comment has been minimized.

Show comment
Hide comment
@ivogomes

ivogomes Aug 8, 2014

Correction: it works perfect in Android, but in iOS when you click a link it just switches to Safari.
So, we should use only <meta name="mobile-web-app-capable" content="yes">

ivogomes commented Aug 8, 2014

Correction: it works perfect in Android, but in iOS when you click a link it just switches to Safari.
So, we should use only <meta name="mobile-web-app-capable" content="yes">

@fabiosantoscode

This comment has been minimized.

Show comment
Hide comment
@fabiosantoscode

fabiosantoscode Aug 13, 2014

Contributor

From your first link:

On iOS, as part of optimizing your web application, have it use the standalone mode to look more like a native application.

mobile-web-app-capable is something you add to a web application. It doesn't make much sense to open something like a shop or a blog in fullscreen. Ink is not only for web applications, so mobile-web-app-capable shouldn't be on by default.

The browser's view has quite a few features (search inside the page, share button, navigate somewhere else, see the adress in the adress bar and possibly copy it). You'll want to have these at your disposal if you're reading a blog article, documentation page, or looking at some product on an online store. Unless it's a game, application, or something. Those should open full-screen.

Because Ink is not webapp specific, this shouldn't be added to the cookbooks.

Contributor

fabiosantoscode commented Aug 13, 2014

From your first link:

On iOS, as part of optimizing your web application, have it use the standalone mode to look more like a native application.

mobile-web-app-capable is something you add to a web application. It doesn't make much sense to open something like a shop or a blog in fullscreen. Ink is not only for web applications, so mobile-web-app-capable shouldn't be on by default.

The browser's view has quite a few features (search inside the page, share button, navigate somewhere else, see the adress in the adress bar and possibly copy it). You'll want to have these at your disposal if you're reading a blog article, documentation page, or looking at some product on an online store. Unless it's a game, application, or something. Those should open full-screen.

Because Ink is not webapp specific, this shouldn't be added to the cookbooks.

@ivogomes

This comment has been minimized.

Show comment
Hide comment
@ivogomes

ivogomes Aug 13, 2014

If you open the website / web app in the browser, you keep the browser chrome around the website (and all it's features).
mobile-web-app-capable is something to make websites that the user specifically added to his home screen behave like an app (open in full screen instead of opening in the browser)

ivogomes commented Aug 13, 2014

If you open the website / web app in the browser, you keep the browser chrome around the website (and all it's features).
mobile-web-app-capable is something to make websites that the user specifically added to his home screen behave like an app (open in full screen instead of opening in the browser)

@ivogomes

This comment has been minimized.

Show comment
Hide comment
@ivogomes

ivogomes Aug 13, 2014

This works very well in Android. But, as @andr3pt mentioned, in iOS should only be used in web apps that rely on AJAX links, because when you click a regular link, it switches to Safari.

ivogomes commented Aug 13, 2014

This works very well in Android. But, as @andr3pt mentioned, in iOS should only be used in web apps that rely on AJAX links, because when you click a regular link, it switches to Safari.

gnpfonseca added a commit that referenced this issue Aug 14, 2014

@gnpfonseca

This comment has been minimized.

Show comment
Hide comment
@gnpfonseca

gnpfonseca Aug 18, 2014

Collaborator

I'm closing this issue since the cookbook pages and site headers have already been updated. Our distribution examples will be updated aswell, as soon as we deploy again., which should happen shortly.

Thx again for the report.

Collaborator

gnpfonseca commented Aug 18, 2014

I'm closing this issue since the cookbook pages and site headers have already been updated. Our distribution examples will be updated aswell, as soon as we deploy again., which should happen shortly.

Thx again for the report.

@gnpfonseca gnpfonseca closed this Aug 18, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment