refactor: compile service worker

src/scripts/listeners.ts

@@ -1,5 +1,5 @@
 // @ts-ignore
-import {checkIfServerless} from "./loading";
+import {addOnLoadListener} from "./loading";
 import {assignLockBehavior} from "./options/lock";
 import {addTooptipListers} from "./tooltips";
 import {assignSpeakerBehavior} from "./speaker";
@@ -9,12 +9,12 @@ import {addResizeListener} from "modules/ui/options";
 import {addDragToUpload} from "modules/io/load";
 
 export function addGlobalListeners() {
-  checkIfServerless();
   if (PRODUCTION) {
     registerServiceWorker();
     addInstallationPrompt();
     addBeforeunloadListener();
   }
+  addOnLoadListener();
   assignLockBehavior();
   addTooptipListers();
   addResizeListener();
@@ -25,9 +25,11 @@ export function addGlobalListeners() {
 function registerServiceWorker() {
   "serviceWorker" in navigator &&
     window.addEventListener("load", () => {
-      navigator.serviceWorker.register("../sw.js").catch(err => {
-        console.error("ServiceWorker registration failed: ", err);
-      });
+      navigator.serviceWorker
+        .register("/Fantasy-Map-Generator/sw.js", {scope: "/Fantasy-Map-Generator/"})
+        .catch(err => {
+          console.error("ServiceWorker registration failed: ", err);
+        });
     });
 }
 

src/scripts/loading.js

@@ -1,92 +1,57 @@
 import * as d3 from "d3";
 
 import {ERROR, WARN} from "config/logging";
-import {generateMapOnLoad} from "./generation";
 import {loadMapFromURL} from "modules/io/load";
 import {restoreDefaultEvents} from "scripts/events";
+import {ldb} from "scripts/indexedDB";
+import {getInputValue} from "utils/nodeUtils";
+import {generateMapOnLoad} from "./generation";
 
-export function checkIfServerless() {
+export function addOnLoadListener() {
   document.on("DOMContentLoaded", async () => {
-    if (!location.hostname) {
-      const wiki = "https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Run-FMG-locally";
-      alertMessage.innerHTML = `Fantasy Map Generator cannot run serverless. Follow the <a href="${wiki}" target="_blank">instructions</a> on how you can
-        easily run a local web-server`;
-
-      $("#alert").dialog({
-        resizable: false,
-        title: "Loading error",
-        width: "28em",
-        position: {my: "center center-4em", at: "center", of: "svg"},
-        buttons: {
-          OK: function () {
-            $(this).dialog("close");
-          }
-        }
-      });
-    } else {
-      hideLoading();
-      await checkLoadParameters();
-    }
-    restoreDefaultEvents(); // apply default viewbox events
+    await loadOrGenerateMap();
+    hideLoading();
+    restoreDefaultEvents();
   });
 }
 
 // decide which map should be loaded or generated on page load
-async function checkLoadParameters() {
-  const url = new URL(window.location.href);
-  const params = url.searchParams;
+async function loadOrGenerateMap() {
+  const {searchParams} = new URL(window.location.href);
+  const maplink = searchParams.get("maplink");
+  const seed = searchParams.get("seed");
 
   // of there is a valid maplink, try to load .map file from URL
-  if (params.get("maplink")) {
+  if (maplink) {
     WARN && console.warn("Load map from URL");
-    const maplink = params.get("maplink");
     const pattern = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
-    const valid = pattern.test(maplink);
-    if (valid) {
-      setTimeout(() => {
-        loadMapFromURL(maplink, 1);
-      }, 1000);
-      return;
-    } else showUploadErrorMessage("Map link is not a valid URL", maplink);
+    const isValidUrl = pattern.test(maplink);
+
+    if (!isValidUrl) return showUploadErrorMessage("Map link is not a valid URL", maplink);
+
+    setTimeout(() => {
+      loadMapFromURL(maplink, 1);
+    }, 1000);
   }
 
   // if there is a seed (user of MFCG provided), generate map for it
-  if (params.get("seed")) {
+  if (seed) {
     WARN && console.warn("Generate map for seed");
     await generateMapOnLoad();
     return;
   }
 
-  // open latest map if option is active and map is stored
-  const loadLastMap = () =>
-    new Promise((resolve, reject) => {
-      ldb.get("lastMap", blob => {
-        if (blob) {
-          WARN && console.warn("Load last saved map");
-          try {
-            uploadMap(blob);
-            resolve();
-          } catch (error) {
-            reject(error);
-          }
-        } else {
-          reject("No map stored");
-        }
-      });
-    });
-
-  if (onloadMap.value === "saved") {
+  if (getInputValue("onloadMap") === "saved") {
     try {
       await loadLastMap();
+      return;
     } catch (error) {
-      ERROR && console.error(error);
-      WARN && console.warn("Cannot load stored map, random map to be generated");
-      await generateMapOnLoad();
+      ERROR && console.error("Cannot load stored map, random map to be generated", error);
     }
-  } else {
-    WARN && console.warn("Generate random map");
-    await generateMapOnLoad();
   }
+
+  WARN && console.warn("Generate random map");
+  await generateMapOnLoad();
 }
 
 export function hideLoading() {
@@ -100,3 +65,22 @@ export function showLoading() {
   d3.select("#optionsContainer").transition().duration(100).style("opacity", 0);
   d3.select("#tooltip").transition().duration(200).style("opacity", 0);
 }
+
+// open latest map if option is active and map is stored
+function loadLastMap() {
+  return new Promise((resolve, reject) => {
+    ldb.get("lastMap", blob => {
+      if (blob) {
+        WARN && console.warn("Load last saved map");
+        try {
+          uploadMap(blob);
+          resolve();
+        } catch (error) {
+          reject(error);
+        }
+      } else {
+        reject("No map stored");
+      }
+    });
+  });
+}