Ich füge WordPress einen Service-Mitarbeiter hinzu, kann aber nicht verhindern, dass Wordpress-Dateien zum Cache hinzugefügt werden

Question

Ich erstelle einen Service-Mitarbeiter für meine WordPress-Installation. Ich definiere eine Liste von Dateien, die in meiner sw.js-Datei zwischengespeichert werden, aber beim Aktualisieren der Seite scheint WordPress in viele zusätzliche Dateien zu laden.

Dies ist normalerweise kein Problem, aber es bedeutet, dass einige der Admin-Dateien zwischengespeichert werden, was die Benutzer daran hindert, Inhalte zu bearbeiten.

Hier ist der Code. Die Datei sw.js befindet sich im Stammverzeichnis von Wordpress. Die Datei mit dem Namen "test.css" befindet sich ebenfalls zu Testzwecken im Stammverzeichnis.

Jede Hilfe - sehr geschätzt!

-Steve

(function() { 
    'use strict'; 

    var filesToCache = [ 
     'test.css' 
    ]; 

    var staticCacheName = 'pages-cache-v1.0.1'; 

    self.addEventListener('install', function(event) { 
    console.log('Attempting to install service worker and cache static assets'); 
    event.waitUntil(
     caches.open(staticCacheName) 
     .then(function(cache) { 
     console.log(filesToCache); 
     return cache.addAll(filesToCache); 
     }) 
    ); 
    }); 

    self.addEventListener('fetch', function(event) { 
    //console.log('Fetch event for ', event.request.url); 
    event.respondWith(
     caches.match(event.request).then(function(response) { 
     if (response) { 
      //console.log('Found ', event.request.url, ' in cache'); 
      return response; 
     } 
     //console.log('Network request for ', event.request.url); 
     return fetch(event.request).then(function(response) { 
      return caches.open(staticCacheName).then(function(cache) { 
      if (event.request.url.indexOf('test') < 0) { 
       cache.put(event.request.url, response.clone()); 
      } 
      return response; 
      }); 
     }); 
     }).catch(function(error) { 
     console.log('Error, ', error); 
     }) 
    ); 
    }); 

    self.addEventListener('activate', function(event) { 
    //console.log('Activating new service worker...'); 

    var cacheWhitelist = [staticCacheName]; 
    event.waitUntil(
     caches.keys().then(function(cacheNames) { 
     return Promise.all(
      cacheNames.map(function(cacheName) { 
      console.log(cacheNames); 
      if (cacheWhitelist.indexOf(cacheName) === -1) { 
       return caches.delete(cacheName); 
      } 
      }) 
     ); 
     }) 
    ); 
    }); 

})(); 

Answer 1

so sicher zu machen, ist Ihr Problem, dass zu viel zwischengespeichert wird, nicht wahr?

Wenn das der Fall ist, schauen Sie sich Ihren Code an. Wenn es in seinem Cache nichts findet, holt es es aus dem Netzwerk und legt es in den Cache. Das ist die einzige Put-Operation im Code.

Sie haben das gleiche Problem erklärt here.

Der Fluss des Codes ist neu für jeden, der mit Service Workers beginnt, aber es ist eigentlich ziemlich einfach, darüber nachzudenken. Du kannst es einfach lesen und es sagt dir, was es macht. Schau dir die Zeile an, in der du den Code eingegeben hast. Schau dir die Umgebung dieser Linie an. Was ist los?

Hoffen das hilft :)