Remove the manifest from iOS to allow OAuth redirect to works

[jvitor83]

Lot of people are having issue with redirect at OAuth flow when using the apple-mobile-web-app-capable feature of iOS:

• https://stackoverflow.com/questions/51993155/redirecting-to-google-oauth-flow-in-progressive-web-app
• PWA support on iOS 11.3 nolanlawson/pinafore#45 (comment)
• Google as an Auth provider doesn't work on iOS saved to homescreen firebase/firebase-js-sdk#77 (comment)
• Allow for multiple scopes w3c/manifest#449 (comment)

I believe it can be solved by changing the:
<link rel="manifest" href="manifest.json">
to
<link rel="no-on-ios" href="manifest.json">
when on iOS.

It prevent the iOS Safari to process the manifest (which cause the bug)

So, i believe that this pice of code could be inside pwacompat.js to allow many of PWAs use OAuth login:

   var iOS = !!navigator.platform && /iPhone/.test(navigator.platform);
   if(iOS) {
      document.querySelector('link[rel="manifest"]').setAttribute("rel", "no-on-ios");
   }

At least until apple fix this issue (don't know where or if is been tracked).

https://forums.developer.apple.com/thread/100524

[jvitor83]

Some considerations about iOS: https://medium.com/@firt/you-shouldnt-use-chrome-s-pwacompat-library-in-your-progressive-web-apps-6b3496faab62

[jvitor83]

For what i could see, the issue is with the manifest (iOS implementation) and not with the apple-mobile-web-app-capable . This is why the workaround works!

[paul-sachs]

Unfortunately, I think this hack doesn't seem to work anymore. I was just testing it out with my own app on iOS simulator (12.1) and all external links still open safari instead, even without the manifest available. Not sure if something has changed. Tried this without the added complexity of pwacompat, still no dice. Was really hoping to get SSO working but without the redirect, I'm going to have to find another route.

[digitaltickle]

I just hit this same issue - Auth with redirect is fine for Google and FB within Safari, but as soon as you add the PWA to the homescreen, the Auth process opens in Safari then tries to redirect to Safari too - leaving the PWA un-auth'd. Bugger.

[samthor]

So this seems to me to be a fundamental problem with the way iOS uses PWAs; it's not really anything to do with PWACompat except for the fact that PWACompat configures iOS on your behalf.

I'm not against having a "no-on-ios" modifier, but to me, the primary use-case of this library is to support iOS. So if PWAs aren't working on iOS because you have these kinds of auth flows, I'd probably suggest not using PWACompat for the time being.

[samthor]

In exciting news, looks like new Safari betas might resolve this issue.

[Chris-KCIT]

I'm not against having a "no-on-ios" modifier, but to me, the primary use-case of this library is to support iOS. So if PWAs aren't working on iOS because you have these kinds of auth flows, I'd probably suggest not using PWACompat for the time being.

For me, I wish to have the manifest in place for non-iOS users and have my site open in browser for iOS users until apple get their act together.

[samthor]

If that's the case, the JavaScript suggested above could be included in your own bundle or inline in the HTML. This just really isn't a PWACompat issue ¯\_(ツ)_/¯

[Chris-KCIT]

Indeed I have included the above code, it is working very well. As soon as these Safari issues are resolved by Apple I can go back to using PWACompat for my poor iOS users :o for now they will be using our system in a Safari window.

[maku-zuhlke]

Thanks @samthor. I can confirm that iOS 12.2.0 fixes the issue for us. 🎉🎉🎉