sw-precacheで外部リソースをキャッシュする

Question

sw-precacheに外部CDNリソースを事前キャッシュするようにしましたが、生成されたservice-worker.jsにはprecacheConfigのCDN URLが含まれていません。私の地元のclient/assetsフォルダ内

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}' 
] 

ファイルがprecacheConfigアレイに追加されますが、外部のフォント素晴らしいCSSはありません：

これは私が私のgulpfileに持っているものです。これを達成する方法はありますか？

Answer 1

sw-precacheは、使用しているclient/assets/**/*...パターンと一致するローカルアセットのみを事前に保存しておくことができます。これは、CDN経由でアクセスされるリモートアセットでは動作しません。

あなたはアプローチのカップルがあります：リソースのローカルコピーをダウンロードする（すなわちfont-awesome）、その後、一緒にそのサードパーティのリソースを展開する

1. 使用npm（またはパッケージマネージャまたはお好みの）あなたのファーストパーティの資産。サードパーティのコードがパターンによって取得された場合は、staticFileGlobsに渡します。それは、他のローカルのものと同じように、あらかじめキャストしてバージョン管理することができます。

2. ランタイムキャッシュを使用して、CDN上のリソースを処理します。特定のアセットのURLには4.0.3のバージョン文字列が含まれているため、基礎となるコンテンツは決して変更されないと考えても安全です。cacheFirst戦略はおそらく安全です。

次のように見えるためにあなたのsw-precache設定を変更できます。設定は何かを拾うために十分に広くされていることを

{ 
    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... 
} 

は、CDN、キャッシュそれを、とはそれをキャッシュ最初にサービスを提供することをオフに役立ちましたその後の訪問で1回。

はあなたの例では、あなたのCDNのURLのためhttp:プロトコルを使用して、あなたがサービスワーカーのキャッシングとうまく演じて応答を得るためにhttps:を使用する必要がありますのでご注意ください。