Issue with PWA on iOS 113

Question

I have a PWA that I've been using perfectly till I updated my phone to 11.3 (introduce Service Workers supports, so in my iPhone it was only a bookmark) and all worked like a charm. After I've updated to iOS 11.3 I wasn't able to enter to my app because I have an external login (in other domain) so each time I try to open my open this will open a safari browser to make the auth. Before PWA in iOS the external URLs were open in the same open (without open safari). Do you know if this is the correct behavior and, if it is ok, how can I fix it?

Thanks!

Answer 1

I managed to fix this by removing the manifest meta tag:

<link rel="manifest" href="/tracker/site.webmanifest">

My project is a simple PWA that uses Google's OAuth for login. I was getting redirected to Safari to login and unable to go back to the app (on my home screen). Hope it works for you too, I wasted 2 days trying to find a solution.

The reply by Anand tells me that offline capable PWAs need to implement service workers, since they are supported in 11.3 (or 11.4, not sure) and NOT manifests.

Anyways, this worked for me, hope it helps others as well.

Answer 2

When PWAs without service works(either your browser don't support it or your app don't have one) are added to home screen, its mere a bookmark. When the browser finds a SW, then it creates a package(like apk).

How to test this - Find a PWA site without service worker in android and add to home screen. When I tried it in one of Samsung device, it showed only "Remove" option and no uninstall option. When I added a PWA which had SW, got uninstall option. I was also able to locate the apk generated by Chrome when service worker is present.

Now on iOS - 3 possibilities I could think of. 1) My theory based on above behavior on PWAs with and without Service worker, your home icon create by iOS 11.2.x is a bookmark and the new version of safari is treating it as a bookmark to open it in browser. I couldn't test this as I've upgraded to 11.3 already and don't have a pre 11.3 PWA icon.

2) If you have reinstalled the icon(by removing and adding again to home screen) and still have the issue, its probably because your manifest file or service worker files have some issue/compatibility with Safari.

Since we don't have something like Lighthouse for safari, you can validate your manifest.json and service workers in Chrome Lighthouse.

3) Check on scope attribute in the manifest file to make sure you cover your entire domain you intent to cover. If you scope covers domain.com/myapp only, domain.com/otherapp will be opened in the browser when tried to open from any source.