Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

PWAの必須要素であるAdd to homescreenの説明。
Web App Manifestや、Android/iOSでの挙動の差異、ハマりどころなどを解説。

  • Login to see the comments

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. ご静聴ありがとうござい ましたッッ!!

×