Slide 1
Slide 1 text
PWACompatを
本番導入してみた話
PWA Night #4 LT @株式会社ウフル
by がっちゃん(@gatchan0807)
Slide 2
Slide 2 text
自己紹介
・フロントエンドエンジニア
・Like: JavaScript / TypeScript / Vue
・Age: 22
・PWAのひよっこ
Name: がっちゃん（古賀 友輝）
@gatchan0807
@ahaha0807.alg
Slide 3
Slide 3 text
手軽に(Safariでも)
ホーム画面に追加
出来るようにしたい
PWAに対しての今回のニーズ
Slide 4
Slide 4 text
まずは普通にチュートリアルに沿って
実装してみた
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
でも
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
Android Chromeの方なら動くのに
iOS Safariやとスプラッシュスクリーンも
ホームアイコンもおかしい…
Slide 9
Slide 9 text
調べてみたところ…
● iOS Safariでは現状manifest.jsonが適用されない
● iOS Safariだと専用のタグを設置しないと
○ スプラッシュスクリーンが真っ白になる
○ ホームに追加されるアイコンの指定ができない
○ ステータスバーのカスタマイズができない
○ アプリタイトルのカスタマイズ（短縮名の設定）ができない
Slide 10
Slide 10 text
iOS Safari専用の
タグを設置したら
二重で管理しなあかんことに
なってまうし微妙やなぁ…
Slide 11
Slide 11 text
そこでさらに調べてみると
Slide 12
Slide 12 text
PWACompatなるものを発見
Slide 13
Slide 13 text
PWACompatって？
● Googleさんが公式で開発
● manifest.jsonの情報を元に、iOS / IE / Edge 等のmanifest.jsonに
対応していないブラウザ用の代替メタタグを自動挿入
● CDN経由で手軽に使用できる
Slide 14
Slide 14 text
要はSafariとかとの差分を
サクッと埋めてくれる便利ツール
Slide 15
Slide 15 text
導入までのステップ
1. manifest.json のlinkタグの下に manifest.webmanifest のタグを追記する
2. scriptタグをマニフェストを読み込む linkタグの直下に追記する
3. 完了！
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
まとめ
● 過去バージョン・ブラウザ等の対応が必要な場合の対応には
非常に手がかからなくて良い
● 今回のようなインストール / ホーム画面追加さえできればいい
というニーズだけなら手っ取り早くてよかった
● でも、将来的にブラウザ側が追いついてきたり、細かく
カスタマイズする必要がある場合は個別実装するようにしよう
Slide 18
Slide 18 text
おまけ
Android側でもPWACompatの
メリットあり
PWACompatを async 呼び出ししてい
るので、ポップアップ的な表示が起きる
ので自然と目が行く
→PWAインストールされやすく
なる！（…かも！）
Slide 19
Slide 19 text
ご清聴ありがとうございました！
@gatchan0807