Actualizar 'app.js'

app.js

@@ -1,37 +1,47 @@
+function e(tag, attrs, content) {
+  const el = document.createElement(tag)
+  el.innerText = content
+  return el
+}
+
 class Setup {
+  constructor() {
+    this.loaded = false
+  }
+
   async run() {
-    this.statusEl = document.createElement("p")
-    document.body.appendChild(this.statusEl)
-    this.updateStatus()
-    navigator.serviceWorker.addEventListener('controllerchange', () => {
-      this.updateStatus()
+    navigator.serviceWorker
+    .addEventListener('controllerchange', () => {
+      if (this.registration.active) {
+        this.loadIfReady()
+      }
     })
     await this.register()
-    this.updateStatus()
+    this.loadIfReady()
   }
 
   async register() {
     try {
-      this.registration = await navigator.serviceWorker.register(
-        "/sw.js",
-        {scope: "/"}
-      )
+      this.registration =
+        await navigator.serviceWorker.register(
+          '/sw.js',
+          {scope: '/'}
+        )
     } catch (err) {
-      console.error("error registering service worker", 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 = "initializing"
+  loadIfReady() {
+    if (
+      !this.loaded && this.registration.active
+    ) {
+      document.body.appendChild(
+        e('p', {}, 'loaded')
+      )
     }
-    this.statusEl.innerText = this.serviceWorkerStatus
   }
 }