pages/app.js

class Setup {
    async run() {
        await this.register()
        const p = document.createElement("p")
        p.innerText = this.serviceWorkerStatus
        document.body.appendChild(p)
        this.statusEl = p
        const btn = document.createElement('button')
        btn.addEventListener('click', () => this.unregister())
        btn.innerText = 'unregister'
        const p2 = document.createElement('p')
        document.body.appendChild(p2)
        p2.appendChild(btn)
    }

    async register() {
        this.serviceWorkerStatus = "unavailable"
        if ("serviceWorker" in navigator) {
            try {
                this.registration = await navigator.serviceWorker.register(
                    "/sw.js",
                    {scope: "/"}
                )
                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 = "unknown"
                }
            } catch (err) {
                console.error("error registering service worker", err)
                this.serviceWorkerStatus = "error"
            }
        } else {
            console.error("serviceWorker not available")
        }
    }

    async unregister() {
        if ('serviceWorker' in navigator) {
            try {
                const regs = await navigator.serviceWorker.getRegistrations()
                const res = await Promise.allSettled(
                    regs.map(reg => reg.unregister())
                )
                this.serviceWorkerStatus = (
                    res.every(pr => pr.status === 'fulfilled') ?
                    'unregistered' :
                    'error'
                )
            } catch (err) {
                console.error("error in unregister", err)
            }
        } else {
            this.serviceWorkerStatus = 'unavailable'
        }
        this.statusEl.innerText = this.serviceWorkerStatus
    }
}

new Setup().run()