如何使用所有站点页面初始化 sw-precache答案

【问题标题】：How can a initialize sw-precache with all site pages如何使用所有站点页面初始化 sw-precache
【发布时间】：2023-03-30 06:30:01
【问题描述】：

我想让应用完全离线可用。即用户在在线时点击一个按钮（或者不点击，这可能会自动发生），并且每个页面，包括所有动态页面，以及网站上的资产都可以被缓存。

我知道我需要生成所有资产的列表，是否有可以执行此操作的工具，或者 sw-precache 中内置的任何方式？

另外，缓存可以有多大，可用多长时间？我认为它可以是任何大小且可用，除非用户专门清除浏览器缓存。

【问题讨论】：

标签： service-worker sw-precache

【解决方案1】：

如果您有一个充满静态文件（HTML、JS、CSS 等）的本地目录，则可以将 sw-precache 配置为根据您传入的模式自动预缓存所有这些文件（或其中的一些子集）到staticFileGlobs option。当您进行本地更改、重新生成 service-worker.js 并重新部署时，用户浏览器中先前预缓存的条目将保持最新。

一般来说，使用 Cache Storage API 可以存储的最大数据量没有硬性上限。这取决于当前可用的空间量（可能与其他启发式方法一起使用）。

在确定哪些文件被预缓存时，您应该考虑周全，并确保它们实际上是您的用户可能会觉得有用的文件。例如，如果用户第一次访问您的（假设的）文档站点，他们最终会下载并存储数千个单独的 HTML 文档，这对您的服务器和用户来说都是一种带宽浪费——除了占用用户的设备。

如果您有大量可选资源或并非所有访问者都需要的资源，那么对关键资源使用预缓存策略以及对可选资源使用 runtime caching strategy 是您的最佳选择。您可以将运行时缓存策略与最大缓存大小或最大期限相结合，底层的sw-toolbox 库会为您删除旧条目。

【讨论】：

谢谢，这回答了存储限制。我有运行时缓存设置来缓存所有内容。基本上我想允许用户通过单击按钮来缓存所有页面，包括动态生成的页面（更新我的问题），以允许完全离线使用。据我所知，唯一的方法是访问每个页面以初始化缓存，没有内置的方法可以做到这一点（无需重新部署任何动态更改）？
如果您提前知道可能的 URL，则可以提前预缓存动态页面，并使用 github.com/GoogleChrome/… 选项。由于您提到“单击按钮”，这让我觉得您不想预缓存，而是按需缓存。您可以使用window.caches 从您的页面按需填充缓存，然后使用适当的更新策略（如fastest）通过runtimeCaching 设置路由以提供这些缓存的响应。