service-worker check:

- on-load, display error if service worker support is not available
- for embeds, display service worker unavailable error right away, don't attempt to load iframe
trailing slash check: redirect http://example.com -> http://example.com/
resources/page query: if no query= param is set, use url as query (when switching from replay, url is used as query)

src/coll.js

@@ -309,14 +309,14 @@ class Coll extends LitElement
     .active="${isPages}"
     .editable="${this.editable}"
     currList="${this.tabData.currList || 0}"
-    query="${this.tabData.query || ""}"
+    query="${this.tabData.query || this.tabData.url || ""}"
     @coll-tab-nav="${this.onCollTabNav}" id="pages"
     class="${isPages ? '' : 'is-hidden'}">
     </wr-page-view>
 
     <wr-coll-resources .collInfo="${this.collInfo}"
     .active="${isResources}"
-    query="${this.tabData.query || ""}"
+    query="${this.tabData.query || this.tabData.url || ""}"
     urlSearchType="${this.tabData.urlSearchType || ""}"
     .currMime="${this.tabData.currMime || ""}"
     @coll-tab-nav="${this.onCollTabNav}" id="resources"

src/embed.js

@@ -2,6 +2,8 @@ import { LitElement, html, css } from 'lit-element';
 
 import { registerSW } from './pageutils';
 
+import { wrapCss, rwpLogo } from './misc';
+
 
 var scriptSrc = document.currentScript && document.currentScript.src;
 
@@ -22,8 +24,6 @@ class Embed extends LitElement
     this.deepLink = false;
     this.swInited = false;
     this.embed = null;
-
-    this.doRegister();
   }
 
   static get properties() {
@@ -47,17 +47,25 @@ class Embed extends LitElement
       paramString: { type: String },
       hashString: { type: String },
 
-      deepLink: { type: Boolean }
+      deepLink: { type: Boolean },
+      noSW: { type: Boolean },
     }
   }
 
   async doRegister() {
-    await registerSW(this.swName, this.replayBase);
-
-    this.swInited = true;
+    try {
+      await registerSW(this.swName, this.replayBase);
+      console.log("done");
+      this.swInited = true;
+    } catch (e) {
+      console.log(e);
+      this.noSW = true;
+    }
   }
 
   firstUpdated() {
+    this.doRegister();
+
     window.addEventListener("message", (event) => {
       const iframe = this.renderRoot.querySelector("iframe");
 
@@ -125,7 +133,16 @@ class Embed extends LitElement
   }
 
   static get styles() {
-    return css`
+    return wrapCss(css`
+      .logo {
+        margin: 1em;
+        flex-grow: 1;
+      }
+      .error {
+        white-space: pre-wrap;
+        text-align: center;
+      }
+
       iframe {
         width: 100%;
         height: 100%;
@@ -137,7 +154,7 @@ class Embed extends LitElement
         width: 100%;
         height: 100%;
       }
-    `;
+    `);
   }
 
   render() {
@@ -145,7 +162,18 @@ class Embed extends LitElement
     ${this.paramString && this.hashString && this.swInited ? html`
       <iframe @load="${this.onLoad}" src="${this.replayBase}?${this.paramString}#${this.hashString}" allow="autoplay *; fullscreen"></iframe>
       ` : html``}
-    `;
+
+    ${this.noSW ? html`
+      <section class="">
+        <div class="has-text-centered">
+          <fa-icon class="logo" id="wrlogo" size="2.5rem" .svg=${rwpLogo}></fa-icon>
+        </div>
+        <div class="error">
+Sorry, ReplayWeb.page won't work in this browser as Service Workers are not supported.
+Please try a different browser. (If Using Private Mode in Firefox, try regular mode).
+        </div>
+      </section>
+    `: ``}`;
   }
 
   onLoad(event) {

src/loader.js

@@ -83,6 +83,12 @@ class Loader extends LitElement
 
     this.percent = this.currentSize = this.totalSize = 0;
 
+    if (!navigator.serviceWorker) {
+      this.state = "errored";
+      this.error = "Sorry, this browser is not supported. Please try a different browser\n(If you're using Firefox, try without Private Mode)";
+      return;
+    }
+
     // custom protocol handlers here...
     try {
       const {scheme, host, path} = parseURLSchemeHostPath(sourceUrl);
@@ -189,9 +195,9 @@ You can select a file to upload from the main page by clicking the \'Choose File
   render() {
     return html`
     <section class="container">
-    <div class="has-text-centered is-flex">
-    <wr-anim-logo class="logo" size="96px"/>
-  </div>
+      <div class="has-text-centered is-flex">
+        <wr-anim-logo class="logo" size="96px"/>
+      </div>
       <div class="level">
         <p class="level-item">Loading&nbsp;<b>${this.sourceUrl}</b>...</p>
       </div>

src/pageutils.js

@@ -9,6 +9,11 @@ async function registerSW(name = "sw.js", scope = "./") {
     resolve = res;
     reject = rej;
   });
+
+  if (!navigator.serviceWorker) {
+    console.error("Service Workers not supported");
+    reject();
+  }
   
   register(scope + name, {
     registrationOptions: { scope },

yarn.lock

@@ -293,7 +293,7 @@
 
 "@webrecorder/wabac@github:webrecorder/wabac.js":
   version "2.0.3-dev.0"
-  resolved "https://codeload.github.com/webrecorder/wabac.js/tar.gz/d8dc15d6a385147ef0722a552951bf0edc51402d"
+  resolved "https://codeload.github.com/webrecorder/wabac.js/tar.gz/9701bf7fdeb59b3e1adb6f9fe2d1607d1b6732b3"
   dependencies:
     brotli "github:foliojs/brotli.js"
     fast-xml-parser "^3.15.1"