Service worker example triggers "offline mode" when actually it's a "confirm form resubmission"

[RichardNeill]

This example code: https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/custom-offline-page/service-worker.js works very well normally, to give a custom error page if (and only if) the application is offline.

However, in the case where I post a form submission, then post another one, then back (i.e. the back buttons hould takes me to the result of a previous post), then the SW tells me I've lost connection to the server. In other words, it's mistaking the "ERR_CACHE_MISS" / "Confirm Form Resubmission" for "ERR_INTERNET_DISCONNECTED."

[abhishekcghosh]

This is confusing for developers as well as users of the website. Is there a way known solution or a workaround/fix for this?

[abhishekcghosh]

Looks like this issue happens since the browser sets the request.mode to only-if-cached which is designed to work only when request.mode is same-origin, where as in this scenario, the request.mode is navigate resulting in the following error with which the fetch promise rejects.

TypeError: Failed to execute 'fetch' on 'ServiceWorkerGlobalScope': 'only-if-cached' can be set only with 'same-origin' mode

This is different from the otherwise generally expected fetch rejection (when you're actually offline) where the rejection error details looks like this (atleast on chrome):

TypeError: Failed to fetch

---

If you look carefully, the request triggered when the back button is hit for this post would contain cache set to only-if-cached, mode set to navigate and in new versions of Chrome (69+), isHistoryNavigation set to true.

I believe we can use a combination of checks where isHistoryNavigation is not true and cache is not only-if-cached when mode is navigate to work past this as a fix.