Add a 'noWebWorker=true' option to <replay-web-page> embed to disable loading in separate web worker (#102)

* add a 'noWebWorker' option to <replay-web-page> embed to disable the default webworker-based loading, and load via the service worker directly. this feature was previously available, but turned-off, as its less efficient (uses sw for what can be done in a separate web worker thread). however, service-worker based loading may be needed for certain edge cases (see #97), and this option enables this loading method to be turned back on for embedding.
* docs: update guide to include 'noWebWorker', also use include attribute for boolean attributes
* update CHANGES.md
* bump to 1.5.12

src/loader.js

@@ -27,7 +27,9 @@ class Loader extends LitElement
 
     this.errorAllowRetry = false;
 
-    this.pingInterval = "";
+    this.pingInterval = 0;
+
+    this.noWebWorker = false;
   }
 
   static get properties() {
@@ -56,11 +58,18 @@ class Loader extends LitElement
   }
 
   initMessages() {
-    // if (!navigator.serviceWorker) {
-    //   return;
-    // }
-    // eslint-disable-next-line no-undef
-    this.worker = new Worker(__SW_NAME__);
+    this.noWebWorker = this.loadInfo && this.loadInfo.noWebWorker;
+
+    if (!this.noWebWorker) {
+      // eslint-disable-next-line no-undef
+      this.worker = new Worker(__SW_NAME__);
+    } else {
+      if (!navigator.serviceWorker) {
+        return;
+      }
+
+      this.worker = navigator.serviceWorker;
+    }
 
     this.worker.addEventListener("message", (event) => {
       switch (event.data.msg_type) {
@@ -94,11 +103,16 @@ class Loader extends LitElement
           }
           this.progress = this.total;
           this.percent = 100;
-          if (this.pingInterval) {
-            clearInterval(this.pingInterval);
-          }
           this.dispatchEvent(new CustomEvent("coll-loaded", {detail: event.data}));
-          this.worker.terminate();
+
+          if (!this.noWebWorker) {
+            this.worker.terminate();
+          } else {
+            if (this.pingInterval) {
+              clearInterval(this.pingInterval);
+            }
+          }
+          this.worker = null;
         }
         break;
       }
@@ -187,15 +201,19 @@ You can select a file to upload from the main page by clicking the 'Choose File.
       });
     }
 
-    this.worker.postMessage(msg);
+    if (this.worker) {
+      if (!this.noWebWorker) {
+        this.worker.postMessage(msg);
+      } else {
+        navigator.serviceWorker.controller.postMessage(msg);
 
-    //navigator.serviceWorker.controller.postMessage(msg);
-
-    // ping service worker with messages to avoid shutdown while loading
-    // (mostly for Firefox)
-    // this.pingInterval = setInterval(() => {
-    //   navigator.serviceWorker.controller.postMessage({"msg_type": "ping"});
-    // }, 15000);
+        // ping service worker with messages to avoid shutdown while loading
+        // (mostly for Firefox)
+        this.pingInterval = setInterval(() => {
+          navigator.serviceWorker.controller.postMessage({"msg_type": "ping"});
+        }, 15000);
+      }
+    }
   }
 
   googledriveInit() {
@@ -213,12 +231,22 @@ You can select a file to upload from the main page by clicking the 'Choose File.
   }
 
   onCancel() {
-    //if (navigator.serviceWorker && navigator.serviceWorker.controller) {
-    if (this.worker) {
-      this.worker.postMessage({"msg_type": "cancelLoad", "name": this.coll});
-      // if (this.pingInterval) {
-      //   clearInterval(this.pingInterval);
-      // }
+    if (!this.worker) {
+      return;
+    }
+
+    const msg = {"msg_type": "cancelLoad", "name": this.coll};
+
+    if (!this.noWebWorker) {
+      this.worker.postMessage(msg);
+      return;
+    }
+
+    if (navigator.serviceWorker && navigator.serviceWorker.controller) {
+      navigator.serviceWorker.controller.postMessage(msg);
+      if (this.pingInterval) {
+        clearInterval(this.pingInterval);
+      }
     }
   }