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()