Add service worker caching

src/main.js

@@ -1,5 +1,16 @@
-const fx_version = '0.6.6.18'; // FX Client Version
-const fx_update = 'Feb 6'; // FX Client Last Updated
+const fx_version = '0.6.7'; // FX Client Version
+const fx_update = 'Feb 8'; // FX Client Last Updated
+
+if ("serviceWorker" in navigator) {
+  navigator.serviceWorker.addEventListener("message", (e) => {
+    const message = e.data;
+    if (message.event === "activate" && buildTimestamp !== message.version) {
+      // worker was updated in the background
+      document.getElementById("updateNotification").style.display = "block";
+    }
+  });
+  navigator.serviceWorker.register("./sw.js");
+}
 
 import settingsManager from './settings.js';
 import { clanFilter, leaderboardFilter } from "./clanFilters.js";

static/index.html

@@ -83,6 +83,11 @@
         <h1>Donation history for </h1>
         <p id="donationhistory_note">Note: donations from bots are not shown here</p>
         <table><tbody id="donationhistory_content"></tbody></table>
+    </div>
+    <div class="window" style="display: none" id="updateNotification">
+      <h3>A new version of FX is available! Reload to update</h3>
+      <button onclick="window.location.reload()">Reload</button>
+      <button onclick="document.getElementById('updateNotification').style.display = 'none'">Dismiss</button>
     </div></span>
     <script src="variables.js?buildTimestamp"></script>
     <script src="fx.bundle.js?buildTimestamp"></script>

static/sw.js

@@ -0,0 +1,47 @@
+const cacheName = "buildTimestamp"; // this gets replaced by the build script
+
+self.addEventListener("install", (e) => {
+  console.log("[Service Worker] Install");
+  self.skipWaiting();
+});
+
+self.addEventListener("fetch", (e) => {
+  const url = e.request.url;
+  // Cache http and https only, skip unsupported chrome-extension:// and file://...
+  if (!(url.startsWith('http:') || url.startsWith('https:'))) {
+    return;
+  }
+  e.respondWith(
+    (async () => {
+      const r = await caches.match(e.request);
+      console.log(`[Service Worker] Fetching resource: ${url}`);
+      if (r) {
+        return r;
+      }
+      const response = await fetch(e.request);
+      const cache = await caches.open(cacheName);
+      console.log(`[Service Worker] Caching new resource: ${url}`);
+      cache.put(e.request, response.clone());
+      return response;
+    })(),
+  );
+});
+
+self.addEventListener("activate", (e) => {
+  console.log("[Service Worker] Activated", cacheName);
+  self.clients.matchAll().then(clients => {
+    clients.forEach(client => client.postMessage({ event: "activate", version: cacheName }));
+  });
+  e.waitUntil(
+    caches.keys().then((keyList) => {
+      return Promise.all(
+        keyList.map((key) => {
+          if (key === cacheName) {
+            return;
+          }
+          return caches.delete(key);
+        }),
+      );
+    }),
+  );
+});