Custom SW filename (#175)

* embed: support using custom filename for service worker instead of sw.js
can be set via <replay-web-page swName='custom.js' ... > property
docs: update embedding docs to mention new option
fixes #160

docs/embedding.md

@@ -120,7 +120,8 @@ The `<replay-web-page>` tag is a web component that supports a number of additio
 | `ts`         | The timestamp of the starting URL to load. If omitted, the latest available version is used. |
 | `deepLink`   | if set, allow 'deep linking' to exact pages in the embed, besides the starting URL. |
 | `embed`      | (`default` / `full` / `replayonly` / `replay-with-info` ) - See [Embed Modes](#embed-modes) above.
-| `replayBase` | Location of the `sw.js` file, defaults to `./replay/` as mentioned above, but can be overridden. |
+| `swName`     | Service Worker filename (default: `sw.js`). Set if using different name, don't include path, only filename |
+| `replayBase` | Location of the service worker file (eg. sw.js), 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!) |
 | `sandbox`    | if set, will iframe in `sandbox`. Provides extra isolation, but prevents PDFs from loading in an embed, and may result in links opening in new windows. |

embed.html

@@ -9,7 +9,7 @@ body {
 </head>
 <body>
 
-<replay-web-page replaybase="./" embed="replay-with-info" src="./docs/assets/tweet-example.wacz" url="page:0"></replay-web-page>
+<replay-web-page swname="custom.js" replaybase="./" embed="replay-with-info" src="./docs/assets/tweet-example.wacz" url="page:0"></replay-web-page>
 
 </body>
 </html>

src/appmain.js

@@ -28,8 +28,8 @@ class ReplayWebApp extends LitElement
 
     this.loadInfo = null;
 
-    this.swmanager = new SWManager({name: swName, appName: this.appName});
+    this.swName = swName;
-    this.swmanager.register().catch(() => this.swErrorMsg = this.swmanager.renderErrorReport(this.mainLogo));
+    this.swmanager = null;
 
     this.safariKeyframes();
 
@@ -282,6 +282,7 @@ class ReplayWebApp extends LitElement
     sourceUrl="${this.sourceUrl}"
     embed="${this.embed}"
     appName="${this.appName}"
+    swName="${this.swName}"
     .appLogo="${this.mainLogo}"
     @replay-favicons=${this.onFavIcons}
     @update-title=${this.onTitle}
@@ -321,6 +322,10 @@ class ReplayWebApp extends LitElement
 
   firstUpdated() {
     this.initRoute();
+
+    this.swmanager = new SWManager({name: this.swName, appName: this.appName});
+    this.swmanager.register().catch(() => this.swErrorMsg = this.swmanager.renderErrorReport(this.mainLogo));
+
     window.addEventListener("popstate", () => {
       this.initRoute();
     });
@@ -458,6 +463,10 @@ class ReplayWebApp extends LitElement
       this.loadInfo.loadEager = true;
     }
 
+    if (this.pageParams.get("swName")) {
+      this.swName = this.pageParams.get("swName");
+    }
+
     if (IS_APP && this.sourceUrl.startsWith("file://")) {
       this.loadInfo = {
         sourceUrl: this.sourceUrl,

src/coll.js

@@ -123,7 +123,9 @@ class Coll extends LitElement
       appVersion: { type: String },
       appLogo: { type: String },
 
-      autoUpdateInterval: { type: Number }
+      autoUpdateInterval: { type: Number },
+
+      swName: { type: String }
     };
   }
 
@@ -672,7 +674,7 @@ class Coll extends LitElement
 
     if (this.collInfo && !this.collInfo.coll) {
       return html`
-      <wr-loader .loadInfo="${this.loadInfo}" embed="${this.embed}"
+      <wr-loader .loadInfo="${this.loadInfo}" embed="${this.embed}" swName="${this.swName}"
       .coll="${this.coll}" .sourceUrl="${this.sourceUrl}" @coll-loaded=${this.onCollLoaded}></wr-loader>`;
     } else if (this.collInfo) {
       return html`

src/embed.js

@@ -247,6 +247,11 @@ class Embed extends LitElement
         params.loading = "eager";
       }
 
+      // eslint-disable-next-line no-undef
+      if (this.swName !== __SW_NAME__) {
+        params.swName = this.swName;
+      }
+
       this.paramString = new URLSearchParams(params).toString();
 
       this.hashString = new URLSearchParams({

src/loader.js

@@ -48,7 +48,8 @@ class Loader extends LitElement
       embed: { type: String },
       tryFileHandle: { type: Boolean },
       errorAllowRetry: { type: Boolean },
-      extraMsg: { type: String }
+      extraMsg: { type: String },
+      swName: { type: String },
     };
   }
 
@@ -62,7 +63,7 @@ class Loader extends LitElement
 
     if (!this.noWebWorker) {
       // eslint-disable-next-line no-undef
-      this.worker = new Worker(__SW_NAME__);
+      this.worker = new Worker(this.swName);
     } else {
       if (!navigator.serviceWorker) {
         return;