如何使用 SVG 作为 PWA 图标？

Question

在制作渐进式 Web 应用程序 (PWA) 时，您必须创建大量不同大小的图标并在 .manifest 文件中声明它们。显然，单个 SVG 就可以很好地解决这个混乱问题，但不幸的是我现在还不能做到这一点。

我试过这个：

1. 创建 2 个不同的 SVG，在 Illustrator 中将它们设置为方形画板（画布）。结果：在 Chrome 开发工具中 - “图像文件大小不正确 (1200x1200)：必须提供至少 144x144”或“无法加载您的 svg”。然而，在 Chrome 中打开相同 url 上的相同 svg 是完全可见的！
2. 在 .manifest 中设置“sizes”：“any”。尽管此关键字提到已接受，但开发工具显示错误。
3. 添加了“目的”：“可屏蔽”或“目的”：“可屏蔽任何”或“目的”：“任何”。

Devtools 说我的 SVG (150x150) 低于最低要求 (144x144)，而且我必须提供至少一个 png、svg(!!!) 或 wepP 格式的图标。

Answer 1

事实上，有一些规则在开发工具中没有提及。您应该完全像这样格式化清单：

  "icons": [{
    "src": "/my/etc/pwa1/cheese_sq.svg", //inside the scope!
    "sizes": "48x48 72x72 96x96 128x128 256x256", //see the size in the devtools, not in editor. I've set up size 1200x1200 in Illustrator, but Chrome says it's 150x150. Also, "sizes":"any" not work.
    "type": "image/svg+xml", //not image/svg which is still visible in web
    "purpose": "any" //not "maskable any" as you may see there in answers.
  }]

现代标准中有太多官僚主义，请杀了我！