Service Worker - 打开网站时不要缓存所有文件

Question

My webapp consists of 10 files in total. When you open it, 5 files are loaded. If you want more features, 5 more files can be loaded (after clicking a button). 50% of users need only 5 files, the rest needs all 10 files. I want to provide offline capabilities.

In my Service Worker, I listen to "install" event, where I call cache.addAll(... all 10 files ...);

Does it mean, that every visitor will load all 10 files, right when they open my webapp?

Is there a way to add a file into a ServiceWorker cache only if it has been requested by the webapp over the HTTP?

Answer 1

Sure—I'd recommend taking a look through https://web.dev/offline-cookbook/

The first pattern, that you're already using, is referred to there as " On install—as a dependency ". You don't have to cache all 10 of your files via this method—it's fine to cache 5.

The pattern you're asking about is referred to as " On network response ".

The main thing you'd want to do when combining those two recipes would be to use the same cache name in both, so that regardless of whether the initial response came from the network at runtime or during install time, it ends up being stored in the same cache.