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

CHANGES.md

@@ -1,5 +1,8 @@
 ## CHANGES
 
+v1.5.12
+- Embeds: Support embedding without using webworker with 'noWebWorker' attrib added to `<replay-web-page>`.
+
 v1.5.11
 - Loading: fix url lookup when no '=' in query arg, optimize loading compressed index (only load 3 blocks), via (wabac.js)
 - Loading: fix url lookup api calls

_data/package.json

@@ -1,7 +1,7 @@
 {
   "name": "replaywebpage",
   "productName": "ReplayWeb.page",
-  "version": "1.5.11",
+  "version": "1.5.12",
   "description": "Serverless Web Archive Replay",
   "repository": "https://github.com/webrecorder/replayweb.page",
   "homepage": "https://replayweb.page/",

docs/embedding.md

@@ -66,12 +66,13 @@ The `<replay-web-page>` tag is a web component and supports a number of addition
 | `source`     | Source URL for the archive file. It should be a URL in one of the [supported formats](/docs/formats) loaded from one of the [support locations](/docs/locations) and is required. |
 | `url`        | The starting URL to load from the archive. If omitted, will start with the page list or URL search view. |
 | `ts`         | The timestamp of the starting URL to load. If omitted, the latest available version is used. |
-| `deepLink`   | (`true` / `false`) if set to true, allow 'deep linking' to exact pages in the embed, besides the starting URL. |
+| `deepLink`   | if set, allow 'deep linking' to exact pages in the embed, besides the starting URL. |
 | `embed`      | (`default` / `full` / `replayonly` ) - if set to `full`, will show the replayweb.page nav bar and logo. if set to `default`, omitted, will show the location bar. if set to `replayonly`, will only show the `url` and not location bar or any nav bar buttons, which may be useful for embedding a single page only. |
 | `replayBase` | Location of the `sw.js` file, defaults to `./replay/` as mentioned above, but can be overridden. |
 | `coll`       | Internal id for this collection, usually generated automatically.
 | `config`     | Extra per collection config options (such as custom fuzzy matching rules, TODO add more info!) |
-| `noSandbox`  | (`true` / `false`) if set to true, don't wrap iframe in `sandbox`. Used as extra precaution to avoid escaping iframe, but prevents PDFs from loading in embed archive. Set for archives of known/trusted sites. |
+| `noSandbox`  | if set, don't wrap iframe in `sandbox`. Used as extra precaution to avoid escaping iframe, but prevents PDFs from loading in embed archive. Set for archives of known/trusted sites. |
+| `noWebWorker`| if set, will not use Web Worker for loading, only Service Worker. May be useful for certain loading edge cases. |
 
 
 ### Versioning

package.json

@@ -1,7 +1,7 @@
 {
   "name": "replaywebpage",
   "productName": "ReplayWeb.page",
-  "version": "1.5.11",
+  "version": "1.5.12",
   "description": "Serverless Web Archive Replay",
   "repository": "https://github.com/webrecorder/replayweb.page",
   "homepage": "https://replayweb.page/",

src/appmain.js

@@ -379,6 +379,13 @@ class ReplayWebApp extends LitElement
       this.loadInfo.customColl = this.pageParams.get("customColl");
     }
 
+    if (this.pageParams.get("noWebWorker") === "1") {
+      if (!this.loadInfo) {
+        this.loadInfo = {};
+      }
+      this.loadInfo.noWebWorker = true;
+    }
+
     if (IS_APP && this.sourceUrl.startsWith("file://")) {
       // eslint-disable-next-line no-undef
       const url = new URL(__APP_FILE_SERVE_PREFIX__);

src/embed.js

@@ -29,6 +29,7 @@ class Embed extends LitElement
     this.embed = null;
     this.reloadCount = 0;
     this.noSandbox = false;
+    this.noWebWorker = false;
   }
 
   static get properties() {
@@ -56,6 +57,7 @@ class Embed extends LitElement
 
       deepLink: { type: Boolean },
       noSandbox: { type: Boolean },
+      noWebWorker: { type: Boolean },
 
       errorMessage: { type: String }
     };
@@ -126,13 +128,19 @@ class Embed extends LitElement
 
       const source = new URL(this.source, document.baseURI);
 
-      this.paramString = new URLSearchParams({
+      const params = {
         source,
         customColl: this.coll,
         config: this.config,
         basePageUrl: window.location.href.split("#")[0],
         embed: this.embed,
-      }).toString();
+      };
+
+      if (this.noWebWorker) {
+        params.noWebWorker = "1";
+      }
+
+      this.paramString = new URLSearchParams(params).toString();
 
       this.hashString = new URLSearchParams({
         url: this.url,

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) {
+    this.noWebWorker = this.loadInfo && this.loadInfo.noWebWorker;
-    //   return;
+
-    // }
+    if (!this.noWebWorker) {
-    // eslint-disable-next-line no-undef
+      // eslint-disable-next-line no-undef
-    this.worker = new Worker(__SW_NAME__);
+      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)
-    // ping service worker with messages to avoid shutdown while loading
+        this.pingInterval = setInterval(() => {
-    // (mostly for Firefox)
+          navigator.serviceWorker.controller.postMessage({"msg_type": "ping"});
-    // this.pingInterval = setInterval(() => {
+        }, 15000);
-    //   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) {
-    if (this.worker) {
+      return;
-      this.worker.postMessage({"msg_type": "cancelLoad", "name": this.coll});
+    }
-      // if (this.pingInterval) {
+
-      //   clearInterval(this.pingInterval);
+    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);
+      }
     }
   }
 

src/pageutils.js

@@ -34,17 +34,6 @@ Please try a different browser.
   return p;
 }
 
-// ===========================================================================
-let dbworker = null;
-
-function initDBWorker() {
-  if (dbworker === null) {
-    // eslint-disable-next-line no-undef
-    dbworker = new Worker(__SW_NAME__);
-  }
-  return dbworker;
-}
-
 
 // ===========================================================================
 async function digestMessage(message, hashtype) {
@@ -148,4 +137,4 @@ function parseURLSchemeHostPath(url) {
 
 
 export { digestMessage, tsToDate, getTS, getPageDateTS, getReplayLink, sourceToId, parseURLSchemeHostPath,
-  registerSW, initDBWorker };
+  registerSW };