PWA 未根据 manifest.json（Heroku 上的 Node.js）显示自定义图标

Question

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

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

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

这里是 manifest.json（这里的文件引用是 post-build，基于 Chrome 开发工具中的 'Sources' 选项卡）：

{
  "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

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

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

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

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

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

这里有更多有用的信息：

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

PWA 未根据 manifest.json（Heroku 上的 Node.js）显示自定义图标

PWA not displaying custom icon according to manifest.json (Node.js on Heroku)

icons

heroku

progressive-web-apps

create-react-app

manifest.json