pages/app.js

import { Layout } from "./components/layout.js"
import { Page } from "./components/page.js"
import { Header } from "./components/header.js"
import { NavMenu } from "./components/nav-menu.js"
import { PageMenu } from "./components/page-menu.js"

customElements.define('m-layout', Layout)
customElements.define('m-page', Page)
customElements.define('m-header', Header)
customElements.define('m-nav-menu', NavMenu)
customElements.define('m-page-menu', PageMenu)

class Setup {
  async run() {
    navigator.serviceWorker
    .addEventListener('controllerchange', () => {
      if (this.registration.active) {
        window.location.reload(true)
      }
    })
    await this.register()
    this.load()
  }

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

  load() {
    if (this.registration.active) {
      document.body.appendChild(
        document.createElement('m-layout')
      )
    }
  }
}

new Setup().run()