pages/app.js

class Setup {
    async run() {
        await this.register()
        const p = document.createElement("p")
        p.innerText = this.serviceWorkerStatus
        document.body.appendChild(p)
    }

    async register() {
        this.serviceWorkerStatus = "unavailable"
        if ("serviceWorker" in navigator) {
            try {
                this.registration = 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")
        }
    }
}

new Setup().run()