Question

I am working on somewhat of a webapp, the client would like the ability to save to homescreen (default behavior) but when the end user opens the app saved to the homescreen it opens in safari rather then in "webapp" mode.

An example of such is on espn's mobile site: http://m.espn.go.com/

Note by saving to homescreen, then accessing... It opens in safari.

Thanks!!

Was it helpful?

Solution

I believe the web app will always open in Safari, but you can change the behavior of how it opens so it might not feel like it's opening in Safari. Check out these page on how to use some apple-specific meta tags:

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

https://code.tutsplus.com/tutorials/configuring-an-iphone-web-app-with-meta-tags--mobile-2133

OTHER TIPS

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

IOS provides us the feature to open the app in StandAlone mode. You use the HTML5 specs of Safari but remember this runs out of the safari sandbox ie. It will act as a native app and will stop javascript executions on sleep or screen off. Just add the meta tag

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

The latest Versions of Android Chrome also have this feature in them and are much closely related to the Chrome Environment. Just add this meta tag for android chrome.

    <meta name="mobile-web-app-capable" content="yes">
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top