PWA Freezing after OpenID authorizes user [iOS Safari Standalone]


PWA Freezing after OpenID authorizes user [iOS Safari Standalone]

I have built a simple PWA for our security staff that allows employees to click links and view content about our company's policies on various matters. The app uses Microsoft's OWIN middleware library to authorize our employees' access into the app via their enterprise Microsoft login creds. When a user clicks the 'Employee Sign in' prompt on our login page, they are redirected to Microsoft's domain to complete the sign-in process. Once sign in is complete, they are redirected back to our app's home page.

The Problem

The problem appears only to arise when iOS users (v13) pin the app to their homescreen and then launch the app in standalone mode, and only after the user has completely terminated the app and then returned. We've tested the app on Chrome, Safari (non-standalone mode), Firefox, and the issue does not present in those browswers. The app functions seamlessly up until the point that the user has completed their Microsoft signin and been redirected back to the home page. At this point, if a user clicks a link to another page (within the app), the app completely locks up, doesn't respond to further button clicks, and doesn't load the page prompted by the user. No errors are thrown in the console.

What we've found immediately kicks everything back into gear is if the user switches to another app (even just for a second) and then switches back to our PWA when it's locked up. At this point, the page that the user attempted to navigate to loads immediately without further prompting and the app works 100% seamlessly after this point. It's only the initial version of the default page that freezes.

Potential Causes

My current working theory is that the problem is being caused by some combination of the following:
  • Redirection to Microsoft's sign in portal. When the user is sent to Microsoft for auth and then sent back to our domain, there could be issues with session/cookie continuity.

  • iOS's standalone mode. In conjunction with the above, is it possible that using third-party authentication and briefly leaving the domain of the PWA is causing problems with future page navigation. This is supported by the idea that no other browsers or devices have this issue, and my research suggests that Apple support for PWAs is still in its early stages.

  • Service worker failure. We have done significant testing to ensure that a service worker is being properly installed and registered when a user first enters the site. We have checks to re-register the SW just in case it is dropped at any point in page navigation. We are confident that at the time a user is redirected back to our home page after authentication that there is an active service worker that handles page GET requests. I have also tested explicitly caching the linked pages accessible from our home page during the service worker's registration to see if serving the page from the cache would alleviate the issue. It did not. This is the code in sw.js that handles fetch requests (taken from Google's handy guide):

Code Block Javascript
// "cache-first" approach for requests from client. Will try to get the file from the cache.
// If no match found, it will send the request onto the network. If both fail serve fallback page.
self.addEventListener("fetch", function (event) {
if (event.request.method !== "GET") return;
event.respondWith(
// Try the cache
caches.match(event.request).then(function (response) {
console.log("[service worker] attempting to fetch file from cache...");
return response || fetch(event.request);
}).catch(function () {
// If both fail, show a generic fallback:
return caches.match(offlineFallbackPage);
})
);
});

I have remotely debugged the PWA in standalone using a Mac, and what I have verified is that the click event that fires when a user clicks a link to navigate to a new page IS being properly handled, so the problem truly appears to lie in the loading of the linked pages themselves. Beyond that, debugging remotely has confirmed that there are no HTTP GET errors (or any other errors) firing at all when attempting to navigate to other pages on the site.

This is the first PWA I've ever built and I'm a novice with all this stuff. So I'd love to know if I'm missing anything or where I can go from here. I've scoured all the forums and can't seem to find answers anywhere. Thanks!
Post not yet marked as solved Up vote post of MemoryDump Down vote post of MemoryDump
2.5k views

Replies

Have you manged to find a solution for this issue? I have been stuck on this for weeks.
I am facing similar issue. Although I find this issue with navigation to any external url.
https://developer.apple.com/forums/thread/658613

Also facing this exact issue trying to use firebase auth, which navigates to a url outside of the pwa domain. Navigation (return page load I think) hangs until the app is backgrounded and brought back into the foreground.

Were any of you able to resolve this issue?