PWA не отображает пользовательский значок в соответствии с manifest.json (Node.js на Heroku) - PullRequest
Новая
       18

PWA не отображает пользовательский значок в соответствии с manifest.json (Node.js на Heroku)

0 голосов
/ 16 октября 2018

У меня есть PWA, созданный с помощью CRA, он находится на Heroku.PWA доступен для загрузки на моем устройстве iOS, и все работает нормально, за исключением значка.

Я не уверен, что ссылка на файл верна, поскольку она изменяется во время сборки Heroku.Я пробовал и мою ссылку на файл localhost, и ссылку после сборки, но ни одна из них не дает мне возможности использовать значок.

Я новичок в 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"
}

Любые мысли приветствуются.

1 Ответ

0 голосов
/ 16 октября 2018

Я нашел свой ответ, и я напишу здесь, если кто-нибудь еще столкнется с этой проблемой.

То, что я делал в файле manifest.json , было достаточным для значков Android PWA, но на момент написания этой статьи iOS требовал другого процесса.

исправление находилось в корневой папке, в index.html , добавьте: 

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

Эта ссылка указывает iOS специально прочитать эту ссылку и назначить ее в качестве значка приложения.

Здесь вы найдете гораздо больше полезной информации:

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

...