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

问题描述

我的 webapp 总共包含 10 个文件。当您打开它时，会加载 5 个文件。如果您想要更多功能，可以再加载 5 个文件（单击按钮后）。 50% 的用户只需要 5 个文件，其余的用户需要全部 10 个文件。我想提供离线功能。

在我的 Service Worker 中，我监听了“安装”事件，在那里我调用了 cache.addAll(... all 10 files ...);

这是否意味着每个访问者在打开我的 web 应用程序时都会加载所有 10 个文件？

有没有办法将文件添加到 ServiceWorker 缓存中，前提是 Web 应用程序通过 HTTP 请求该文件？

解决方法

当然——我建议您浏览一下https://web.dev/offline-cookbook/

您已经在使用的第一个模式在此处称为“On install—as a dependency”。您不必通过此方法缓存所有 10 个文件 - 缓存 5 个即可。

您询问的模式称为“On network response”。

在组合这两个配方时，您想要做的主要事情是在两者中使用相同的缓存名称，这样无论初始响应是在运行时还是在安装时来自网络，它都以存储在同一个缓存中。