So cache googleapis.com mit sw-precache runtimeCaching

Question

Ich benutze materielle Symbole und Roboto Schriftart auf meiner Website und ich habe versucht, es mit Sw-Precache runtimeCaching API zu cachen, aber es funktioniert nicht, ich ' Ich bin mir nicht sicher, ob ich es richtig mache. Ich brauche meinen Service-Mitarbeiter, um diese Dateien aus dem Cache zu holen. Hier ist mein Code. Ich integriert sie in meine schluck Aufgabe:

gulp.task('create-sw', ['watchCss', 'watchJS'], callback => { 
    preCache.write(path.join('.', 'sw.js'), { 
     runtimeCaching: [{ 
      urlPattern: /^https:\/\/fonts\.googleapis\.com$/, 
      handler: 'cacheFirst', 
      options: { 
       cache: { 
        maxEntries: 10, 
        name: 'google-apis' 
      } 
     }, 
    }], 
     staticFileGlobs: [ 
      './script.js', 
      './manifest.json', 
      './app/**/*.{html,json}', 
      './dist/**/*.{js,css,eot,ttf,woff,woff2}', 
      './**/*.{png,jpeg,jpg,svg,gif}', 
      './index.html', 
     ], 
     stripPrefix: '.', 
     maximumFileSizeToCacheInBytes: 15000000, 
    }, callback) 
}); 

Ich versuche, diese Links zu cachen:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en"> 

Answer 1

Das ist meine Aufgabe, die GULP-Cache für Instagram Bilder erzeugt:

gulp.task('generate-service-worker', function(callback) { 
var swPrecache = require('sw-precache'); 
var rootDir = 'app'; 

swPrecache.write(`${rootDir}/service-worker.js`, { 
    staticFileGlobs: [rootDir + '/**/*.{php,js,html,css,png,jpg,gif,svg,eot,ttf,woff,json}', './'], 
    stripPrefix: rootDir, 
    directoryIndex: false, 
    maximumFileSizeToCacheInBytes: 10097152, 
    runtimeCaching: [{ 
     urlPattern: /^https:\/\/scontent\.cdninstagram\.com/, 
     handler: 'networkFirst', 
     options: { 
      cache: { 
       maxEntries: 50, 
       name: 'instagram-images-cache' 
      } 
     } 
    }] 
}, callback); 

});