feature: sw cache all

src/components/sw-toolbox.js

@@ -10,7 +10,7 @@ if ('serviceWorker' in navigator) {
     let registration;
 
     const showSkipWaitingPrompt = (event) => {
-      if(hubl.intl.t('serviceWorker.newUpdate') != undefined) {
+      if (hubl.intl.t('serviceWorker.newUpdate') != undefined) {
         Swal.fire({
           position: 'bottom-end',
           backdrop: false,

src/scripts/sw-broadcast.js

@@ -0,0 +1,21 @@
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.addEventListener('message', async (event) => {
+    if (event.data.meta === 'workbox-broadcast-update') {
+      const {
+        cacheName,
+        updatedURL
+      } = event.data.payload;
+
+      const cache = await caches.open(cacheName);
+      const updatedResponse = await cache.match(updatedURL);
+      try {
+        const updatedData = await updatedResponse.json();
+        if (sibStore && "setResource" in sibStore) {
+          sibStore.setResource(updatedURL, updatedData);
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  });
+}

src/service-worker.js

@@ -9,7 +9,13 @@ addEventListener('message', (event) => {
 });
 
 workbox.routing.registerRoute(
-  ({url}) => url.origin === 'https://fonts.gstatic.com',
+  ({
+    url
+  }) => [
+    'https://fonts.gstatic.com',
+    'https://fonts.googleapis.com',
+    'https://storage.googleapis.com'
+  ].includes(url.origin),
   new workbox.strategies.CacheFirst({
     cacheName: 'google-fonts-webfonts',
     plugins: [
@@ -25,21 +31,25 @@ workbox.routing.registerRoute(
 );
 
 workbox.routing.registerRoute(
-  ({url}) => [
+  ({
+    url
+  }) => [
     'https://cdn.jsdelivr.net',
     'https://unpkg.com',
     'https://cdn.skypack.dev',
     'https://jspm.dev',
     'https://fonts.googleapis.com',
     'https://cdn.startinblox.com'
-  ].includes(url.origin),
+  ].includes(url.origin) || url.origin.test(/cdn/),
   new workbox.strategies.StaleWhileRevalidate({
     cacheName: 'cdn',
   })
 );
 
 workbox.routing.registerRoute(
-  ({ request }) => request.destination === 'image',
+  ({
+    request
+  }) => request.destination === 'image',
   new workbox.strategies.CacheFirst({
     cacheName: 'images',
     plugins: [
@@ -55,9 +65,11 @@ workbox.routing.registerRoute(
 );
 
 workbox.routing.registerRoute(
-  ({ request }) =>
-    request.destination === 'style' ||
-    request.destination === 'script',
+  ({
+    request
+  }) =>
+  request.destination === 'style' ||
+  request.destination === 'script',
   new workbox.strategies.StaleWhileRevalidate({
     cacheName: 'assets',
     plugins: [
@@ -69,7 +81,9 @@ workbox.routing.registerRoute(
 );
 
 workbox.routing.registerRoute(
-  ({ request }) => request.mode === 'navigate',
+  ({
+    request
+  }) => request.mode === 'navigate',
   new workbox.strategies.NetworkFirst({
     cacheName: 'pages',
     plugins: [
@@ -79,3 +93,15 @@ workbox.routing.registerRoute(
     ],
   }),
 );
+
+workbox.routing.registerRoute(() => true,
+  new workbox.strategies.StaleWhileRevalidate({
+    cacheName: 'apis',
+    plugins: [
+      new workbox.broadcastUpdate.BroadcastUpdatePlugin(),
+      new workbox.expiration.ExpirationPlugin({
+        maxAgeSeconds: 60 * 60 * 24 * 30,
+      }),
+    ],
+  })
+);