How to prevent hard reloads from bypassing the service worker?

Question

A hard reload or hard refresh (e.g., shift-reload in Chrome) appears to bypass the service worker.

For example, loading a service-worker controlled page such as https://airhorner.com/ or https://wiki-offline.jakearchibald.com/, setting the network to "offline" in devtools, and then hard reloading the page leads to a broken "there is no internet connection" page. (A regular reload shows the cached page, as expected.)

Is there a way to prevent this, or use the service worker as a fallback in the event that the device is offline?

Answer 1

This is behavior is explicitly called out as part of the service worker specification:

navigator.serviceWorker.controller returns null if the request is a force refresh (shift+refresh). The ServiceWorker objects returned from this attribute getter that represent the same service worker are the same objects.

So it's not just a browser implementation detail.

If you felt like there was a strong reason why a service worker shouldn't behave that way, the best approach would be to bring up your concerns in the spec's issue tracker.