Save on demand urls to cache

I'm learning Workbox and I want to add some articles URLs to cache for X amount of days and I don't know how to do it.

I can handle URLs that I know using precacheAndRoute. Example:

precacheAndRoute([
  {url: '/index.html', revision: '...'},
  {url: '/contact.html', revision: '...'},
])

Now, I want to add some URLs that I don't know the path to cache on demand. This's because my project is a blog and each post has his own path.

My proposed scenario is: A user enters the article, and that article is cached for 30 days, so you can view offline later.

Solution

What you're after is called runtime caching. It works as you describe: content is cached as the user navigates through the website. Afterwards the content is available for offline viewing.

Runtime caching maybe be implemented with different strategies. They can eg. accept data only from the cache, from cache or network depending on speed, first cache and update in the background etc. Multiple different strategies which may even be manually configured to fit your needs.

Reading: https://developers.google.com/web/tools/workbox/modules/workbox-strategies#what_are_workbox_strategies, https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook, https://web.dev/runtime-caching-with-workbox/

Advice: before implementing anything READ A LOT. That way you can grasp the concepts before you try anything. It might also be that you find something you never thought about in the beginning.