PWA icons are not used in iOS 11.3

manpreet Best Answer 2 years ago

Now I'm testing PWA on iOS 11.3 and I use the manifest.json file below:

{
  "name": "Maplat PWA Sample",
  "short_name": "Maplat PWA",
  "background_color": "#fc980c",
  "icons": [{
    "src": "/Maplat/pwa/icon-96.png",
    "sizes": "96x96",
    "type": "image/png"
  },{
    "src": "/Maplat/pwa/icon-144.png",
    "sizes": "144x144",
    "type": "image/png"
  },{
    "src": "/Maplat/pwa/icon-192.png",
    "sizes": "192x192",
    "type": "image/png"
  },{
    "src": "/Maplat/pwa/icon-256.png",
    "sizes": "256x256",
    "type": "image/png"
  }],
  "start_url": "/Maplat/debug.html?overlay=true",
  "display": "standalone"
}

This works well except icon setting. In my iOS 11.3 on iPhoneX, icon files are not shown on home screen but screen capture is used as launcher button.

I compared my manifest with other sites, like https://www.ft.com/ or https://r.nikkei.com/, but I couldn't find any differences in icon settings. Icons of these sites work well with PWA on iOS 11.3.

What is wrong in my manifest.json?

P.S. My manifest.json works well with Android Chrome.

manpreet 2 years ago

While iOS 11.3 does support web app manifests, it does not yet support specifying href="https://forum.tuteehub.com/tag/icon">icons this href="https://forum.tuteehub.com/tag/way">way. You'll want to include it in your manifest for other devices, but at least for now you'll have to href="https://forum.tuteehub.com/tag/use">use the following for iOS:

href="https://forum.tuteehub.com/tag/icon">icon" sizes="180x180" href="href="https://forum.tuteehub.com/tag/icon">icon.png">

Specify the href="https://forum.tuteehub.com/tag/icon">icon size, and include a URL.

Learn more at Apple's documentation here

There is also a website to automate the process linked here