Make PWA work offline with caching

JonathanBuchh · Jan 8, 2024 · c3f57b3 · c3f57b3
1 parent a14f9f6
commit c3f57b3
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 1 deletion.
diff --git a/script.js → app.js b/script.js → app.js
diff --git a/index.html b/index.html
@@ -8,6 +8,12 @@
   <link rel="stylesheet" href="style.css">
   <link rel="manifest" href="manifest.json"/>
   <meta name="color-scheme" content="dark light">
+  <script src="app.js"></script>
+  <script>
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register('sw.js');
+    }
+  </script>
 </head>
 <body>
   <main>
@@ -25,5 +31,4 @@ <h1 id="header">א Aleph</h1>
     <small>Made with <span id="heart">♥</span> by <a href="https://buchh.org" target="_blank">Jonathan Buchholz</a></small>
   </footer>
 </body>
-<script src="script.js"></script>
 </html>
diff --git a/sw.js b/sw.js
@@ -0,0 +1,20 @@
+self.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('my-site-cache').then(function(cache) {
+      return cache.addAll([
+        '/app.js',
+	'icon.png',
+        '/index.html',
+        '/style.css',
+      ]);
+    })
+  );
+});
+
+self.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).then(function(response) {
+      return response || fetch(event.request);
+    })
+  );
+});