Guten Tag, Freunde!Viele von Ihnen haben wahrscheinlich von einer solchen Innovation im JavaScript-Ökosystem wie Service Workers gehört, die ein Schlüsselelement der modernen Webentwicklung sind. Servicemitarbeiter werden immer beliebter, vor allem aufgrund der Beliebtheit von Progressive Web Applications (PWA).Als ich zum ersten Mal davon hörte, fragte ich mich: „Wann sollten wir Servicemitarbeiter einsetzen? In welchen Szenarien oder in welchem Kontext können wir sie verwenden? “In diesem Artikel werden einige praktische Beispiele für die Verwendung von Servicemitarbeitern betrachtet, die Ihre Benutzer später, wie ich zu hoffen wage, glücklich machen werden.Ich glaube, bevor praktische Beispiele analysiert werden, müssen zumindest die theoretischen Grundlagen der Arbeit der Servicemitarbeiter skizziert werden. Für Anfänger wird dies eine gute Hilfe bei zukünftigen Bemühungen sein.Was ist ein Servicemitarbeiter?
Cersis Worker ist ein Skript, das von einem Browser im Hintergrund ausgeführt wird. Denken Sie daran, dass ein Servicemitarbeiter völlig unabhängig von der Seite ist, mit der er interagiert oder die er bedient (um zu dienen).Im Wesentlichen ist ein Service Worker ein Proxyserver zwischen einer Webanwendung, einem Browser und einem Netzwerk.Servicemitarbeiter ermöglichen es Webanwendungen, wie native Anwendungen zu funktionieren.Einige Fakten über Servicemitarbeiter
- Servicemitarbeiter haben keinen direkten Zugriff auf das DOM. Zu diesem Zweck verwenden sie den Mechanismus zum Beantworten von Anfragen über die postMessages-Schnittstelle.
- Servicemitarbeiter werden bei Nichtgebrauch gewaltsam storniert (gestoppt). Dies bedeutet, dass sie ereignisgesteuert sind.
- Servicemitarbeiter übernehmen die Verwendung von Versprechungen (Versprechungen).
- Aufgrund der großen Funktionen können Servicemitarbeiter nur über HTTPS eingesetzt werden. Auf einem lokalen Server können Sie auf HTTPS verzichten.
Wie arbeiten Servicemitarbeiter? Schneller Blick
Mit Servicemitarbeitern können Sie Serveranforderungen abfangen und diese Anforderungen zwischenspeichern, um die Anwendungsleistung zu verbessern. Somit werden Produktivitätsgewinne durch Zwischenspeichern aller Inhalte erzielt.Es ist jedoch besser, es einmal zu sehen. Hier ist ein Bild, das die Arbeit eines Servicemitarbeiters zeigt:Lebenszyklus von Servicemitarbeitern
Wie bereits erwähnt, arbeiten Servicemitarbeiter unabhängig von der Kontrollseite. Wenn Sie einen Servicemitarbeiter in Ihrer Anwendung installieren möchten, müssen Sie ihn zunächst registrieren.Danach tritt der Browser, der die Installation des Service Workers gestartet hat, in den Hintergrund:
Häufige Anwendungsfälle
Jetzt, da wir wissen, wie Servicemitarbeiter arbeiten, ist es Zeit, darüber zu sprechen, wo sie eingesetzt werden.Caching
Wie oben erwähnt, können Servicemitarbeiter zum Zwischenspeichern verwendet werden. Hier sind einige Beispiele:- Nur Caching - Sie haben statischen Inhalt, der sich nie ändert.
- Netzwerk oder Cache - Sie möchten den Benutzern relevante Inhalte mit einer schnellen Downloadbedingung anzeigen.
- Cache und Update - Sie möchten Inhalte sofort anzeigen und haben nichts gegen regelmäßige Synchronisierung mit dem Server.
- Zwischenspeichern, aktualisieren und neu laden - Sie möchten den Inhalt so schnell wie möglich anzeigen, seine einzelnen Teile implizit aktualisieren und auf "nahtlose" Weise anzeigen.
Web Push
Mit Web Push können Anwendungen Push-Benachrichtigungen senden und Inhalte anzeigen, die als Antwort auf diese Benachrichtigungen empfangen wurden.- Inhalte pushen und aktualisieren - Sie möchten verfügbare Inhalte freigeben (bereitstellen und empfangen).
- Push und Inhalt - Sie möchten nicht nur mit Text arbeiten, sondern auch mit anderen Arten von Informationen, die Ihre Nachrichten bereichern.
- Gesättigter Push - Sie möchten Bilder, den Startvorgang und andere Dinge anzeigen, die die zu übermittelnde Nachricht verbessern.
- Push und Client - Sie möchten Benachrichtigungen je nach Status der Anwendung anzeigen.
Komplexere Anwendungsfälle
Analytics-API
Ich habe eine Bewerbung. Und ich möchte die Möglichkeit hinzufügen, die Verwendung der Anwendung zu überwachen. Dazu verwende ich eine synchrone API, um die gesammelten Daten von Zeit zu Zeit zu aktualisieren.Lastenausgleicher
Angenommen, Sie möchten den besten Inhaltsanbieter basierend auf der Serverleistung auswählen können. In diesem Fall benötigen Sie einen Servicemitarbeiter, der Anforderungen abfängt und eine Auswahl trifft.Ich empfehle Ihnen dringend, ServiceWorke.rs zu besuchen, um einen tieferen Einblick in die Servicemitarbeiter zu erhalten.Wir üben Fähigkeiten
Wie ich immer sage: "Wenn du schwimmen lernen willst, geh ins Wasser." Eine Theorie zu lernen ist eine wunderbare Sache, aber bis Sie sich die Hände schmutzig machen, werden Sie nichts lernen.Registrierung der Servicemitarbeiter
Wenn wir uns noch einmal der Darstellung des Lebenszyklus eines Servicemitarbeiters zuwenden, werden wir sehen, dass wir ihn zuerst installieren müssen. Dazu müssen wir es registrieren.
if('serviceWorker' in navigator){
console.log('- ')
window.addEventListener('load', () => {
navigator.serviceWorker
.register('/service-worker.js')
.then(registration => {
console.log(`- , scope: ${registration.scope}`)
})
})
.catch(error => {
console.log(` : ${error}`)
})
}
Sie können die Arbeit des Servicemitarbeiters überprüfen, indem Sie zu: Chrome: // inspect / # Servicemitarbeiter gehen.
Informationen zum Status des Servicemitarbeiters erhalten Sie auch in den Entwicklertools: Anwendung -> Servicemitarbeiter.
Was weiter?
Jetzt müssen wir alle Dateien zwischenspeichern. Wir können Dateien für das Caching auswählen. So sieht es aus:
const CACHE_NAME = 'example.com-v1'
const cacheAssets = ['index.html', 'about.html', 'js/main.js']
self.addEventListener('install', e => {
console.log('- ')
e.waitUntil(
caches
.open(CACHE_NAME)
.then(cache => {
console.log(' -: ')
cache.addAll(cacheAssets)
})
.then(() => {
self.skipWaiting()
})
)
})
Folgendes passiert hier:- Wir bestimmen den Namen des Caches (example.com-v1).
- Wir wählen Dateien für das Caching aus. Erstellen Sie dazu ein Array.
- Im Event-Handler "install" weisen wir den Browser an, auf die Erfüllung des Versprechens zu warten und dann den Cache zu öffnen, der unter dem Namen "example.com-v1" gespeichert wird.
- Fügen Sie abschließend die ausgewählten Dateien zum Cache hinzu.
Nicht verwendeten Cache löschen
Als nächstes müssen wir die alten Cache-Versionen entfernen:
self.addEventListener('activate', e => {
console.log('- ')
e.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cache => {
if(cache !== CACHE_NAME){
console.log(' ')
return caches.delete(cache)
}
})
)
})
)
})
Antwort erhalten
Keiner der oben genannten Punkte ist sinnvoll, wenn wir keine Möglichkeit haben, zwischengespeicherten Inhalt abzurufen.Es kann mit dem Fetch-Event-Handler abgerufen werden:
self.addEventListener('fetch', e => {
e.respondWith(
fetch(e.request)
.then(res => {
const copyCache = res.clone()
caches.open(CACHE_NAME).then(cache => {
cache.put(e.request, copyCache)
})
return res
})
.catch(error => caches.match(e.request).then(res => res))
)
})
Der gesamte Code kann hier eingesehen werden .Vielen Dank für Ihre Aufmerksamkeit.