動態緩存 angular 4 不工作 PWA

Question

我正在開發一個 angular 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 key緩存了頁面上的內容供離線使用。 這是正在緩存的內容的圖像：

但是，當我嘗試在緩存后以離線模式重新加載頁面時，內容並未顯示。 有沒有我錯過的配置？

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來緩存網絡字體等。 實際使用示例在這里。

Answer 2

當我使用相同的配置時，甚至我也遇到了同樣的問題。 下面為我​​工作，我能夠在離線模式下從緩存中檢索咖啡列表使用數據dataGroups在ngsw-config.json進行動態緩存，如下所示

    "dataGroups":[
      {
       "name":"api",
       "urls":[
        "/coffees"
       ],
      "cacheConfig": {
       "strategy": "performance",
       "timeout": "10s",
       "maxSize": 30,
       "maxAge": "1d"
       }
     }
   ]

以下文章可能會有所幫助：

• Angular Service Worker 第 1 部分
• Angular Service Worker 第 2 部分