Zwischenspeichern externer Ressourcen mit sw-Precache

Question

Ich versuche, sw-precache zu erhalten, externe CDN-Ressourcen vorab zu cachen, aber die generierte service-worker.js enthält nicht die CDN-URLs im Array precacheConfig.

Dies ist, was ich in meinem gulpfile haben:

staticFileGlobs: [ 
    'http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css', 
    'client/assets/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,ico}' 
] 

Die Dateien in meinem lokalen client/assets Ordner in den precacheConfig Array hinzugefügt werden, aber die externe font-awesome CSS nicht. Gibt es einen Weg, dies zu erreichen?

Answer 1

sw-precache können nur lokale Assets, wie diejenigen, die mit dem client/assets/**/*... Muster, das Sie verwenden, übereinstimmen. Es ist nicht für die Verwendung mit Remote-Ressourcen gedacht, auf die über CDN zugegriffen wird.

Sie haben ein paar Ansätze:

1. Verwenden npm (oder den Paket-Manager oder Ihre Wahl) eine lokale Kopie der Ressource zum Download (dh font-awesome) und implementieren Sie dann die Dritte Ressource neben Ihrem Erstanbieter-Vermögenswerte. Wenn der Code des Drittanbieters von einem Muster übernommen wird, das Sie an staticFileGlobs übergeben, kann es genau wie alles andere lokal gepalzt und versioniert werden.

2. Verwenden Sie Laufzeit-Caching, um die Ressource auf dem CDN zu verarbeiten. Da die URL für Ihr spezifisches Asset eine 4.0.3 Versionierungszeichenfolge enthält, kann davon ausgegangen werden, dass sich die zugrunde liegenden Inhalte niemals ändern werden, und eine cacheFirst Strategie ist wahrscheinlich sicher.

   { 
       staticFileGlobs: [ 
       'client/assets/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,ico}' 
       ], 
       runtimeCaching: [{ 
       urlPattern: /^https:\/\/netdna\.bootstrapcdn\.com\//, 
       handler: 'cacheFirst' 
       }], 
       // ...any other config options... 
   } 
   

   Diese Konfiguration breit genug ist, um abholen etwas serviert aus, dass CDN, Cache, und es dann Cache-first serve:

Sie können Ihre sw-precache Konfiguration wie folgt aussehen ändern einmal in nachfolgenden Besuchen.

Bitte beachten Sie, dass Ihr Beispiel ein http: Protokoll für Ihre CDN URL verwendet, und Sie werden https: verwenden müssen, um eine Antwort zu erhalten, die gut mit Service Arbeiter Caching spielt.