How to use window.caches to save pages from window object?

Question

Most examples of saving an 'app shell' show the process from a service worker. However I noticed that you can also access the caches object from the window.

So my question is, can I save pages for offline from the a page itself, and if so, what is the point of a service worker if this is possible?

Answer 1

There's a chicken-and-the-egg problem here: while your web pages can read from and write to the same caches that a service worker has access to, via window.caches, you need a service worker to intercept the initial navigation request for a web page in order to respond to it using the cache.

In other words, using window.caches presupposes that your page is already loaded, so it doesn't help you load the page while offline.