Quick fix for IOS: Add this meta-tag to make the app look native!

idea
#1

Hi,

A very nice quick fix/trick for IOS:

Pease add this meta-tag in the headers:
<meta name="apple-mobile-web-app-capable" content="yes">

Effect:
After adding/sending the GTDNext web page in Safari to the “home screen”, it will look like a native app!

More info from Apple:
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

PS. NirvanaHQ does this, and it works great. I.e. No need for developing a native app on IOS! (We still need offline support, but that’s a separate issue :wink:.)
PS. There’s also a meta-tag for changing the status bar appearance. See the Apple web page above for more info.

#2

Is this something a user can do, or are you making this suggester for the developer?

#3

@Brad2167: The suggestion is for the developers.

The meta-tag has to simply* be added to the html-page (pages).

IOS-users can then open the GTDNext web page in Safari, press the Share-button and select “Add to Home Screen”. This will create an application icon on the home screen. When opening that “application” it will feel like a normal native app, i.e. it will not open up in Safari, and it will not show the Safari header and footer.

* N.B. Please note that any http or https prefixes (or hostname) should be removed from all internal links, or else the links will open up in Safari and the native app feeling will be lost!

#4

@sergio would need to confirm, but I believe this was added on January 27th as part of our bug fix release.

#5

I am still seeing the header and footer from the browser.

#6

@Brad2167 & @James: It now works after first removing and then re-adding GTDNext to the Home Screen! Thanks!

@James: The “app” reloads every time I switch back from some other application! But that’s a common Safari problem… I have opened a new issue/idea here:
Cache the resources and the data to make it work offline, and to stop it from reloading on iPhone

#7

That worked great @jola16. Thanks for the tip. This is definitely helpful.

2 Likes