heroku - PWA 不根据 manifest.json(Heroku 上的 Node.js)显示自定义图标

Question

我有一个使用 CRA 构建的 PWA，它托管在 Heroku 上。 PWA 可在我的 iOS 设备上下载，一切正常，除了图标。

我不确定文件引用是否正确，因为它在 Heroku 构建期间发生了变化。我已经尝试了本地主机文件引用和构建后引用，但都没有给我使用图标的选项。

我是 PWA 的新手，所以我可能犯了一个愚蠢的错误

这是 manifest.json(这里的文件引用是构建后的，基于 Chrome 开发工具中的“源”选项卡):

{
  "short_name": "Sonar",
  "name": "Sonar",
  "icons": [
    {
      "src": "static/media/sonar_backup.cb32ebcc.png",
      "type": "image/png",
      "sizes": "128x128"
    },{          
      "src": "static/media/sonar_backup.cb32ebcc.png",
      "type": "image/png",
      "sizes": "144x144"
    },{
      "src": "static/media/sonar_backup.cb32ebcc.png",
      "type": "image/png",
      "sizes": "192x192"
    },{
      "src": "static/media/sonar_backup.cb32ebcc.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],

  "start_url": "/",
  "display": "standalone",
  "theme_color": "#512DA8",
  "background_color": "#512DA8"
}

任何想法表示赞赏。

Answer 1

我找到了自己的答案，我会在这里发布以防其他人遇到这个问题。

我在 manifest.json 文件中所做的对于 Android PWA 图标来说已经足够了，但在这篇文章的时候，iOS 需要一个不同的过程。

修复在根文件夹中，在 index.html 中，添加:

<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/profilePicture/sonar_backup.png">

该链接告诉 iOS 专门读取此 href，并将其指定为应用程序图标。

这里有更多有用的信息:

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html