Service Worker 是否需要缓存 PWA 核心未使用的清单图标？

Question

这个问题似乎非常重要。但是，我在任何官方渐进式 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",
            "type": "image/png"
        },
        {
            "src": "./assets/static/images/android-chrome-512x512.maskable.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "maskable"
        },
        {
            "src": "./assets/static/images/android-chrome-192x192.maskable.png",
            "sizes": "192x192",
            "type": "image/png",
            "purpose": "maskable"
        },
        {
            "src": "./assets/static/images/apple-touch-icon.png",
            "sizes": "180x180",
            "type": "image/png",
            "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 移动设备，偶尔还有一些连接互联网的台式电脑。

我的问题主要涉及第一组图标：即使 PWA 的核心不需要这些图标和屏幕截图才能正常运行，这些 Android 和 iOS 图标和屏幕截图是否需要缓存？service-worker.js

这相当于问：即使安装图标没有被缓存，相应的操作系统是否也会保存这些图标service-worker.js？

Answer 1

简单的回答是“不”，service-worker.js如果 PWA 不使用（最喜欢的）图标或屏幕截图，则不应缓存这些图标或屏幕截图。

此外，manifest.json仅应指针对 Android 和/或 Chrome 浏览器的图标。因此，apple-touch-icon.png不应在 中提及manifest.json。

对于 iOS，只需将其放置在应用程序apple-touch-icon.png的根文件夹中即可。scope这同样适用于favicon.ico。

对于 Windows 和 Mac OS X 用户代理还有一些更多规则。通过遵循此图标生成器的指南或向其图标检查器证明您的 PWA URL，可以轻松检查这些内容。

例如，它告诉我最好不要包含以下行index.html：

<link rel="shortcut icon" href="./favicon.ico"/>

唯一的例外是 中引用的favicon-32x32.png和图标。这两个图标应该被缓存，因为桌面浏览器会将它们作为选项卡图标获取。favicon-16x16.pngindex.html

此外，service-worker.js也不应该缓存自身。

最后，通过将图像从 RGB 颜色空间转换为例如 24 色的索引调色板，可以显着减小图标尺寸。这可以使用免费图像编辑器GIMP来完成。使用 GIMP 导出图像时，取消选择元数据和缩略图生成。