Intermittent issue when navigating offline on Safari mobile

[kellypacker]

Summary

We are troubleshooting an error that happens intermittently on Safari mobile when navigating offline. The json and pages are added as additional manifest entries (see more info below). This works great on desktop and on Android. And sometimes it works on Safari, but other times it throws the offline error. It may work the first time it is installed, but not on the second install, even if all data is removed. It begins working again when connected.

Versions

• next-pwa: 5.5.6
• next: 12.3.1

How To Reproduce

Steps to reproduce the behavior:

1. Go to https://merry-bonbon-pwa.netlify.app/ on Safari mobile
2. Install the PWA
3. Open the PWA
4. Set your iphone/ipad in airplane mode.
5. Navigate to the "Test" page by clicking the "Test" link
6. Navigate to the nested page "Test Nested"
7. If it works, delete the app
8. Turn off airplane mode
9. Install the app again
10. Open the app
11. Turn on airplane mode
12. Navigate again

Here is a minimal repo that exhibits the issue

Expected Behaviors

Safari should navigate to the various saved pages when offline.

Screenshots

Additional Context

The app uses the approach described in this fantastic article https://dev.to/sfiquet/precaching-pages-with-next-pwa-31f2#how-to-precache-pages to add additional manifest entries and precache the page and json files in the next.config.js:

const precachedEntries = [
        { "url" : "/test", "revision": buildId },
        { "url" : `/_next/data/${buildId}/test.json`, "revision":null },
        { "url" : "/test-nested", "revision": buildId },
        { "url" : `/_next/data/${buildId}/test-nested.json`, "revision":null }
    ];
config.pwa.additionalManifestEntries = precachedEntries;

And this does work consistently in desktop and in android. But Safari has this maddening issue.

The error is very similar to the issue described here, but our app uses "display":"standalone"

It seems like maybe there is a race condition between the service worker returning the fetch data and Safari getting ahead of it. Because it's the same error that happens when you try to navigate to an external link when offline.

Does this ring any bells? It's incredibly hard to troubleshoot because once offline, there is not way to debug it on mobile (that we can find). Any ideas are appreciated. As we have been troubleshooting this for weeks.