ServiceWorker Cache auf Installieren

Question

Ich versuche herauszufinden, wie ich eine dynamische Seite bei der Installation zwischenspeichern kann? Meine aktuelle Seite ist /product/1/view

self.addEventListener('install', function (event) { 
event.waitUntil(
     caches.open('kiosk-assets').then(function (cache) { 
      return cache.addAll([ 
       '/' // This is the problem it caches the origin path i need the current page cached. See register below 
       '/css/product.min.css' 
      ]) 
     }), 
.... 

Hier ist, wie ich meine Arbeiter registrieren. Dies wird auf eingetragene /product/1/view

window.navigator.serviceWorker.register('/sw.js', {scope: `/product/${id}/view`}) 

ich ändern kann, wie ich mich registrieren, wenn dies eine Möglichkeit sein könnte.

Answer 1

Ich glaube nicht, können Sie das tun onInstall

Zumindest nicht mit dem Service-Arbeiter für sich. Aus dem einfachen Grund, dass, während der Service-Mitarbeiter installiert wird, es keine Ahnung hat, welche Clients es steuert/steuern wird.

Auch selbst ein aktiver Service-Mitarbeiter hat keine Kontrolle über das DOM. Daher hat es keine Möglichkeit zu wissen, was die aktuelle URL ist.

können Sie entweder cachen die URL auf activate und oder ein fetch Ereignis

oder

Sie den Client müssen die Arbeiter ping, während sie es installiert wird.

Wenn Caching der Registrierung Seite streng onInstall ist alles, was Sie brauchen, dann,

eine Nachricht über postMessage von der Seite senden, die die Arbeiter registriert

if ('serviceWorker' in navigator) { 
navigator.serviceWorker.register('sw.js') 
    .then(function (success) { 
     console.log('scope', success.scope); 
     if (success.installing) { 
      let sw = success.installing; 
      sw.addEventListener('statechange', function (event) { 
       if (event.target.state == 'installed') { 
        let loc = window.location.toString(); 
        let message = { 
         action: 'cache', 
         location: loc 
        } 
        sw.postMessage(message); 
       } 
      }) 
     } 
    }); 
} 

Und verwenden Sie die message Ereignis innerhalb des Arbeitnehmers, Um die URL zwischenzuspeichern

Answer 2

Sie sollten wahrscheinlich sw-precache Bibliothek für statisches und dynamisches Caching von Daten verwenden.

Integrieren Sie es mit Ihnen Build-Umgebung (Gulp, Grunt, Webpack). Sw-Precache versorgt alle Ihre statischen Dateien und aktualisiert sie entsprechend. sw-precache hat die Möglichkeiten der runtime-caching, die Ihre Bedürfnisse erfüllen füllen

können Sie sich hier über die Bibliothek lernen - https://github.com/GoogleChrome/sw-precache