Help us understand the problem. What is going on with this article?

初心者がつまづいた、PWAアプリSafari版でホームボタンのアイコンが読み込まれない件

More than 1 year has passed since last update.

前置き

最近界隈をよく賑わせている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

bonkeenu
ど素人シリーズでやっていこうと思います。 ど素人→素人→初心者→無印 このような軌跡を辿りたいです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away