chore: add npm + vite for progressive enhancement

src/sw.js

@@ -0,0 +1,98 @@
+importScripts("https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js");
+
+const {Route, registerRoute} = workbox.routing;
+const {CacheFirst, NetworkFirst, StaleWhileRevalidate} = workbox.strategies;
+const {CacheableResponsePlugin} = workbox.cacheableResponse;
+const {ExpirationPlugin} = workbox.expiration;
+
+const DAY = 24 * 60 * 60; // in seconds
+
+registerRoute(
+  ({request}) => request.mode === "navigate",
+  new NetworkFirst({
+    networkTimeoutSeconds: 15,
+    cacheName: "fmg-html",
+    plugins: [new CacheableResponsePlugin({statuses: [0, 200]})]
+  })
+);
+
+registerRoute(
+  ({request, url}) =>
+    request.destination === "script" &&
+    !url.pathname.endsWith("min.js") &&
+    !url.pathname.includes("versioning.js") &&
+    !url.pathname.includes("google"),
+  new StaleWhileRevalidate({
+    cacheName: "fmg-scripts",
+    plugins: [
+      new CacheableResponsePlugin({statuses: [0, 200]}),
+      new ExpirationPlugin({maxEntries: 100, maxAgeSeconds: 30 * DAY})
+    ]
+  })
+);
+
+registerRoute(
+  ({request}) => request.destination === "style",
+  new CacheFirst({
+    cacheName: "fmg-stylesheets",
+    plugins: [
+      new CacheableResponsePlugin({statuses: [0, 200]}),
+      new ExpirationPlugin({maxEntries: 100, maxAgeSeconds: 30 * DAY})
+    ]
+  })
+);
+
+registerRoute(
+  ({request, url}) => request.destination === "script" && url.pathname.endsWith("min.js"),
+  new CacheFirst({
+    cacheName: "fmg-libs",
+    plugins: [
+      new CacheableResponsePlugin({statuses: [0, 200]}),
+      new ExpirationPlugin({maxEntries: 100, maxAgeSeconds: 30 * DAY})
+    ]
+  })
+);
+
+registerRoute(
+  new RegExp(".json$"),
+  new CacheFirst({
+    cacheName: "fmg-json",
+    plugins: [
+      new CacheableResponsePlugin({statuses: [0, 200]}),
+      new ExpirationPlugin({maxEntries: 100, maxAgeSeconds: 30 * DAY})
+    ]
+  })
+);
+
+registerRoute(
+  ({request}) => request.destination === "image",
+  new CacheFirst({
+    cacheName: "fmg-images",
+    plugins: [
+      new CacheableResponsePlugin({statuses: [0, 200]}),
+      new ExpirationPlugin({maxEntries: 100, maxAgeSeconds: 60 * DAY})
+    ]
+  })
+);
+
+registerRoute(
+  new RegExp(".svg$"),
+  new CacheFirst({
+    cacheName: "fmg-charges",
+    plugins: [
+      new CacheableResponsePlugin({statuses: [0, 200]}),
+      new ExpirationPlugin({maxEntries: 100, maxAgeSeconds: 60 * DAY})
+    ]
+  })
+);
+
+registerRoute(
+  ({request}) => request.destination === "font",
+  new CacheFirst({
+    cacheName: "fmg-fonts",
+    plugins: [
+      new CacheableResponsePlugin({statuses: [0, 200]}),
+      new ExpirationPlugin({maxEntries: 100, maxAgeSeconds: 60 * DAY})
+    ]
+  })
+);