Menu
I've created a mobile-friendly web site with jQuery Mobile and added some meta info so that it should be pinned to iOS and Android homescreens and should be launched as a web app (in other words: in a browser, but without browser navigation elements).
It works fine for iOS, but it doesn't work for Android 4.4.2.
I followed this tutorial for creating Android-Compatible web apps:
Despite adding all the meta info as listed in the tutorial, Android does show the "Add to homescreen" button for my web site, but it does not launch the website without browser navigation elements as described in the tutorial.
What am I doing wrong?
652
How to add a website to your Android home screen. To add a website to an Android home screen, open Google Chrome and go to the website. Then drop down the menu by tapping the three-dot icon at the top right-hand corner of the screen. Select Add to Home screen.
Open the menu next to the URL bar. Depending on whether you're using Chrome or Android you'll see a menu option "Install" or "Install App". This is the "Add to Home screen" option displayed for any site that has the necessary features in place.
As you can see here this feature is still tagged as Beta. I guess you'll need to test this feature with the latest version of Chrome. From the article:
Chrome will look for the following meta tag in the element of the web-page:
<meta name="mobile-web-app-capable" content="yes"> The name attribute MUST be "mobile-web-app-capable" and the content attribute must be "yes" (case in-sensitive). If there is any other value in the content attribute the web app will be added as a regular bookmark.
The icon that is used to install to the homescreen is determined by using the largest icon found in one of the following <link> tags:
<link rel="shortcut icon" sizes="192x192" href="nice-highres.png"> (recommended) <link rel="shortcut icon" sizes="128x128" href="niceicon.png"> <link rel="apple-touch-icon" sizes="128x128" href="niceicon.png"> <link rel="apple-touch-icon-precomposed" sizes="128x128" href="niceicon.png"> Caution: The 192px image format is recommended. The last two formats (apple-touch-*) are deprecated, and will be supported only for a short time.
The application’s <title> element serves as the default label for the icon on the homescreen.
The following example is the minimum required configuration to support a homescreen launch experience.
<!doctype html> <html> <head> <title>Awesome app</title> <meta name="viewport" content="width=device-width"> <meta name="mobile-web-app-capable" content="yes"> <link rel="shortcut icon" sizes="192x192" href="/icon.png"> </head> <body></body> </html> Chrome will also allow Web Apps to launch in "App mode" if they embed a meta tag using the "apple-mobile-web-app-capable" name. Chrome will stop supporting this usage in an upcoming release. Chrome currently shows a deprecation warning in the Developer Tools’ console log when it detects a page with only the "apple-mobile-web-app-capable" meta tag. The warning appears as follows:
Whilst Chrome temporarily accepts the usage of "apple-mobile-web-app-capable", Chrome does not offer compatibility with the iOS Safari API’s including:
window.navigator.standalone <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="apple-touch-startup-image" href="/startup.png"> I hope it helps.
198
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
