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

src/appmain.js

@@ -28,8 +28,8 @@ class ReplayWebApp extends LitElement
 
     this.loadInfo = null;
 
-    this.swmanager = new SWManager({name: swName, appName: this.appName});
-    this.swmanager.register().catch(() => this.swErrorMsg = this.swmanager.renderErrorReport(this.mainLogo));
+    this.swName = swName;
+    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;