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