问题描述
这个问题似乎很重要。 但是，我无法在任何正式的渐进式 Web 应用程序 (PWA) 文档中找到答案。
我的 PWA 的 manifest.json 包含相当多的图标，甚至是相当大的 screenshot.png，这些图标对于 PWA 的核心来说并不重要。
{
"src": "./assets/static/images/android-chrome-512x512.png","sizes": "512x512","type": "image/png"
},{
"src": "./assets/static/images/android-chrome-192x192.png","sizes": "192x192",{
"src": "./assets/static/images/android-chrome-512x512.maskable.png","type": "image/png","purpose": "maskable"
},{
"src": "./assets/static/images/android-chrome-192x192.maskable.png",{
"src": "./assets/static/images/apple-touch-icon.png","sizes": "180x180","purpose": "maskable"
}
],"screenshots": [
{
"src": "./assets/static/images/screenshot.png","sizes": "1080x2220","type": "image/png"
}
]
我的单页 PWA 的 index.html 仅引用了上述图标之一：
<link rel="apple-touch-icon" sizes="180x180" href="./assets/static/images/apple-touch-icon.png"/>
但是还有更多的图标主要用于 Microsoft Windows 和 Apple Safari 浏览器，这些图标甚至没有被 manifest.json 引用。 Microsoft Windows 图标仅在 browserconfig.xml 文件中列出：
<link rel="shortcut icon" href="./assets/static/images/favicon.ico"/>
<link rel="icon" type="image/png" sizes="32x32" href="./assets/static/images/favicon-32x32.png"/>
<link rel="icon" type="image/png" sizes="16x16" href="./assets/static/images/favicon-16x16.png"/>
<link rel="mask-icon" href="./assets/static/images/safari-pinned-tab.svg" color="#379"/>
<Meta name="msapplication-config" content="./assets/static/images/browserconfig.xml"/>
另一方面，我的 PWA 有自己的一组应用程序图标，这些图标未在 manifest.json 中列出，但当然由 service-worker.js 缓存；没问题。
我的 PWA 的目标是移动 Android 和 iOS，偶尔还有一些连接互联网的台式计算机。
我的问题主要是指第一组图标：这些Android和iOS图标和截图是否需要被service-worker.js缓存，即使PWA的核心不需要这些运作良好？
这相当于问：即使安装图标没有被 service-worker.js 缓存，相应的操作系统是否也会保存安装图标？
解决方法
简短的回答是“不”，如果 PWA 不使用这些（收藏）图标或屏幕截图，service-worker.js 不应缓存这些。
此外，manifest.json 应仅指面向 Android 和/或 Chrome 浏览器的图标。因此，不应在 apple-touch-icon.png 中提及 manifest.json。
对于 iOS，只需将 apple-touch-icon.png 放在应用程序 scope 的根文件夹中即可。 favicon.ico 也是如此。
对于 Windows 和 Mac OS X 用户代理还有更多规则。这些可以通过遵循此 favicon generator 的指南或通过将您的 PWA URL 证明到其 favicon checker 来轻松检查。
例如，它告诉我以下行最好不要出现在 index.html 之外：
<link rel="shortcut icon" href="./favicon.ico"/>
唯一的例外是 favicon-32x32.png 中引用的 favicon-16x16.png 和 index.html 图标。这两个图标应该被缓存，因为桌面浏览器会将它们作为标签图标获取。
此外，service-worker.js 也不应缓存自身。
最后，通过将图像从 RGB 颜色空间转换为 索引调色板（例如 24 色），可以显着减小图标大小。这可以使用免费的图像编辑器 GIMP 来完成。使用 GIMP 导出图像时，取消选择元数据和缩略图生成。