Cache full page using Workbox

Question

I'm trying to cache full page using Workbox but it is not working according to my requirement I want to cache not html only I want to cache full page with Image,Js,Css Currently It is caching only html

workbox.routing.registerRoute('/about.html', new workbox.strategies.NetworkFirst());

above code I am using for page cache

Answer 1

Each subresource used on your page (images, JavaScript, CSS, etc.) results in a new HTTP request. The routes that you register will be matched against the URL for each HTTP request. Right now the route you've registered will match the specific URL pathname '/about.html' .

If you'd like to cache absolutely every same-origin request that's made by your webapp, you can adjust your routing logic to use a RegExp wildcard, like:

workbox.routing.registerRoute(
  new RegExp('/.*'),
  new workbox.strategies.NetworkFirst()
);

You can further modify that RegExp if you'd like to narrow down what gets cached, or use a different strategy for different types of URLs.