From 4903a98f18475abf66e07ce91e4e3530d482076b Mon Sep 17 00:00:00 2001
From: Sam Richard <snugug@google.com>
Date: Fri, 19 Mar 2021 11:08:46 -0400
Subject: [PATCH 1/2] Add changes from PWA03 - Going Offline

---
 js/main.js        | 19 +++++++++++++++++++
 service-worker.js | 28 ++++++++++++++++++++++++++++
 2 files changed, 47 insertions(+)

diff --git a/js/main.js b/js/main.js
index 62ad872..c4620b7 100644
--- a/js/main.js
+++ b/js/main.js
@@ -14,6 +14,25 @@
  limitations under the License.
  */
 
+// Need to use this WMR syntax to properly compile the service worker.
+// If you compile your service worker in another way, you can use the URL to it
+// directly in navigator.serviceWorker.register
+import swURL from 'sw:../service-worker.js';
+
+// 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 {
+      const reg = await navigator.serviceWorker.register(swURL);
+      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');
diff --git a/service-worker.js b/service-worker.js
index 0a09721..ff1bf32 100644
--- a/service-worker.js
+++ b/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);
+    }),
+  );
+});

From 49d0305b23a00401565690f2ac7637c39915379d Mon Sep 17 00:00:00 2001
From: Sam Richard <samrichard@google.com>
Date: Fri, 23 Sep 2022 14:43:24 -0400
Subject: [PATCH 2/2] Update JS registration for Vite

---
 js/main.js | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/js/main.js b/js/main.js
index c4620b7..332044a 100644
--- a/js/main.js
+++ b/js/main.js
@@ -14,18 +14,25 @@
  limitations under the License.
  */
 
-// Need to use this WMR syntax to properly compile the service worker.
-// If you compile your service worker in another way, you can use the URL to it
-// directly in navigator.serviceWorker.register
-import swURL from 'sw:../service-worker.js';
-
 // 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 {
-      const reg = await navigator.serviceWorker.register(swURL);
+      // 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);