Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
17
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

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

前置き

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

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
17
Help us understand the problem. What are the problem?