Added service worker

2 years ago · b84caadaae
6 changed files with 144 additions and 1 deletions
--- a/about.html
+++ b/about.html
@ -8,6 +8,7 @@

 	<link rel="stylesheet" href="/base.css">

+	<script src="/worker.js"></script>
 	<script src="/back.js"></script>
 	<script src="/items.js"></script>
 </head>
--- a/index.html
+++ b/index.html
@ -10,6 +10,7 @@

 	<link rel="stylesheet" href="/base.css">

+	<script src="/worker.js"></script>
 	<script src="/items.js"></script>
 </head>
 <body>
--- a/sw.js
+++ b/sw.js
@ -0,0 +1,116 @@
+const VERSION = 'v1'
+const API_ORIGIN = 'https://scraper.infotren.dcdev.ro/'
+const API_TRAINS = `${API_ORIGIN}v2/trains`
+const API_STATIONS = `${API_ORIGIN}v2/stations`
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches
+      .open(VERSION)
+      .then((cache) =>
+        cache.addAll([
+          // Root
+          '/',
+
+          // Utility JS
+          '/worker.js',
+          '/items.js',
+          '/back.js',
+
+          // Base
+          '/base.css',
+
+          // Pages
+          '/index.html',
+
+          '/about.html',
+
+          '/train.html',
+          '/train.js',
+
+          '/view-train.html',
+          '/view-train.js',
+          '/view-train.css',
+
+          // API
+          API_TRAINS,
+          API_STATIONS,
+
+        ])
+      )
+  )
+})
+
+const deleteCache = (key) => caches.delete(key)
+
+const deleteOldCaches = async () => {
+   const cacheKeepList = [VERSION]
+   const keyList = await caches.keys()
+   const cachesToDelete = keyList.filter((key) => !cacheKeepList.includes(key))
+   await Promise.all(cachesToDelete.map(deleteCache))
+}
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(deleteOldCaches())
+})
+
+// Enable navigation preload
+const enableNavigationPreload = async () => {
+  if (self.registration.navigationPreload) {
+    // Enable navigation preloads!
+    await self.registration.navigationPreload.enable()
+  }
+}
+
+const putInCache = async (request, response) => {
+  const cache = await caches.open(VERSION)
+  await cache.put(request, response)
+}
+
+const cacheFirst = async ({ request, preloadResponsePromise, refreshAnyway }) => {
+  // First try to get the resource from the cache
+  const responseFromCache = await caches.match(request)
+  if (responseFromCache) {
+    if (refreshAnyway) {
+      console.log('request in cache, refreshing anyway but returning cache', request);
+      ((async () => {
+        try {
+          const response = await fetch(request)
+          if (response.ok) {
+            putInCache(request, response)
+          }
+        }
+        catch {}
+      })())
+    }
+    return responseFromCache
+  }
+
+  // Next try to use (and cache) the preloaded response, if it's there
+  const preloadResponse = await preloadResponsePromise
+  if (preloadResponse) {
+    console.info('using preload response', preloadResponse)
+    putInCache(request, preloadResponse.clone())
+    return preloadResponse
+  }
+
+  // Next try to get the resource from the network
+  const responseFromNetwork = await fetch(request)
+  // response may be used only once
+  // we need to save clone to put one copy in cache
+  // and serve second one
+  if (responseFromNetwork.ok) {
+    putInCache(request, responseFromNetwork.clone())
+  }
+  return responseFromNetwork;
+}
+
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    cacheFirst({
+      request: event.request,
+      preloadResponsePromise: event.preloadResponse,
+      refreshAnyway: [API_STATIONS, API_TRAINS].includes(event.request.url),
+    })
+  )
+})
--- a/train.html
+++ b/train.html
@ -10,6 +10,7 @@

 	<link rel="stylesheet" href="/base.css">

+	<script src="/worker.js"></script>
 	<script src="/back.js"></script>
 	<script src="/items.js"></script>
 	<script src="train.js"></script>
--- a/view-train.html
+++ b/view-train.html
@ -11,6 +11,7 @@
 	<link rel="stylesheet" href="/base.css">
 	<link rel="stylesheet" href="view-train.css">

+	<script src="/worker.js"></script>
 	<script src="/back.js"></script>
 	<script src="view-train.js"></script>
 </head>
--- a/worker.js
+++ b/worker.js
@ -0,0 +1,23 @@
+const registerServiceWorker = async () => {
+  if ('serviceWorker' in navigator) {
+    try {
+      const registration = await navigator.serviceWorker.register(
+        '/sw.js',
+        {
+          scope: '/',
+        }
+      );
+      if (registration.installing) {
+        console.log('Service worker installing');
+      } else if (registration.waiting) {
+        console.log('Service worker installed');
+      } else if (registration.active) {
+        console.log('Service worker active');
+      }
+    } catch (error) {
+      console.error(`Registration failed with ${error}`);
+    }
+  }
+};
+
+registerServiceWorker();