web-dev-qa-db-ja.com

PWAアイコンはiOS 11.3では使用されません

現在、iOS 11.3でPWAをテストしており、以下のmanifest.jsonファイルを使用しています。

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

これは、アイコンの設定を除いてうまく機能します。 iPhoneX上のiOS 11.3では、アイコンファイルはホーム画面に表示されませんが、画面キャプチャはランチャーボタンとして使用されます。

マニフェストを https://www.ft.com/ や https://r.nikkei.com/ などの他のサイトと比較しましたが、できませんでしたアイコン設定の違いを見つけます。これらのサイトのアイコンは、iOS 11.3のPWAでうまく機能します。

Manifest.jsonの何が問題になっていますか？

追伸manifest.jsonはAndroid Chromeでうまく機能します。

mobile-safariprogressive-web-apps
21
kochizufan

IOS 11.3はWebアプリマニフェストをサポートしていますが、この方法でのアイコンの指定はまだサポートしていません。他のデバイスのマニフェストに含める必要がありますが、少なくとも現時点では、iOSには次のものを使用する必要があります。

<link rel="Apple-touch-icon" sizes="180x180" href="icon.png">

アイコンのサイズを指定し、URLを含めます。

詳細は Appleのドキュメントはこちら

プロセスを自動化するウェブサイトもあります リンク先

43
Terren

TerProの答えは正しいですが、フォールバックとして「/Apple-touch-icon.png」という名前のファイルをルートディレクトリに置くことができます。

6
DrinkOps