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

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

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

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

PWACompatのGitHub URLはこちら

https://github.com/GoogleChromeLabs/pwacompat

Bf04d1ee6fa2216133b23af8f609c70a?s=128

がっちゃん

May 15, 2019
Tweet

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. まずは普通にチュートリアルに沿って 実装してみた

  5. None
  6. でも

  7. None
  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.

    完了!
  16. None
  17. まとめ • 過去バージョン・ブラウザ等の対応が必要な場合の対応には 非常に手がかからなくて良い • 今回のようなインストール / ホーム画面追加さえできればいい というニーズだけなら手っ取り早くてよかった •

    でも、将来的にブラウザ側が追いついてきたり、細かく カスタマイズする必要がある場合は個別実装するようにしよう
  18. おまけ Android側でもPWACompatの メリットあり PWACompatを async 呼び出ししてい るので、ポップアップ的な表示が起きる ので自然と目が行く →PWAインストールされやすく なる!(…かも!)

  19. ご清聴ありがとうございました!
 @gatchan0807