replayweb.page/src/swmanager.js

import { html } from "lit";
import { register } from "register-service-worker";


// ===========================================================================
export class SWManager
{
  constructor({name = "sw.js", scope = "./", appName = "ReplayWeb.page", requireSubdomainIframe = false} = {}) {
    this.name = name;
    this.scope = scope;
    this.appName = appName;
    this.requireSubdomainIframe = requireSubdomainIframe;

    this.errorMsg = null;
  }

  setAppName(newAppName) {
    this.appName = newAppName;
  }

  register() {
    let resolve, reject;
    
    const p = new Promise((res, rej) => {
      resolve = res;
      reject = rej;
    });

    this.errorMsg = this.getSWErrorMsg();

    if (this.errorMsg) {
      console.error(this.errorMsg);
      reject(this.errorMsg);
    }

    const handleError = (error) => {
      console.error("Error during service worker registration:", error);
      this.errorMsg = this.getCrossOriginIframeMsg();
      if (!this.errorMsg) {
        this.errorMsg = `${this.appName} could not be loaded due to the following error:\n${error.toString()}`;
      }
    
      reject(this.errorMsg);
    };
    
    register(this.scope + this.name, {
      registrationOptions: { scope: this.scope },
      registered () {
        console.log("Service worker is registered");
        resolve();
      },

      error(errMsg) { handleError(errMsg); }
    });

    return p;
  }

  getCrossOriginIframeMsg() {
    if (this.isCrossOriginIframe()) {
      return `\
      Sorry, Service Workers can not be used in cross-origin iframes.
      This web archive embed is loaded from ${window.location.origin} but the top page is on a different origin.
      The embed must be loaded from the same origin or a subdomain.`;
    }

    return null;
  }

  isCrossOriginIframe() {
    if (window.parent === window) {
      return false;
    }

    try {
      return window.top.location.href === "";
    } catch (e) {
      return true;
    }
  }

  getSWErrorMsg() {
    if (navigator.serviceWorker) {

      // must be loaded from a cross-origin (eg. subdomain)
      if (this.requireSubdomainIframe && !this.isCrossOriginIframe()) {
        return `Sorry, due to security settings, this ${this.appName} embed only be viewed within a subdomain iframe.`;
      }

      return null;
    }

    // loaded from a cross-origin iframe that's *not* a subdomain
    const msg = this.getCrossOriginIframeMsg();
    if (msg) {
      return msg;
    }

    if (!window.isSecureContext) {
      return `
      Sorry, the ${this.appName} system must be loaded from an HTTPS URL (or localhost), but was loaded from: ${window.location.host}.
      Please try loading this page from an HTTPS URL`;
    }

    // Detect firefox private mode
    if ("MozAppearance" in document.documentElement.style) {
      return "Sorry, Service Workers are disabled in Firefox in Private Mode. Please try loading this page in regular mode instead.";
    }

    return `Sorry, ${this.appName} won't work in this browser as Service Workers are not supported in this window.
  Please try a different browser.`;

  }

  renderErrorReport(logo, override) {
    const msg = this.errorMsg || override;

    if (!msg) {
      return "";
    }

    return html`
    <section class="is-fullwidth">
    <div class="has-text-centered">
      <fa-icon style="margin: 1em;flex-grow: 1;" id="wrlogo" size="2.5rem" .svg=${logo} aria-hidden="true"></fa-icon>
    </div>
    <div style="white-space: pre-wrap; text-align: center" >${msg}</div>
  </section>
    `;
  }
}