Pwa03 workbox

js/main.js

@@ -14,6 +14,32 @@
  limitations under the License.
  */
 
+// Register the service worker
+if ('serviceWorker' in navigator) {
+  // Wait for the 'load' event to not block other work
+  window.addEventListener('load', async () => {
+    // Try to register the service worker.
+    try {
+      // Capture the registration for later use, if needed
+      let reg;
+
+      // import.meta.env.DEV is a special environment variable injected by Vite to let us know we're in development mode. Here, we can use the JS Module form of our service worker because we can control our browsers in dev.
+      if (import.meta.env.DEV) {
+        reg = await navigator.serviceWorker.register('/service-worker.js', {
+          type: 'module',
+        });
+      } else {
+        // In production, we use the normal service worker registration
+        reg = await navigator.serviceWorker.register('/service-worker.js');
+      }
+
+      console.log('Service worker registered! 😎', reg);
+    } catch (err) {
+      console.log('😥 Service worker registration failed: ', err);
+    }
+  });
+}
+
 window.addEventListener('DOMContentLoaded', async () => {
   // Set up the editor
   const { Editor } = await import('./app/editor.js');

service-worker.js

@@ -13,3 +13,31 @@ Copyright 2021 Google LLC
  See the License for the specific language governing permissions and
  limitations under the License.
  */
+
+// Choose a cache name
+const cacheName = 'cache-v1';
+// List the files to precache
+const precacheResources = ['/', '/index.html', '/css/style.css', '/js/main.js', '/js/app/editor.js', '/js/lib/actions.js'];
+
+// When the service worker is installing, open the cache and add the precache resources to it
+self.addEventListener('install', (event) => {
+  console.log('Service worker install event!');
+  event.waitUntil(caches.open(cacheName).then((cache) => cache.addAll(precacheResources)));
+});
+
+self.addEventListener('activate', (event) => {
+  console.log('Service worker activate event!');
+});
+
+// When there's an incoming fetch request, try and respond with a precached resource, otherwise fall back to the network
+self.addEventListener('fetch', (event) => {
+  console.log('Fetch intercepted for:', event.request.url);
+  event.respondWith(
+    caches.match(event.request).then((cachedResponse) => {
+      if (cachedResponse) {
+        return cachedResponse;
+      }
+      return fetch(event.request);
+    }),
+  );
+});