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

PWACompatを 本番導入してみた話 PWA Night #4 LT @株式会社ウフル by がっちゃん(@gatchan0807)

自己紹介 Name: がっちゃん（古賀 友輝） ・フロントエンドエンジニア ・Like: JavaScript / TypeScript / Vue ・Age: 22 ・PWAのひよっこ @gatchan0807 @ahaha0807.alg

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

まずは普通にチュートリアルに沿って 実装してみた

でも

Android Chromeの方なら動くのに iOS Safariやとスプラッシュスクリーンも ホームアイコンもおかしい…

調べてみたところ… ● iOS Safariでは現状manifest.jsonが適用されない ● iOS Safariだと専用のタグを設置しないと ○ スプラッシュスクリーンが真っ白になる ○ ホームに追加されるアイコンの指定ができない ○ ステータスバーのカスタマイズができない ○ アプリタイトルのカスタマイズ（短縮名の設定）ができない

iOS Safari専用の タグを設置したら 二重で管理しなあかんことに なってまうし微妙やなぁ…

そこでさらに調べてみると

PWACompatなるものを発見

PWACompatって？ ● Googleさんが公式で開発 ● manifest.jsonの情報を元に、iOS / IE / Edge 等のmanifest.jsonに 対応していないブラウザ用の代替メタタグを自動挿入 ● CDN経由で手軽に使用できる

要はSafariとかとの差分を サクッと埋めてくれる便利ツール

導入までのステップ 1. manifest.json のlinkタグの下に manifest.webmanifest のタグを追記する 2. scriptタグをマニフェストを読み込む linkタグの直下に追記する 3. 完了！

まとめ ● 過去バージョン・ブラウザ等の対応が必要な場合の対応には 非常に手がかからなくて良い ● 今回のようなインストール / ホーム画面追加さえできればいい というニーズだけなら手っ取り早くてよかった ● でも、将来的にブラウザ側が追いついてきたり、細かく カスタマイズする必要がある場合は個別実装するようにしよう

おまけ Android側でもPWACompatの メリットあり PWACompatを async 呼び出ししてい るので、ポップアップ的な表示が起きる ので自然と目が行く →PWAインストールされやすく なる！（…かも！）

ご清聴ありがとうございました！ @gatchan0807