PWACompatを本番導入してみた話 - PWANight #4 LT

PWA Night #4 でLT発表した資料です

https://pwanight.connpass.com/event/128434/

PWACompatのGitHub URLはこちら

https://github.com/GoogleChromeLabs/pwacompat

Transcript

1. PWACompatを
 本番導入してみた話
 PWA Night #4 LT @株式会社ウフル by がっちゃん(@gatchan0807)
2. 自己紹介 ・フロントエンドエンジニア
 ・Like: JavaScript / TypeScript / Vue
 ・Age: 22
 ・PWAのひよっこ
 Name: がっちゃん（古賀 友輝）
 @gatchan0807
 @ahaha0807.alg

3. 手軽に(Safariでも)
 ホーム画面に追加
 出来るようにしたい
 PWAに対しての今回のニーズ

4. まずは普通にチュートリアルに沿って 実装してみた
6. でも
8. Android Chromeの方なら動くのに iOS Safariやとスプラッシュスクリーンも ホームアイコンもおかしい…
9. 調べてみたところ… • iOS Safariでは現状manifest.jsonが適用されない • iOS Safariだと専用のタグを設置しないと ◦ スプラッシュスクリーンが真っ白になる ◦ ホームに追加されるアイコンの指定ができない ◦ ステータスバーのカスタマイズができない ◦ アプリタイトルのカスタマイズ（短縮名の設定）ができない
10. iOS Safari専用の
 タグを設置したら
 二重で管理しなあかんことに
 なってまうし微妙やなぁ…

11. そこでさらに調べてみると
12. PWACompatなるものを発見
13. PWACompatって？ • Googleさんが公式で開発 • manifest.jsonの情報を元に、iOS / IE / Edge 等のmanifest.jsonに 対応していないブラウザ用の代替メタタグを自動挿入 • CDN経由で手軽に使用できる
14. 要はSafariとかとの差分を サクッと埋めてくれる便利ツール
15. 導入までのステップ 1. manifest.json のlinkタグの下に manifest.webmanifest のタグを追記する 2. scriptタグをマニフェストを読み込む linkタグの直下に追記する 3. 完了！
17. まとめ • 過去バージョン・ブラウザ等の対応が必要な場合の対応には 非常に手がかからなくて良い • 今回のようなインストール / ホーム画面追加さえできればいい というニーズだけなら手っ取り早くてよかった • でも、将来的にブラウザ側が追いついてきたり、細かく カスタマイズする必要がある場合は個別実装するようにしよう
18. おまけ Android側でもPWACompatの メリットあり PWACompatを async 呼び出ししてい るので、ポップアップ的な表示が起きる ので自然と目が行く →PWAインストールされやすく なる！（…かも！）
19. ご清聴ありがとうございました！
 @gatchan0807