PWA Does not Display in Full Screen Mode in Safari on iOS

I had an Ionic v4 app that was published as a PWA in Firebase. I’ve since updated that app to Ionic v6 and the PWA no longer displays in full screen mode.

When I add my app to my home screen in iOS and then launch the PWA, it continues to display in the Safari browser wrapper. I don’t have the same problem on Android. The PWA is fine there.

Did something change in Ionic v6? This wasn’t an issue for me before.

I do have a meta tag in /index.html to specify apple-mobile-web-app-capable as yes.

I’ve resolved this. The issue in my case was that between Ionic v4 and Ionic v6, the name of the PWA manifest changed from manifest.json to manifest.webmanifest.

This manifest.webmanifest file is referenced from multiple places including from index.html. I figured this out by creating a bare bones starter app and going through the PWA setup process for a Firebase deploy and compared the following files between my projects: angular.json, index.html, manifest.webmanifest, ngsw-config.json, and firebase.json.

In my case I believe it came down to referencing manifest.json instead of manifest.webmanifest in index.html plus also having my manifest by the wrong name.

If you’re having trouble setting up your app as a PWA, take a look at this guide first: