feat(): add media focused service worker

serviceWorker7/pwabuilder-sw-register.js

@@ -0,0 +1,19 @@
+// This is the "serving cached media" service worker
+
+// Add this below content to your HTML page, or add the js file to your page at the very top to register service worker
+
+// Check compatibility for the browser we're running this in
+if ("serviceWorker" in navigator) {
+  if (navigator.serviceWorker.controller) {
+    console.log("[PWA Builder] active service worker found, no need to register");
+  } else {
+    // Register the service worker
+    navigator.serviceWorker
+      .register("pwabuilder-sw.js", {
+        scope: "./"
+      })
+      .then(function (reg) {
+        console.log("[PWA Builder] Service worker has been registered for scope: " + reg.scope);
+      });
+  }
+}

serviceWorker7/pwabuilder-sw.js

@@ -0,0 +1,25 @@
+// This is the "serving cached media" service worker
+
+const CACHE = "pwabuilder-offline";
+
+importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.0.0/workbox-sw.js');
+
+self.addEventListener("message", (event) => {
+  if (event.data && event.data.type === "SKIP_WAITING") {
+    self.skipWaiting();
+  }
+});
+
+workbox.loadModule('workbox-cacheable-response');
+workbox.loadModule('workbox-range-requests');
+
+workbox.routing.registerRoute(
+  /.*\.mp4/,
+  new workbox.strategies.CacheFirst({
+    cacheName: CACHE,
+    plugins: [
+      new workbox.cacheableResponse.CacheableResponsePlugin({statuses: [200]}),
+      new workbox.rangeRequests.RangeRequestsPlugin(),
+    ],
+  }),
+);