Der Vorteil der JavaScript -Serviceworker -API besteht darin, dass Webentwickler Caches problemlos steuern können. Obwohl die Verwendung von Technologien wie ETAGs auch eine Technologie zur Kontrolle von Caches ist, ermöglicht es mit JavaScript die Verwendung von Programmen, um Caches leistungsfähiger und freier zu steuern. Natürlich hat Strong seine Vor- und Nachteile - Sie müssen nach der Pflege eine Behandlung durchführen. Die sogenannte Behandlung nach der Pflege besteht darin, den Cache zu beseitigen.
Schauen wir uns an, wie Sie ein Cache -Objekt erstellen, Anforderungs -Cache -Daten im Cache hinzufügen, Anforderungs -Cache -Daten aus dem Cache löschen und schließlich den Cache vollständig löschen können.
Bestimmen Sie die Unterstützung des Browsers für die Cache -Objekt -Cache -API
Überprüfen Sie, ob der Browser die Cache -API unterstützt ...
if ('Caches' im Fenster) {// hat Unterstützung!}… Überprüfen Sie, ob sich im Fenster ein Caches -Objekt befindet.
Erstellen Sie ein Cache -Objekt
Der Weg zum Erstellen eines Cache -Objekts besteht darin, Caches zu verwenden. Open () und den Cache -Namen übergeben:
Caches.open ('Test-Cache'). Dann (Funktion (Cache) {// Der Cache wird erstellt und Sie können jetzt darauf zugreifen});Diese Methode von Caches.open gibt ein Versprechen zurück, und das Cache -Objekt darin ist neu erstellt. Wenn es zuvor erstellt wurde, wird es nicht neu erstellt.
Fügen Sie zwischengespeicherte Daten hinzu
Für diese Art von Cache können Sie sich dies als ein Array von Anforderungsobjekten vorstellen, und die von der Anforderungsanforderung erhaltenen Antwortdaten werden im Cache -Objekt nach Schlüsselwert gespeichert. Es gibt zwei Möglichkeiten, Daten zum Cache hinzuzufügen: Hinzufügen und Addall. Verwenden Sie diese beiden Methoden, um die Adresse der zugespeicherten Anfrage hinzuzufügen. Für eine Einführung in das Anforderungsobjekt können Sie sich auf den API -API -Artikel beziehen.
Verwenden Sie die AddAll -Methode, um Cache -Anforderungen in Stapeln hinzuzufügen:
caches.open ('test-cache'). Dann (function (cache) {cache.addall (['/', '/images/logo.png'] .then (function () {// zwischengespeichert!});});Diese Addall -Methode kann ein Adressarray als Parameter akzeptieren, und die Antwortdaten dieser Anforderungsadressen werden im Cache -Objekt zwischengespeichert. Addall gibt ein Versprechen zurück. Um eine einzige Adresse hinzuzufügen, verwenden Sie die Methode hinzufügen:
caches.open ('test-cache'). Dann (Funktion (cache) {cache.add ('/page/1'); // Die Adresse "/page/1" wird angefordert und die Antwortdaten werden zwischengespeichert.});Die Methode add () kann auch eine benutzerdefinierte Anforderung akzeptieren:
caches.open ('test-cache'). Dann (Funktion (cache) {cache.add (neue request ('/page/1', {/* request parameter*/});});Es ist der add () -Methode sehr ähnlich. Die Methode Put () kann auch die Anforderungsadresse hinzufügen und gleichzeitig ihre Antwortdaten hinzufügen:
fetch ('/page/1'). Dann (Funktion (Antwort) {return caches.open ('test-cache'). Dann (Funktion (function (cache) {return cache.put ('/page/1', Antwort);});});Zugriff auf zwischengespeicherte Daten
Um die geänderten Anforderungsdaten anzuzeigen, können wir die Keys () -Methode im Cache -Objekt verwenden, um alle zwischengespeicherten Anforderungsobjekte in einem Array -Formular zu erhalten:
caches.open('test-cache').then(function(cache) { cache.keys().then(function(cachedRequests) { console.log(cachedRequests); // [Request, Request] });});/*Request { bodyUsed: false credentials: "omit" headers: Headers integrity: "" method: "GET" mode: "no-cors" redirect: "Follow" Referrer: "" URL: "http://www.webhek.com/images/logo.png"}*/Wenn Sie den Antwortinhalt der zwischengespeicherten Anforderungsanforderung anzeigen möchten, können Sie die Methode cache.match () oder cache.matchAll () verwenden:
caches.open ('test-cache'). Dann (Funktion (cache) {cache.match ('/page/1'). Dann (Funktion (MatchedResponse) {console.log (MatchedResponse);});});/*Antwort {Body: (...), Bodyused: False: False, Headers: Headers: OK: OK: OK: OK: OK: OK, OK: OK, OK: OK: OK, OK, OK, OK, OK, OK, OK, OK: "https://www.webhek.com/page/1"}*/Weitere Informationen zur Verwendung und Details von Antwortobjekten finden Sie im API -API -Artikel.
Daten im Cache löschen
Daten aus dem Cache löschen. Wir können die Methode delete () im Cache -Objekt verwenden:
caches.open ('test-cache'). Dann (Funktion (cache) {cache.delete ('/page/1');});Auf diese Weise befinden sich im Cache keine Anforderungsdaten mehr /Seite /1 Anforderungsdaten.
Holen Sie sich den Cache -Namen im vorhandenen Cache
Um den Namen der Cache -Daten zu erhalten, die bereits im Cache vorhanden sind, müssen wir die Methode der Caches () () verwenden:
caches.keys (). Dann (Funktion (cachekeys) {console.log (cachekeys); // ex: ["test-cache"]});window.caches.keys () gibt ein Versprechen zurück.
Löschen Sie ein Cache -Objekt
Um ein zwischengespeichertes Objekt zu löschen, benötigen Sie nur den ausgespeicherten Schlüsselnamen:
caches.delete ('test-cache'). Dann (function () {console.log ('Cache erfolgreich gelöscht!');});So löschen Sie alte zwischengespeicherte Daten in großen Mengen:
// Angenommen, `cache_name` ist der Name des neuen Cache // Jetzt löschen }}));});
Möchten Sie Experte für Dienstarbeiter werden? Der obige Code ist es wert, Ihre Bibliothek einzugeben. Firefox und Google Chrome Support Service Worker, und ich glaube, dass mehr Websites und Apps diese Caching -Technologie nutzen werden, um ihre Laufgeschwindigkeit bald zu verbessern.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.