class Setup {
  async run() {
    this.statusEl = document.createElement("p")
    document.body.appendChild(this.statusEl)
    this.updateStatus()
    this.addEventListener('controllerchange', () => {
      this.updateStatus()
    })
    await this.register()
    this.updateStatus()
  }

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

  updateStatus() {
    if (this.registration?.installing) {
      this.serviceWorkerStatus = "installing"
    } else if (this.registration?.waiting) {
      this.serviceWorkerStatus = "waiting"
    } else if (this.registration?.active) {
      this.serviceWorkerStatus = "active"
    } else {
      this.serviceWorkerStatus = "not installed"
    }
    this.statusEl.innerText = this.serviceWorkerStatus
  }
}

new Setup().run()