More Related Content
What's hot
What's hot (20)
Similar to FukuokaPWA #1 A2HSのちょっと深い話
Similar to FukuokaPWA #1 A2HSのちょっと深い話 (20)
Recently uploaded
Recently uploaded (14)
FukuokaPWA #1 A2HSのちょっと深い話
- 3. Agenda • Profile • Add to homescreenとは？ • App install bannersとは？ • bannerinstallpromptイベント • A2HSの所感 • おまけ
- 4. Profile
- 5. Profile • 氏名: 神野 真彦 • 所属: ヤフー株式会社 • 職種: エンジニア • 分野: Webフロント • Tw: @MiracleTShirt09
- 6. Favorite things 筋トレ PHP JavaScript けものフレンズ PWA WebRTC 刃牙道 千鳥 HHKB プロテイン ガンダム カンバン FaaS エルメス Kotlin サイゼリア Youtube サーバル Fate
- 7. BIG3のMAX • ベンチプレス: 75kg • デッドリフト: 100kg • スクワット: 140kg
- 9. Add to homescreenって？ • Webアプリのホーム画 面追加のこと • A2HSと略す • PWAにおいては必須の 要素とされる • 「魅力的なWebアプリ (PWA)はホーム画面に 居場所を作れる」
- 10. 対応ブラウザ(主要なやつ) • Chrome • 少なくとも49以降は対応している • Safari • 11.1/TP版 • まだ正式には採用されてない • iOS Safari • 11.3（iOS 11.3β版）に搭載されている
- 11. バージョンの調べ方 • 以下の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出来ない(はず)
- 12. Webショートカットと何が ちがうの？ • A2HSはそのWebアプリ 専用のネイティブアプ リが生成される※ • なのでドロワー画面に も表示される ※ 後述するmanifestの設定による
- 13. どうやればできるの？ • https通信 • manifestの作成 • ServiceWorkerの登録
- 14. https通信 • Service Workerの登録 でhttps通信が必要に なる • localhostなら不要 • ぱっと試したいなら firebaseとか使うと良 いよ
- 15. manifestの作成 • Webアプリの設定を記 述するファイル • name, short_name, start_url, icon(192) があればとりあえず動 くよ • start_urlのにパラメ タを記述するとA2HSか ら起動したかどうか判 定できるようになるよ
- 16. Service Workerの登録1 • 右の内容のファイルを ドキュメントルートに 配置してね！ • A2HSするだけなら空の fetchイベントリスナー を登録するだけでOK！ • 最低限の実装だよ！ • これだけで一応オフラ イン対応しているとみ なされる(Chromeでは)
- 19. 動作確認(PC) • Chromeの検証ツールからA2HS可能かどうか確認することができる • Application > ManifestのAdd to homescreenをクリック これが出ればOK
- 21. App Install Bannersっ て？ • A2HSをしてもらうため の訴求バナー • これはChrome(ブラウ ザ)が後述の条件に当 てはまる際に表示する
- 22. 表示条件 • HTTPS通信されている • manifestにname, short_name, 192x192のicon, start_urlが記述されている • Service Workerが登録されている • 2週間以内に2回そのページに訪問し、その間隔が5 分以上あいている • A2HS(そのページ/サイトのホーム画面アイコンが無 い)されていない
- 25. bannerinstallpropt イベントって？ • App Install Bannerが 表示される際に発火さ れるイベント • このイベントのリスナー を記述することでApp Install Bannerの制御 ができる
- 26. バナーを表示しない • App Install Bannerの表示は原則アプリケーション 側で制御できない • なのでアプリ・サイトの状態によっては出しなくな いときに出てしまう可能性がある • その場合は次のコードを記述することでバナー表示 を抑制することができる
- 27. バナーを表示しない
- 29. A2HSのログを落とす • ユーザがApp Install Bannerに対してどのようなリ アクションをとったのかログに落としたい場合は次 のようなコードを記述する
- 30. A2HSのログを落とす
- 31. App Install Bannerの表示 を先送りする • 次のようなコードを記 述するとApp Install Bannerの表示を先送り することができる • Instagramなどは、こ の先送りを利用して事 前訴求モーダル画面を 表示している https://www.instagram.com/
- 32. App Install Bannerの表示 を先送りする • 先送りのコード • この例ではReactのstateにイベントオブジェクトを 持たせている
- 33. App Install Bannerの表示 を先送りする • 先送りしたApp Install Bannerの表示をするコード • 例によってReactを使用しています
- 35. A2HS所感
- 36. すっごーーい！
- 37. メリット • 手軽にネイティブアプリっ ぽいものがつくれる • 手軽に起動起点をとれる • (standalone以上だと)検 索ペインからの流出が防 げる • SPAとの親和性が高い(ブ ラウザ機能が制限される ので)
- 38. 気をつけたいこと • A2HSすると一部のブラ ウザ機能(主にタブ)が 使用できなくなるので UXが落ちる場合がある • 良くも悪くも通常のWeb ページよりブラウザの 実装に挙動が左右され る • ブラウザによって manifestの解釈がこと なる
- 40. おまけ
- 41. SafariでのA2HS • TP版と11.3でようやく WebAppManifestが実装 されたので試してみた • Androidと異なり、戻 るのナビゲーションも 無いので他社サイトに 飛ぶと戻ってこれない • Chromeに比べるとまだ まだUXの見直しが必要
- 44. その他 • Chromeは多分PWA機能 のABテストをしている • AndroidとChromeの バージョンが全く同じ でも細かい所が違って たりする • 文言とかも微妙にちがっ たりする • 最近落ち着いてきた？ ここらへんの文言 とか
- 45. 参考URL(おすすめ書籍) ＿人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人＿ ＞ Add to homescreen以外の説明もあるよ！！！！ ＜ ￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣