动态缓存角4不工作PWA

Question

我正在开发angular 4中的一个渐进式web应用程序，它似乎在在线模式下工作得很好。它也可以在脱机模式下工作，除非我涉及到动态缓存。

这就是我做了一些配置的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。

Answer 2

当我使用相同的配置时，我也面临着同样的问题。在ngsw-config.json中使用dataGroups进行动态缓存，如下所示

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

下面的文章可能会有所帮助：

• Angular service worker part-1
• Angular service worker part-2