2016-05-14 8 views
0

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

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.

Antwort

2

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); 
     }); 
    } 
+0

Wie ich in der OP gesagt habe, weiß ich bereits, wie man Service-Arbeiter installiert, und ich habe bereits einen Service-Arbeiter installieren, ich brauchte nicht Code lol. Was ich brauche, ist eine Möglichkeit, eine Update-Benachrichtigung in der Benutzeroberfläche anzuzeigen (IE: Nicht-Konsolenprotokoll, die aktuelle Webseite), genau wie Sie es aktivieren können, wie ich im OP angegeben habe. – NGriffin

+0

Die Unterscheidung zwischen einem Update und der ersten Installation ist genau das, was ich mit der Überprüfung für 'navigator.serviceWorker.controller 'benötigte. Vielen Dank! – salbahra

0

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.

+0

Aus irgendeinem Grund scrollt die Seite, die Sie oben verlinkt haben, nicht auf meinem Telefon oder dem iPad. – marvindanig

+1

Ich habe ein Problem im ServiceWorker Cookbook Repo (https://github.com/mozilla/serviceworker-cookbook/issues/254) eingereicht. Wenn Sie können, fügen Sie bitte weitere Details zum Problem hinzu. – Marco