PWA图标在 Mac dock 栏上过大的问题2023-12-29

最近在开发 PWA（Progressive Web App）时，我遇到了一个让强迫症很困扰的问题：PWA 的图标在苹果电脑的 Dock 栏上显示得比其他图标要大。正好我在油管看网页三维的内容，看到油管也支持安装，我就试了一下，发现油管也存在相同的问题。看着大厂都如此，我不禁有些怯场，如果这是苹果自己定标准，和谷歌的不一样，会不会太好解决？经过一番谷歌查询后，我发现这个问题是个很经典的问题，很多人都遇到了类似的情况。

发现谷歌的示范例子没有这个问题

起初在学习 PWA 的过程中，看的是谷歌官方的文档，文档从头到位给的例子都是这个squoosh，我就想用官方的例子来证实一下我上面的猜想，但是squoosh却显示正常。这下不得爬一下 JSON 文件查看一下图标项，配置如下：

 "icons": [
    {
      "src": "/c/icon-large-cb438cac.png",
      "type": "image/png",
      "sizes": "1024x1024"
    },
    {
      "src": "/c/icon-large-maskable-c2078ced.png",
      "type": "image/png",
      "sizes": "1024x1024",
      "purpose": "maskable"
    }
  ]

解决方案

我还抓了油管的配置文件，看到我俩都没有用1024尺寸的icon，同时也没有purpose值为maskable的字段，接下来就好办了，裁一个图标，两个进行排除，最后确定是没有加上maskable的原因，这是谷歌的资料对maskable的解释，当初看到这个，我以为是针对安卓不同厂家桌面icon显示的处理，没想也会影响到苹果的桌面图标显示，加上之后大小一样了，现在舒服了。