Add service worker and PWA capabilities

Author: JuanKman94

assets/styles.css

@@ -183,7 +183,7 @@ task-category-form,
   left: 0;
   height: var(--bottomnav-height);
   width: 100%;
-  z-index: 10;
+  z-index: 1;
 
   background-color: var(--bg-navbar);
   border-top: 1px solid var(--border-color-dark);

index.html

@@ -6,11 +6,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>My List</title>
 
-  <link rel=stylesheet href=assets/styles.css>
-  <script src=assets/lib.js></script>
-  <script src=assets/components.js></script>
-  <script src=assets/main.js></script>
-  <script src=assets/sortable.min.js></script>
+  <link rel="stylesheet" href="assets/styles.css">
 
   <!-- favicon generated with https://realfavicongenerator.net/ -->
   <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
@@ -165,6 +161,10 @@ <h3 id="faq">FAQ</h3>
       (<a href="https://github.com/JuanKman94/mylist">source code</a>).
     </p>
 
+    <p>
+      <code id="app-version">v1.0</code>
+    </p>
+
     <ul class="italic text-left">
       <li>
         <a href="https://github.com/ipython/xkcd-font">xkcd font</a>,
@@ -367,6 +367,35 @@ <h3 class="task-category--title">
     </details>
   </template>
 
+  <script src="assets/lib.js"></script>
+  <script src="assets/components.js"></script>
+  <script src="assets/main.js"></script>
+  <script src="assets/sortable.min.js"></script>
+
+  <script>
+    const registerServiceWorker = async () => {
+      if ('serviceWorker' in navigator) {
+        try {
+          const registration = await navigator
+            .serviceWorker
+            .register('sw.js', { scope: './' });
+
+          if (registration.installing) {
+            console.log('Service worker is installing.');
+          } else if (registration.waiting) {
+            console.log('Service worker successfully installed.');
+          } else if (registration.active) {
+            console.log('Service worker is active!');
+          }
+        } catch (err) {
+          console.error('Service worker cannot be installed.', err);
+        }
+      }
+    };
+
+    registerServiceWorker();
+  </script>
+
   <!--
     SVG icons generated with https://github.com/jgarber623/svgeez and embedded for styling.
     Individual files located at: assets/icons/

site.webmanifest

@@ -1,14 +1,20 @@
 {
-    "name": "",
-    "short_name": "",
+    "name": "My List",
+    "short_name": "My List",
+	"start_url": "./",
     "icons": [
         {
-            "src": "/android-chrome-192x192.png",
+            "src": "./apple-touch-icon.png",
+            "sizes": "180x180",
+            "type": "image/png"
+        },
+        {
+            "src": "./android-chrome-192x192.png",
             "sizes": "192x192",
             "type": "image/png"
         },
         {
-            "src": "/android-chrome-512x512.png",
+            "src": "./android-chrome-512x512.png",
             "sizes": "512x512",
             "type": "image/png"
         }

sw.js

@@ -0,0 +1,104 @@
+/**
+ * Service Worker to enable PWA functionality.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Caching
+ * @see https://web.archive.org/web/20231106070218/https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Caching
+ */
+const CACHE_NAME = "mylist_1";
+const PRECACHED_RESOURCES = [
+  "./",
+  "./index.html",
+  "./assets/styles.css",
+  "./apple-touch-icon.png",
+  "./favicon-32x32.png",
+  "./favicon-16x16.png",
+  "./assets/lib.js",
+  "./assets/components.js",
+  "./assets/main.js",
+  "./assets/sortable.min.js",
+  "./assets/sticky-tape.png",
+  "./assets/images/check.svg",
+  "./assets/icons/check.svg",
+  "./assets/icons/info.svg",
+  "./assets/icons/list.svg",
+  "./assets/icons/loop.svg",
+  "./assets/fonts/xkcd.otf",
+];
+
+function isCacheable(request) {
+  const url = new URL(request.url);
+
+  return !url.pathname.endsWith(".json");
+}
+
+function precache() {
+  return caches.open(CACHE_NAME)
+    .then((cache) => {
+      console.debug('[mylist:sw.js] #precache: adding cache for', PRECACHED_RESOURCES);
+
+      return cache.addAll(PRECACHED_RESOURCES);
+    })
+}
+
+function fetchResponsePromise(request, cache) {
+  console.warn('Fetching response for', request.url);
+
+  return fetch(request)
+    .then(function(networkResponse) {
+      if (networkResponse.ok) {
+        console.info('Storing cache for', request.url);
+        cache.put(request, networkResponse.clone());
+      }
+
+      return networkResponse;
+    })
+    .catch(function(err) {
+      console.error('Could not fetch', request.url, '. Error:', err);
+      return Response.error();
+    });
+}
+
+function cacheFirstWithRefresh(request) {
+  return caches
+    .open(CACHE_NAME)
+    .then(function(cache) {
+      if (cache.match(request)) {
+        console.info('Found cache for', request.url);
+        return cache.match(request);
+      }
+
+      return fetchResponsePromise(request, cache);
+    });
+}
+
+self.addEventListener("fetch", function(ev) {
+  const url = new URL(ev.request.url);
+
+  if (!url.pathname.endsWith(".json")) {
+    ev.respondWith( cacheFirstWithRefresh(ev.request) );
+  }
+});
+
+self.addEventListener("install", function(ev) {
+  console.log('[mylist:sw.js] #install: pre-caching files...');
+
+  ev.waitUntil(precache());
+});
+
+self.addEventListener("push", function(ev) {
+  console.debug('[mylist:sw.js] push event received:', ev);
+});
+
+function enableNavigationPreload() {
+  if (self.registration.navigationPreload) {
+    return self.registration.navigationPreload.enable();
+  }
+
+  return null;
+};
+
+self.addEventListener('activate', (ev) => {
+  ev.waitUntil(enableNavigationPreload());
+});
+
+console.log('[mylist:sw.js] loaded.');