Use published sw.js from wabac.js instead of rebuilding a custom version. (#223)

* sw: instead of rebuilding sw.js with slightly different settings (baked in index.html + ruffle.js cache),
can now just use the published sw.js release with custom queryArgs, injectScripts=ruffle/ruffle.js
index.html is cached automatically on-load
webpack: for dev server, still build 'sw.js' locally to allow dynamic updates when developing on a linked wabac.js
remove src/sw.js, as no longer used, just importing from wabac.js directly
bump to 1.8.9

_data/package.json

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

package.json

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

src/appmain.js

@@ -419,7 +419,17 @@ class ReplayWebApp extends LitElement {
     this.initRoute();
 
     // service worker name
-    const name = this.swName + (this.useRuffle ? "?ruffle=1" : "");
+    let name = this.swName;
+
+    const qp = new URLSearchParams();
+    let query = "";
+    if (this.useRuffle) {
+      qp.set("injectScripts", "ruffle/ruffle.js");
+    }
+    query = qp.toString();
+    if (query.length) {
+      name += "?" + query;
+    }
 
     this.swmanager = new SWManager({ name, appName: this.appName });
     this.swmanager

src/sw.js

@@ -1,29 +0,0 @@
-import INDEX_HTML from "../index.html";
-
-import { SWReplay } from "@webrecorder/wabac/src/swmain";
-
-import { WorkerLoader } from "@webrecorder/wabac/src/loaders";
-
-if (self.registration) {
-  const staticData = new Map();
-
-  const prefix = self.registration.scope;
-
-  staticData.set(prefix, { type: "text/html", content: INDEX_HTML });
-  staticData.set(prefix + "index.html", {
-    type: "text/html",
-    content: INDEX_HTML,
-  });
-
-  const sp = new URLSearchParams(self.location.search);
-
-  const defaultConfig = {};
-
-  if (sp.get("ruffle") == "1") {
-    defaultConfig.injectScripts = ["ruffle/ruffle.js"];
-  }
-
-  self.sw = new SWReplay({ staticData, defaultConfig });
-} else {
-  new WorkerLoader(self);
-}

webpack.config.js

@@ -77,15 +77,30 @@ const electronPreloadConfig = (/*env, argv*/) => {
  
 
 const browserConfig = (/*env, argv*/) => {
+  const isDevServer = process.env.WEBPACK_SERVE;
+
+  const entry = {
+    "ui": "./src/ui.js"
+  };
+
+  const patterns = [
+    { from: "package.json", to: "_data/package.json" }
+  ];
+
+  if (isDevServer) {
+    entry["sw"] = "@webrecorder/wabac/src/sw.js";
+  } else {
+    patterns.push(
+      { from: "node_modules/@webrecorder/wabac/dist/sw.js", to: "sw.js"}
+    );
+  }
+
+
   return {
     target: "web",
     mode: "production",
     resolve: {fallback: { "crypto": false }},
-    entry: {
+    entry,
-      "ui": "./src/ui.js",
-      "sw": "./src/sw.js"
-    },
-
     optimization,
 
     output: {
@@ -130,11 +145,7 @@ const browserConfig = (/*env, argv*/) => {
         __VERSION__: JSON.stringify(package_json.version),
       }),
       new webpack.BannerPlugin(BANNER_TEXT),
-      new CopyPlugin({
+      new CopyPlugin({ patterns })
-        patterns: [
-          { from: "package.json", to: "_data/package.json" }
-        ]
-      }),
     ],
 
     module: {