動的キャッシュ角度4が機能していませんPWA

Question

オンラインモードで正常に機能していると思われる角度4のプログレッシブウェブアプリを開発中です。動的キャッシュを必要としない限り、オフラインモードでも動作します。

は、だから私はいくつかの設定をしている中で、このngsw-manifest.jsonあります：

{ 
    "routing": { 
     "index": "/index.html", 
     "routes": { 
      "/": { 
       "match": "exact" 
      }, 
      "/coffee": { 
       "match": "prefix" 
      } 
     } 
    }, 
    "static.ignore": [ 
     "^\/icons\/.*$" 
    ], 
    "external": { 
     "urls": [ 
      { 
       "url": "https://fonts.googleapis.com/icon?family=Material+Icons" 
      }, 
      { 
       "url": "https://fonts.gstatic.com/s/materialicons/v29/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2" 
      } 
     ] 
    }, 
    "dynamic": { 
     "group": [ 
      { 
       "name": "api", 
       "urls": { 
        "http://localhost:3000/coffees": { 
         "match": "prefix" 
        } 
       }, 
       "cache": { 
        "optimizeFor": "freshness", 
        "networkTimeoutMs": 1000, 
        "maxEntries": 30, 
        "strategy": "lru", 
        "maxAgeMs": 360000000 
       } 
      } 
     ] 
    } 
} 

は、したがって、上記のJSONでdynamicキーは、オフラインで使用するためにページのコンテンツをキャッシュします。ここ はキャッシュされているコンテンツの画像れる：私は、キャッシングした後、オフラインモードでページをリロードしようとすると、しかし、コンテンツが表示されていません

。私が逃した設定がいくつかありますか？

Answer 1

ngswの準備が整うのを待つ間に、Angularプロジェクトでworkbox-build npmパッケージを使用できます。プリキャッシュ資産について

：

const workbox: WorkboxBuild = require('workbox-build'); 
workbox.injectManifest({ 
    globDirectory: './dist/', 
    globPatterns: ['**\/*.{html,js,css,png,jpg,json}'], 
    globIgnores: ['build/*', 'sw-default.js', 'workbox-sw.js','assets/icons/**/*'], 
    swSrc: './src/sw-template.js', 
    swDest: './dist/sw-default.js', 
}); 

ダイナミックキャッシングの場合：

const workboxSW = new self.WorkboxSW(); 

// work-images-cache 
workboxSW.router.registerRoute('https://storage.googleapis.com/xxx.appspot.com/(.*)', 
    workboxSW.strategies.cacheFirst({ 
    cacheName: 'work-images-cache', 
    cacheExpiration: { 
     maxEntries: 60 
    }, 
    cacheableResponse: { statuses: [0, 200] } 
    }) 
); 

あなたは別のregisterRouteを呼び出すことによって、ウェブフォントなどをキャッシュすることができます。現実的な使用例here。