2001Yのプロフォール画像

2001Y@Y20010920T

iOSもPWA通知できるようになりました。

以前から、iOSでもPWAとは言えませんがmetaタグを追加することで、"アプリ風"を楽しむことができました。

<meta name="apple-mobile-web-app-capable" content="yes">

なので、Androidなどの他機種に対応する必要がない場合、iOSのためだけなら manifest.json を追加する必要はあまりありませんでした。

しかし、display-mode: standaloneでPWA検知をしようとしたところ、うまく検知できませんでした。

@media (display-mode: standalone) {
  body {
    background: red;
  }
}

Safariらしいバグかと思って小一時間時間を費やしましたが、manifest.json を追加すれば解決しました。

MDNにも一番最初の手順に書いてあるので、大人しく追加するのが良さそうです。

PWA をインストール可能にする - プログレッシブウェブアプリ (PWA) | MDN
https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable