Service Worker 应该预缓存哪些文件（通常）？

Question

我很欣赏这个问题可能有点“基于意见”，但是，我认为一个概括的答案可以非常有助于将来有兴趣了解更多关于 PWA 和 Service Worker 的其他人。

背景

我在网上搜索过，但很惊讶地发现，在选择要由 Service Worker 为 PWA 预缓存的文件时，没有明确说明最佳实践是什么。

有各种文章/文档概述了预缓存的作用及其工作原理（有关更多信息，请参见此处），但没有一篇提供“常见做法”的示例。

在标准的渐进式 Web 应用程序中，通常会预缓存哪些文件？

为了确保我的应用程序在离线时尽可能地工作，我预缓存了以下所有文件：

就我而言，这大约为 2MB（申请完成后可能会增加）

Answer 1

作为一般规则，您应该在 PWA 中预取构成应用程序核心 shell 的所有静态资产。
因此，即使没有互联网连接，您也希望立即为用户提供最少的资产集。如果这些资源的预取失败，则不会安装 Service Worker，因为它们对于 PWA 本身至关重要。

场景可能因情况而异。
例如，在简单的情况下，您可以仅缓存离线页面、一些公司徽标图像和相关的 javascript 文件。在其他情况下（例如https://www.trivago.ch/），您可以提供完整的离线游戏来与用户离线互动。

如果有人想进一步研究该主题，我写了一系列有关渐进式 Web 应用程序的文章。