sw-precache runtimeCachingを使用してgoogleapis.comをキャッシュする方法

Question

私のサイトで素材アイコンとロボフォントを使用し、sw-precache runtimeCaching APIを使用してキャッシュしようとしましたが、私はそれを正しくやっているかどうかわからない。キャッシュからこれらのファイルを取得するには、サービス担当者が必要です。ここに私のコードです。私はこれらのリンクをキャッシュしようとしている

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) 
}); 

：

<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

これは、Instagramの画像のキャッシュを生成し、私のGULPタスクである：私は私の一気のタスクにそれを統合

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); 

}）;