iOS PWA “Add to Home Screen” - DISABLE Full Screen Mode

Question

I have a PWA that is cross-platform but am running into some issues on iOS 11.3+.

When a user executes "Add to Homescreen" I would like to KEEP the menu bar (refresh, back, forward buttons). ie I don't want full-screen mode because I don't want to have to create my own refresh and back buttons.

I've followed the advice at https://medium.com/@firt/dont-use-ios-web-app-meta-tag-irresponsibly-in-your-progressive-web-apps-85d70f4438cb . Most other articles I've found are significantly out-of-date on the subject.

I've removed the "apple-mobile-web-app-capable" meta tag but it doesn't work. I've also tried setting the value to "no".

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

How do I PREVENT the "Add to Homescreen" on iOS 11 from going to into full-screen mode?

Answer 1

Just remove the meta tag itself:

Make sure you also are removing the apple-mobile-web-app-status-bar-style meta tag also otherwise it may be thinking that you want it in full-screen mode by stating you want the status bar.

If you are still having problems after this and clearing all your history and cache, check out Apple's article on PWAs and try to remove the extra meta tags that are inserted in your website.

Answer 2

If you find that your PWA still remains full-screen after removing:

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

Double-check your manifest.json for "display": "standalone" and remove it also.