PWA Beginners 勉強会 #4 A2HSのちょっと深い話v2

PWA Beginners 勉強会 #4 A2HSのちょっと深い話v2

1. 1. 2018/05/24（木）PWA Beginners #4 @MiracleTShirt09 Add to homescreen のちょっと深い話v2
2. 2. demp app • デモアプリ • https://a2hs-demo.firebaseapp.com/ • ソースコード • https://github.com/MasahikoJinno/pwa-demo
3. 3. Agenda • Profile • Add to homescreenとは？ • App install bannersとは？ • bannerinstallpromptイベント • Androidスマホ以外におけるA2HS • A2HSの所感 • おまけ
4. 4. Profile
5. 5. Profile • 氏名: 神野 真彦 • 所属: ヤフー株式会社 • 職種: エンジニア • 分野: フロントエンド？ • Tw: @MiracleTShirt09
6. 6. Favorite things 筋トレ PHP JavaScript けものフレンズ PWA WebRTC 刃牙道 千鳥 HHKB プロテイン ガンダム カンバン FaaS エルメス Kotlin サイゼリア Youtube サーバル Fate
7. 7. BIG3のMAX • ベンチプレス: 80kg • デッドリフト: 100kg • スクワット: 140kg
8. 8. 宣伝(執筆しました) これ！！！
9. 9. Add to homescreenとは？
10. 10. Add to homescreenって？ • Webアプリのホーム画 面追加のこと • A2HSと略す • PWAにおいては必須の 要素とされる • 「魅力的なWebアプリ (PWA)はホーム画面に 居場所を作れる」
11. 11. 対応ブラウザ(主要なやつ) • Chrome • 少なくとも49以降は対応している • iOS Safari • 11.3（iOS 11.3β版）に搭載されている • Edge • 17以降 ※ 触ったことは無いよ
12. 12. バージョンの調べ方 • 以下の2つの技術に対応している必要がある • Service Worker • Web App Manifest • can i useで調べよう • https://caniuse.com/#search=manifest • https://caniuse.com/#search=service%20worker • EdgeはService Workerには対応しているがWeb App Manifestには対応していないのでA2HS出来ない(はず)
13. 13. Webショートカットと何が ちがうの？ • A2HSはそのWebアプリ 専用のネイティブアプ リが生成される※ • なのでドロワー画面に も表示される ※ 後述するmanifestの設定による
14. 14. どうやればできるの？ • https通信 • manifestの作成 • ServiceWorkerの登録
15. 15. https通信 • Service Workerの登録 でhttps通信が必要に なる • localhostなら不要 • ぱっと試したいなら firebaseとか使うと良 いよ
16. 16. manifestの作成 • Webアプリの設定を記 述するファイル • name, short_name, start_url, icon(192) があればとりあえず動 くよ • start_urlのにパラメ タを記述するとA2HSか ら起動したかどうか判 定できるようになるよ
17. 17. Service Workerの登録1 • 右の内容のファイルを ドキュメントルートに 配置してね！ • A2HSするだけなら空の fetchイベントリスナー を登録するだけでOK！ • 最低限の実装だよ！ • これだけで一応オフラ イン対応しているとみ なされる(Chromeでは)
18. 18. Service Workerの登録2 • 右のコードをページに 埋め込んでね→
19. 19. 動作確認(スマホ) • Chromeの場合は画面右 上のメニューから「ホー ム画面追」をタップす るとAndroidのホーム 画面にWebアプリを追 加することができる
20. 20. 動作確認(PC) • Chromeの検証ツールからA2HS可能かどうか確認することができる • Application > ManifestのAdd to homescreenをクリック これが出ればOK
21. 21. App Install Bannersとは？
22. 22. App Install Bannersっ て？ • A2HSをしてもらうため の訴求バナー • これはChrome(ブラウ ザ)が後述の条件に当 てはまる際に表示する
23. 23. 表示条件 • HTTPS通信されている • manifestにname, short_name, 192x192のicon, start_urlが記述されている • Service Workerが登録されている • 2週間以内に2回そのページに訪問し、その間隔が5 分以上あいている • A2HS(そのページ/サイトのホーム画面アイコンが無 い)されていない
24. 24. 動作確認 • 条件を満たした情報でページにアクセスする • Chromeの場合は設定＞プライバシー＞閲覧履歴デー タを消去するからデータを消すと再度バナーの表示 確認を行うことができる
25. 25. bannerinstallpromptイベント
26. 26. bannerinstallpropt イベントって？ • App Install Bannerが 表示される際に発火さ れるイベント • このイベントのリスナー を記述することでApp Install Bannerの制御 ができる
27. 27. バナーを表示しない • App Install Bannerの表示は原則アプリケーション 側で制御できない • なのでアプリ・サイトの状態によっては出しなくな いときに出てしまう可能性がある • その場合は次のコードを記述することでバナー表示 を抑制することができる
28. 28. バナーを表示しない
29. 29. バナーを表示しない • 動作確認はChromeの検証ツールのconsoleでやる
30. 30. A2HSのログを落とす • ユーザがApp Install Bannerに対してどのようなリ アクションをとったのかログに落としたい場合は次 のようなコードを記述する
31. 31. A2HSのログを落とす
32. 32. App Install Bannerの表示 を先送りする • 次のようなコードを記 述するとApp Install Bannerの表示を先送り することができる • Instagramなどは、こ の先送りを利用して事 前訴求モーダル画面を 表示している https://www.instagram.com/
33. 33. App Install Bannerの表示 を先送りする • 先送りのコード • この例ではReactのstateにイベントオブジェクトを 持たせている
34. 34. App Install Bannerの表示 を先送りする • 先送りしたApp Install Bannerの表示をするコード • 例によってReactを使用しています
35. 35. こんなかんじ • 動きはInstagr○mの丸パクリです。
36. 36. Androidスマホ以外（おもにiOS） におけるA2HS
37. 37. SafariでのA2HS • iOS11.3(Safari 11.1) でようやく WebAppManifestが実装 されたので試してみた • Androidと異なり、戻 るのナビゲーションも 無いので他社サイトに 飛ぶと戻ってこれない • Chromeに比べるとまだ まだUXの見直しが必要
38. 38. iPhone 7だとこんな感じ
39. 39. なぜかiPhone X だとナビゲーショ ンバーが表示さ れない・・・ ここ
40. 40. 別ドメイン(サブドメインが違うだけでも)のリ ンクを踏むとSafariで開く・・・
41. 41. iOSのA2HS致命的だと思う ところ • 別ドメインページはSafariをひら く(先述) • Cookieなどの情報がSafariと別管 理になっている • 「戻る」や「ページの更新」がで きない
42. 42. その他Android(Chrome)と の細かい違い • App Install Bannersは無い • つまりログを落としたり事前訴求したりすること もできない • 必須のアイコンサイズは512x512(Androidは192x192) • standalone, fullscreenの差が無い • 細かくないけど・・・ • minimal-uiはWebショートカット扱い • Chromeではちゃんとアプリを生成する
43. 43. PCでのA2HS • Macだとランチャー画面、Winだとスタートメニューに追 加されます(開くのはタダのChrome) • GoogleがPC版のPWAを2018年中にサポート開始するとの情 報があるので今後はもう少しUX良くなるかも
44. 44. A2HS所感
45. 45. メリット • 手軽にネイティブアプリっ ぽいものがつくれる • 手軽に起動起点をとれる • (standalone以上だと)検 索ペインからの流出が防 げる • SPAとの親和性が高い(ブ ラウザ機能が制限される ので)
46. 46. 気をつけたいこと • A2HSすると一部のブラ ウザ機能(主にタブ)が 使用できなくなるので UXが落ちる場合がある • 良くも悪くも通常のWeb ページよりブラウザの 実装に挙動が左右され る • ブラウザによって manifestの解釈がこと なる
47. 47. 気をつけたいこと • 別ウインドウで開くリ ンク(target=“_blanc”) は別アプリ(シングル タブのChrome)が開く • 別アプリ開いたら離脱 率上がりそう・・・
48. 48. iOSはまだ様子見かな・・・ • iOSはまだPWA(A2HS)の機能が充実してない • スワイプで戻る/プル2リフレッシュくら い実装してほしい・・・ • 別ドメインのサイト開くときのUXももう ちょい考えて欲しい・・・ • GoogleもiOSにはPWA版のGoogle MAPを提供 していない(重要) • iOSにはService Workerの一部機能(キャッ シュ)のみ適応が無難かも
49. 49. その他(どうでもいい) • Chromeは多分A2HS機能 のABテストをしている • AndroidとChromeのバー ジョンが全く同じでも 細かい所が違ってたり する • 文言とかも微妙にちがっ たりする • 最近落ち着いてきた？ ここらへんの文言 とか
50. 50. ご静聴ありがとうござい ましたッッ！！