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，偶尔还有一些联网的台式电脑。

我的问题主要是指第一组图标：做这些Android和iOS图标，截图需要由service-worker.js 即使 PWA 的核心不需要这些也能正常运行？

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

Answer 1

简短的回答是 “不”， none 的（收藏）图标或屏幕截图应该由 service-worker.js 缓存，如果 PWA 将不要使用这些。

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

中提及

对于iOS，将apple-touch-icon.png放在应用程序scope的根文件夹中就足够了。 favicon.ico.

也是如此

Windows 和 Mac OS X 用户代理还有一些规则。可以按照 favicon generator or by proving your PWA URL to its favicon checker.

的指南轻松检查这些内容

例如，它告诉我以下行最好不要放在 index.html 中：

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

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

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

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

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

Does a service worker need to cache manifest icons that are not used by the core of the PWA?

caching

icons

progressive-web-apps

service-worker

favicon