动态缓存 angular 4 不工作 PWA

Question

I am working on a progressive web app in angular 4 which seems to be working fine in online mode. It does work on offline mode as well unless I involve dynamic caching.

So there is this ngsw-manifest.json in which I have done some configuration:

{
    "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
                }
            }
        ]
    }
}

So the dynamic key in the above json caches the content on the page for offline use. Here is an image of the content being cached:

However when I try to reload the page in offline mode after caching, the content is not being shown. Is there some configuration that I missed?

Answer 1

While waiting for ngsw to be ready, you could use workbox-build npm package in your Angular project.

For precaching assets:

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

For dynamic caching:

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

You could cache web fonts etc. by calling another registerRoute . Realistic usage example here .

Answer 2

Even I faced the same issue when I used the same configuration. Below worked out for me and I was able to retrieve list of coffees from the cache in offline mode Use dataGroups for dynamic caching in ngsw-config.json as shown below

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

Below articles can be helpful:

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