Anzeigen von Nachrichten für Service-Mitarbeiterstatus

Question

Ich habe in der letzten Woche an Service Worker gearbeitet und derzeit eine großartige Installation zum Offline-Speichern von Dateien und Push-Benachrichtigungen.

gibt es noch eine letzte Sache, möchte ich in der Lage sein, um Nachrichten in der Benutzeroberfläche für bestimmte Zustände der Servicemitarbeiter zu zeigen, zur Zeit habe ich den folgenden Code für den aktivierten Zustand:

if ('serviceWorker' in navigator) { 
navigator.serviceWorker.addEventListener('controllerchange',function(event) { 
    navigator.serviceWorker.controller.addEventListener('statechange', function() { 
if (this.state === 'activated') { 
    document.getElementById('offlineNotification').classList.remove('hidden'); 
} 
}); 
}); 
} 

Und jetzt will ich Erstellen Sie eine Nachricht für den Installationsstatus, so dass ich eine Nachricht ähnlich wie "Offline-Dienst wird aktualisiert" anzeigen kann, wenn jemand, der daran arbeitet und weiß, wie es geht, lassen Sie es mich wissen.

Ich habe bereits versucht, den gleichen Code aber mit "if (this.state === 'Installation')"

und

"if (this.state === 'install'"

Weder scheinen zu arbeiten.

Answer 1

ein Servicemitarbeiter einen Lebenszyklus hat, die sich von Ihrer Webseite vollständig getrennt ist. um einen Servicemitarbeiter für Ihre Website zu installieren, müssen Sie es registrieren.

self.addEventListener('install', function(event) { 
    // Perform install steps 
}); 

Wenn wir installiert werden, folgt der Aktivierungsschritt, und dies ist eine großartige Gelegenheit für die Verwaltung von alten Caches.

self.addEventListener('activate', function(event) { 
    // Perform activate steps, Typically cache management. 
}); 

Nach dem Aktivierungsschritt wird die Servicemitarbeiter alle Seiten steuern, die in ihrem Geltungsbereich fallen, wenn die Seite, die die Servicemitarbeiter zum ersten Mal registriert wird nicht kontrolliert werden, bis sie wieder geladen werden.

Sobald ein Service-Mitarbeiter die Kontrolle übernommen hat, befindet er sich in einem von zwei Zuständen: either the service worker will be terminated, um Speicher zu speichern, oder it will handle fetch and message events, wenn eine Netzwerkanforderung oder Nachricht von Ihrer Seite erfolgt. Sie können auch so etwas wie versuchen,

if ('serviceWorker' in navigator) { 
     navigator.serviceWorker.register('/sw.js').then(function(reg) { 
     // updatefound is fired if service-worker.js changes. 
     reg.onupdatefound = function() { 
      var installingWorker = reg.installing; 

      installingWorker.onstatechange = function() { 
      switch (installingWorker.state) { 
       case 'installed': 
       if (navigator.serviceWorker.controller) { 
        // At this point, the old content will have been purged and the fresh content will have been added to the cache. 
        // It's the perfect time to display a "New content is available; please refresh." 
        console.log('New or updated content is available.'); 
       } else { 
        // At this point, everything has been precached. 
        // It's the perfect time to display a "Content is cached for offline use." message. 
        console.log('Content is now available offline!'); 
       } 
       break; 

       case 'redundant': 
       console.error('The installing service worker became redundant.'); 
       break; 
      } 
      }; 
     }; 
     }).catch(function(e) { 
     console.error('Error during service worker registration:', e); 
     }); 
    } 

Answer 2

Werfen Sie einen Blick auf den live flowchart demo auf dem Serviceworker-Kochbuch und an den durch Telegramm verwendet code snippet die Benutzer zu benachrichtigen, wenn ein Update gibt.