Dynamic cache angular 4 not working 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?

Based from this documentation, the app shell approach relies on caching the shell of your web application using a service worker. Using the app shell + dynamic content model greatly improves app performance and works really well with service worker caching as a progressive enhancement. However, when service workers are not supported in your browser, the assets are not cached offline but the content is still fetched over the network and the user still gets a basic experience. — abielita
– abielita, Commented Sep 18, 2017 at 16:52
I am also waiting for dynamic cache getting fixed. github.com/angular/mobile-toolkit/issues/168 — bob
– bob, Commented Sep 23, 2017 at 8:36

bob · Accepted Answer · 2017-11-09 18:18:26Z

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.

ata · Accepted Answer · 2020-12-30 00:08:12Z

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:

Collectives™ on Stack Overflow

Dynamic cache angular 4 not working PWA

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related