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

Question

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

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

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

Answer 1

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

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

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

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