pages/app.js

import { Project } from "./components/project.js"

customElements.define('m-project', Project)

function e(tag, attrs, content) {
  const el = document.createElement(tag)
  el.innerText = content
  return el
}

class Setup {
  constructor() {
    this.loaded = false
  }

  async run() {
    navigator.serviceWorker
    .addEventListener('controllerchange', () => {
      if (this.registration.active) {
        this.loadIfReady()
      }
    })
    await this.register()
    this.loadIfReady()
  }

  async register() {
    try {
      this.registration =
        await navigator.serviceWorker.register(
          '/sw.js',
          {scope: '/'}
        )
    } catch (err) {
      console.error(
        'error registering service worker', err
      )
    }
  }

  loadIfReady() {
    if (
      !this.loaded && this.registration.active
    ) {
      document.body.appendChild(
        e('h1', {}, location.hash)
      )
    }
  }
}

new Setup().run()