Search code examples
iosprogressive-web-appsmobile-safariworkbox

Workbox PWA on iOS 15 intermittently shows "Safari cannot open the page" when offline

We have developed a PWA to provide a subset of functionality to our users while offline. We use IndexedDB and Workbox 6.2.0 to cache data, static assets and API calls and serve them to the user via a service worker while offline.

It works really well on Android; but on iOS, it intermittently displays the "Safari cannot open the page" native error page instead of the offline functionality. On iOS 14 restarting the device fixes it, and all cached data is still there. On iOS 15 we don't need to restart the device: Usually killing all tabs and Safari does the trick and the PWA is available offline again; sometimes it won't work until we go back online; other times it comes back to life just by leaving it alone.

Tethering the device and debugging the PWA with Safari or Chrome DevTools doesn't show anything when the PWA errors - It doesn't show any registered service worker, cache, or DB.

  • There is a offline fallback page configured to be shown if the user tries to reach a resource that hasn't been cached, so this question doesn't apply.
  • Unlike this question, the PWA comes back to life if we connect back to the Internet, and then it works offline again.
  • This question suggests the device could be low on free storage, but ours has 6GB of storage left.
  • We're aware there's a bug in iOS 14 that's consistent with what we've seeing, but it should be fixed in iOS 15.
  • We also know there was a bug with importScripts that meant Workbox wasn't cached properly, but that should be fixed now too (we use importScripts to pull Workbox from Google's CDN)

To be honest, I've ran out of ideas about how to get this diagnosed, let alone fixed. Has anybody come across this before, or can suggest a way of getting some diagnostics data?

Solution

  • It turned out the issue was that we had our PWA configured with "display": "minimal-ui" in the manifest.json. It has to be set to standalone or fullscreen instead.

    We discovered this while looking at why all of our PWA's data was being deleted after seven days of inactivity. We thought the fact there was a manifest present and the PWA was saved in the home screen would be enough for Safari to remove the 7-Day Cap on All Script-Writeable Storage even if the display was set to minimal-ui. This wasn't the case: The PWA must be configured with "display": "standalone" or fullscreen for the cap to be removed.

    Doing this also stopped the behaviour described above.