Workbox: Are there any ways to detect an applications online/offline status?

[ikarus93]

Library Affected:
workbox-webpack-plugin
Browser & Platform:
all browsers

Issue or Feature Request Description:
I am using the workbox-webpack-plugin to precache parts of my application. Everything is working fine so far, however I want to change parts of the UI to notify the user of said change in network connectivity state.
I know that with vanilla service workers, we can achieve this from within the eventl istener for the "fetch" event, however this event listener doesnt seem to get triggered for me when using workbox to generate my service worker.

My sw.js file:

workbox.precaching.precacheAndRoute(self.__precacheManifest); self.addEventListener("fetch", e => { console.log("Fetch event detected"); });

Relevant part from plugins section in webpack.config.js:

new WorkboxWebpackPlugin.InjectManifest({ swSrc: "./public/sw.js", swDest: "sw.js" }),

file that registers my service worker on page load:
if ("serviceWorker" in navigator) { window.addEventListener("load", () => { navigator.serviceWorker .register("/sw.js") .then(req => console.log("All fine")) .catch(e => console.log(e)); }); }

Any ideas? I am also open to handle this in a different way, but for now it seems that there is not much room for customizing auto generated service workers...

Judging from my console logs and the output within the service workers section inside the chrome webtools, the service worker is being registered, installed and activated fine. As I mentioned, the caching works as it is supposed to, as well.

[jeffposnick]

If you want to change parts of your UI to let users know that they happen to be offline, then your best bet is to set up an event listener within your web app (not in the service worker) that detects that change, and reacts accordingly:

window.addEventListener('offline', () => {
  // Update your UI to reflect that there's no connection.
});

window.addEventListener('online', () => {
  // Update your UI to reflect that the connection is back.
});

Your generated service worker is always going to return a valid response for precached URLs regardless of whether things are offline or online, but if there are certain sections of your site that you know aren't precached, and can't be handled via a runtime caching strategy, then this is how you could proactively prevent users from triggering a request that is likely to fail.

[ikarus93]

Really helpful, thanks!