Update Service Worker files

src/service-worker.js

@@ -9,9 +9,19 @@
 
 import { clientsClaim } from 'workbox-core';
 import { ExpirationPlugin } from 'workbox-expiration';
+import {CacheableResponsePlugin} from 'workbox-cacheable-response';
 import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
 import { registerRoute } from 'workbox-routing';
-import { StaleWhileRevalidate } from 'workbox-strategies';
+import { StaleWhileRevalidate, CacheFirst } from 'workbox-strategies';
+import {setCacheNameDetails} from 'workbox-core';
+import {BackgroundSyncPlugin} from 'workbox-background-sync';
+
+setCacheNameDetails({
+  prefix: 'kevins-toolbox',
+  suffix: 'v1',
+  precache: 'precache',
+  runtime: 'runtime'
+});
 
 clientsClaim();
 
@@ -45,21 +55,52 @@ registerRoute(
   },
   createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')
 );
-
-// An example runtime caching route for requests that aren't handled by the
-// precache, in this case same-origin .png requests like those from in public/
 registerRoute(
-  // Add in any other file extensions or routing criteria as needed.
-  ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.png'), // Customize this strategy as needed, e.g., by changing to CacheFirst.
-  new StaleWhileRevalidate({
-    cacheName: 'images',
-    plugins: [
-      // Ensure that once this runtime cache reaches a maximum size the
-      // least-recently used images are removed.
-      new ExpirationPlugin({ maxEntries: 50 }),
-    ],
-  })
-);
+    ({request}) => request.destination === 'image',
+    new CacheFirst({
+      cacheName: 'images',
+      plugins: [
+        new CacheableResponsePlugin({
+          statuses: [0, 200],
+        }),
+        new ExpirationPlugin({
+          maxEntries: 60,
+          maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
+        }),
+      ],
+    }),
+  );
+
+  registerRoute(
+    ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('translation.json'),
+    new StaleWhileRevalidate({
+      cacheName: 'translations',
+      plugins: [
+        new ExpirationPlugin({ maxEntries: 5 }),
+      ],
+    })
+  );
+
+  registerRoute(
+    ({url}) => url.origin === 'https://fonts.googleapis.com' ||
+               url.origin === 'https://fonts.gstatic.com',
+    new StaleWhileRevalidate({
+      cacheName: 'google-fonts',
+      plugins: [
+        new ExpirationPlugin({maxEntries: 20}),
+      ],
+    }),
+  );
+
+  registerRoute(
+    ({request}) => request.destination === 'script' ||
+                   request.destination === 'style',
+    new StaleWhileRevalidate({
+        plugins: [
+            new BackgroundSyncPlugin()
+        ]
+    })
+  );
 
 // This allows the web app to trigger skipWaiting via
 // registration.waiting.postMessage({type: 'SKIP_WAITING'})