Frontend: Initial service worker attempt

Signed-off-by: Fred Boniface <fred@fjla.uk>

static/conf/nginx.conf

@@ -33,7 +33,6 @@ http {
             gzip_static on;
             brotli_static on;
             error_page 404 /404.html;
-            error_page 500 501 502 503 504 505 /50x.html;
         }
 
         location /api/ {

static/conn-err.html

@@ -23,8 +23,10 @@
         <img class="titleimg" src="/images/logo/logo-full-250.png" alt="OwlBoard Logo">
       </picture>
       <h2>Oh no!</h2>
-        <p>OwlBoard has encountered a Server Error</p>
+        <p>OwlBoard has encountered a Connection Error</p>
-        <p>Try going to the <a href="/">homepage</a></p>
+        <p>Check your data connection and try again</p>
-        <p>Error number: 50x</p>
+        <p>Go to the <a href="/">homepage</a></p>
+        <br>
+        <p>Error Code: CERR</p>
     </body>
 </html>

static/js/index.js

@@ -1,6 +1,10 @@
 // Init:
 pageInit();
 
+if ("serviceWorker" in navigator) {
+  navigator.serviceWorker.register("/sw.js");
+}
+
 async function pageInit() {
   await loadQuickLinks();
   hideLoading(); // From lib.main

static/js/lib.board.js

@@ -225,3 +225,20 @@ async function singleCall(data) {
               <td class="detail-table-content ${time.changed}">${time.data}</td>
             </tr>`
 }
+
+/* Error Handler */
+async function errorHandler() {
+    if (sessionStorage.getItem("failcount")) {
+        var errCount = parseInt(sessionStorage.getItem("failcount"))
+    } else {
+        var errCount = 0;
+    }
+    errCount += 1;
+    sessionStorage.setItem("failcount", errCount.toString())
+    if (errCount < 10){
+        await delay(2000);
+        location.reload()
+    } else {
+        window.location.assign("conn-err.html")
+    }
+}

static/js/simple-board.js

@@ -17,15 +17,13 @@ async function init() {
         try {
             var data = await publicLdb(stn)
             setLoadingDesc(`${stn.toUpperCase()}\nParsing Data`)
-            log("init: Fetched LDB Data")
+            log("simple-board.init: Fetched LDB Data", "INFO")
-            parseLdb(data)
         } catch (err) {
-            var data = null
+            var data = "err"
             setLoadingDesc(`Handling\nError`)
-            log("init: Unable to fetch LDB data")
+            log(`simple-board.init: Error fetching data: ${err}`, "ERR")
-            await delay(2000);
-            location.reload();
         }
+        parseLdb(data)
     }
 }
 
@@ -43,13 +41,14 @@ async function parseLdb(data) {
         document.getElementById("err_no_data").style = "display:block;";
         setHeaders("No Data",new Date())
     } else if (data == "err") {  // Connection Error
+        await delay(2000);
         hideLoading();
         document.getElementById("error_notice").style = "display: block;";
         document.getElementById("err_conn").style = "display: block;";
         setHeaders("Connection Error",new Date())
         await delay(5000);
-        log(`parseLdb: Waited five seconds, reloading`)
+        log(`parseLdb: Passing to error handler`, "ERR")
-        location.reload()
+        errorHandler();
     } else {
         buildPage(data);
     }

static/sw.js

@@ -1 +1,62 @@
 /* Service Worker */
+
+const appVersion = "0.0.1-dev"
+const cacheName = "owlboard0-0-1-dev"
+const cacheFiles = [
+    "/404.html",
+    "/board.html",
+    "/conn-err.html",
+    "/find-code.html",
+    "/help.html",
+    "/",
+    "/issue.html",
+    "/settings.html",
+    "/styles/fonts/firamono/firamono-500.woff2",
+    "/styles/fonts/firamono/firamono-regular.woff2",
+    "/styles/fonts/urwgothic/urwgothic.woff2",
+    "/styles/fonts/urwgothic/urwgothicDemi.woff2",
+    "/styles/boards.css",
+    "/styles/find-code.css",
+    "/styles/help.css",
+    "/styles/main.css",
+    "/styles/settings.css",
+    "/js/find-code.js",
+    "/js/index.js",
+    "/js/lib.board.js",
+    "/js/lib.main.js",
+    "/js/settings.js",
+    "/js/simple-board.js",
+    "/images/icon.svg",
+    "/images/logo/wide_logo.svg",
+    "/images/logo/mono-logo.svg",
+    "/images/nav/alert_icon.svg",
+    "/images/nav/save.svg",
+    "/images/nav/home_icon.svg",
+    "/images/nre/nre-powered_200w.webp"
+]
+
+self.addEventListener("install", (e) => {
+    console.log("[Service Worker] Install");
+    e.waitUntil(
+        (async () => {
+            const cache = await caches.open(cacheName);
+            console.log("[Service Worker] Caching app data");
+            await cache.addAll(cacheFiles);
+        })()
+    );
+  });
+
+  self.addEventListener("fetch", (e) => {
+    e.respondWith(
+      (async () => {
+        const r = await caches.match(e.request);
+        console.log(`[Service Worker] Fetching resource: ${e.request.url}`);
+        if (r) {
+          return r;
+        }
+        const response = await fetch(e.request);
+        console.log(`[Service Worker] Fetching from server: ${e.request.url}`);
+        return response;
+      })()
+    );
+  });