PWA - Service Worker

// https://github.com/185driver/pwa-app-updates

/* eslint-disable no-undef, no-underscore-dangle, no-restricted-globals */

// This is the code piece that GenerateSW mode can't provide for us.

// This code listens for the user's confirmation to update the app.

self.addEventListener("message", (e) => {

if (!e.data) {

return;

}

switch (e.data) {

case "skipWaiting":

self.skipWaiting();

break;

default:

// NOOP

break;

}

});

workbox.core.clientsClaim(); // Vue CLI 4 and Workbox v4, else

// workbox.clientsClaim(); // Vue CLI 3 and Workbox v3.

// The precaching code provided by Workbox.

self.__precacheManifest = [].concat(self.__precacheManifest || []);

// workbox.precaching.suppressWarnings(); // Only used with Vue CLI 3 and Workbox v3.

workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

// END OF => https://github.com/185driver/pwa-app-updates

workbox.routing.registerNavigationRoute("/index.html");

// https://developers.google.com/web/tools/workbox/guides/common-recipes

const { registerRoute } = workbox.routing;

const { CacheFirst, StaleWhileRevalidate } = workbox.strategies;

// Available on v5, but we are on v4

//const { CacheableResponsePlugin } = workbox.cacheable.response;

//const { ExpirationPlugin } = workbox.expiration;

// v4 equivalent

// new workbox.cacheableResponse.Plugin

// new workbox.expiration.Plugin({

// Cache the Google Fonts stylesheets with a stale-while-revalidate strategy.

registerRoute(

({ url }) => url.origin === "https://fonts.googleapis.com",

new StaleWhileRevalidate({

cacheName: "google-fonts-stylesheets",

})

);

registerRoute(

({ url }) => url.origin === "https://fonts.googleapis.com",

new StaleWhileRevalidate({

cacheName: "google-fonts-stylesheets",

})

);

// Cache the underlying font files with a cache-first strategy for 1 year.

registerRoute(

({ url }) => url.origin === "https://fonts.gstatic.com",

new CacheFirst({

cacheName: "google-fonts-webfonts",

plugins: [

new workbox.cacheableResponse.Plugin({

statuses: [0, 200],

}),

new workbox.expiration.Plugin({

maxAgeSeconds: 60 * 60 * 24 * 365,

maxEntries: 30,

}),

],

})

);

registerRoute(

({ url }) => url.origin === "https://cdn.jsdelivr.net",

new CacheFirst({

cacheName: "materialdesignicons",

plugins: [

new workbox.cacheableResponse.Plugin({

statuses: [0, 200],

}),

new workbox.expiration.Plugin({

maxAgeSeconds: 60 * 60 * 24 * 365,

maxEntries: 30,

}),

],

})

);

// END OF => https://developers.google.com/web/tools/workbox/guides/common-recipes