我很欣赏这个问题可能有点“基于意见”，但是，我认为一个通用的答案可以在未来帮助其他有兴趣了解更多关于 PWA 和 Service Worker 的人。
背景
我在网上搜索过，并惊讶地发现没有明确描述在选择要由 Service Worker 为 PWA 预缓存的文件时的最佳实践是什么。
有各种文章/文档概述了预缓存的作用及其工作原理（有关更多信息，请参见此处），但没有一个给出“常见做法”的示例。
问题
在标准的渐进式 Web 应用程序中，通常会预缓存哪些文件？
我目前在做什么...
为了确保我的应用程序尽可能离线运行，我预缓存了以下所有文件：
- 模板（我的
index.html应用是 Vue SPA） - 所有 JS 文件（包括来自动态导入的 JS）
- 所有 CSS 文件（只有一个）
- 网络清单
- 应用程序使用的任何自定义字体
- 任何需要的语言文件（这是动态的，即只会预缓存当前访问者的语言）
- 所有应用程序图标（请参阅下面的列表）
- 所有启动画面（见下面的列表）
就我而言，这大约是 2MB（一旦应用程序完成，可能会增加）
应用程序图标细分
- android-chrome-192x192.png
- android-chrome-512x512.png
- 苹果触摸图标 120x120-precomposed.png
- 苹果触摸图标 120x120.png
- 苹果触摸图标 180x180-precomposed.png
- 苹果触摸图标 180x180.png
- apple-touch-icon-72x72-precomposed.png
- 苹果触摸图标 72x72.png
- 苹果触摸图标precomposed.png
- 苹果触摸icon.png
- 图标_128x128.png
- 图标_144x144.png
- 图标_152x152.png
- 图标_192x192.png
- 图标_384x384.png
- 图标_512x512.png
- 图标_72x72.png
- 图标_96x96.png
- favicon-16x16.png
- favicon-194x194.png
- favicon-32x32.png
- favicon.ico
- mstile-144x144.png
- 野生动物园固定tab.svg
启动画面的分解
- 飞溅-1125x2436.png
- 飞溅-1242x2148.png
- 飞溅-1536x2048.png
- 飞溅-1668x2224.png
- 飞溅-2048x2732.png
- 飞溅-640x1136.png
- 飞溅-750x1294.png