前置き
最近界隈をよく賑わせているPWAですが、皆様の記憶に新しい通り3月末のiOS 11.3リリースに伴いSafariにも対応が開始されました。
問題
私もReact × github pages × PWAで試してみたのですが、
AndroidはChromeからホーム画面にで上手く表示されたものの、
iOSではSafariからホーム画面に表示したいはずのアイコンが上手く反映されませんでした。
原因
先に結論をいうと、PWAアプリに必須であるmanifest.jsonに、ホームアイコンやらなんやらを指定して表示させるのですが、ここにアイコン画像を指定していても未だiOSの場合反映されないということが判明いたしました。
対応方法
ではどうやってSafariでホームに追加した時に指定したアイコンを反映させるのか、
<link rel="apple-touch-icon" href="%PUBLIC_URL%/___画像___.png" sizes="192x192"/>
この "apple-touch-icon" が含まれたリンク要素をindex.htmlの中に埋め込む必要があります。
またsizesでちゃんとアイコンサイズも指定してあげる必要があります。
※AndroidのみのPWA化であればindex.htmlに上記を埋め込む必要はないです。
所感
- 3月末に対応されたiOSのPWAですので、まだまだ対応されていない部分が多いです。あとは英語でググってもなかなかiOS版PWAでヒットしないことがあります。
- apple-touch-iconの埋め込みはウェブクリップ等ネイティブユーザー向けWEB開発をされていた方には常識だと思いますが、私は初めての経験だったため結構ハマって抜け出せなかったです。
おしまい。
※ 2018/08/01 追加
現状スプラッシュスクリーンのアイコンも同じようにindex.htmlの
内に専用のタグを埋め込まないといけません。ホームアイコンの件もまだmanifest.jsonでの処理はできません。
そんな現状を見兼ねたのか、googleがPWACompatという、ホームアイコンもスプラッシュスクリーンアイコンもiOS(safari)で簡単に表示させられるアーキテクチャを作ってくれていたようです。
(引用URL)
■github
https://github.com/GoogleChromeLabs/pwacompat
■海外SEO情報ブログ
https://www.suzukikenichi.com/blog/pwacompat-to-bring-web-app-manifest-to-safari-for-ios/
■Medium
https://medium.com/@firt/you-shouldnt-use-chrome-s-pwacompat-library-in-your-progressive-web-apps-6b3496faab62