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 for beginner#2

1,120 views

Published on

PWA勉強会 第二回の資料です

Published in: Engineering
  • Be the first to comment

PWA for beginner#2

  1. 1. 今からでもいける PWA超入門!#2 堀 正斉
  2. 2. 自己紹介 名前:堀 正斉 所属:某医療系サービス フロントエンドエンジニア 言語:CSS(sass), Javascript, Ruby on Rails 趣味:サッカー、最近は株も
  3. 3. 5,000,000,000
  4. 4. 答え:webと繋がっているデバイスの数
  5. 5. 多分こんなエコシステムはありません。
  6. 6. But
  7. 7. 今までのwebのUXって?
  8. 8. 混んでる電車の中、 急に切れる電波。 低速になって ロードを待つ。 レスポンシブ化 されていない。
  9. 9. Monthly Unique Visitor webアプリ > ネイティブアプリ 約4倍
  10. 10. Spend Time Per User webアプリ < ネイティブアプリ 約20倍
  11. 11. webの課題はスピードとエンゲージメント
  12. 12. ここでPWAの登場 主にエンゲージメント面で。
  13. 13. What’s PWA? 個人的には
 Webでできることを増やしていこうよ! みたいな考え方だと捉えています。
  14. 14. PWA化の影響(例) appのみの戦略を変更し、webappを開発。 2G回線への対応を行う。 滞在時間 3倍 データ量 1/3 ホーム画面に追加ボタンを購入画面に 進んだユーザーにのみ出すようにしている。 プッシュ通知を導入。 滞在時間   +72% 平均訪問時間 +26% 再訪問率   +50%
  15. 15. ところで
  16. 16. オフラインになると、悲しい気持ちになりますよね?
  17. 17. 可愛くデザインされたはずの恐竜も可愛くない。
  18. 18. ゲームしても最終的に虚しい。
  19. 19. ということでオフラインになった時のページを もうちょっと色々あってもいいんじゃないか?
  20. 20. 運悪くオフラインになってしまった人のために 表示するコンテンツを作ってみました
  21. 21. シーン 株を始めようと思って証券会社のサイトに行って どんな株を買おうか迷っている30歳男性。 が、悲しいことに、銘柄を検索していたら 電波が切れ、オフラインになった。 最近株のことばかり考えてるので…すみません。笑
  22. 22. デモ
  23. 23. なぜオフラインでもページが表示された? Service Workerを通じてcache APIを利用 リソースを端末にダウンロードしておく キャッシュをアプリ側にレスポンスとして返す オフラインでも、キャッシュしたデータを用いて画面表示ができた!
  24. 24. What’s service worker? バックグラウンドで起動するJavascript環境 【主に出来ること】 ・オフラインでのアプリケーションへのアクセス ・ネイティブアプリUIをwebアプリに ・プッシュ通知 ※例:日経電子版TOPページ https://r.nikkei.com/
  25. 25. service workerの特徴 ①webのライフサイクルとは全く別。 →ブラウザを閉じていても動いている ②DOMに直接アクセスできない ③ネットワークプロキシのようなもので、  ネットワークリクエストをコントロール出来る
  26. 26. service workerのライフサイクル(1) SW Client Server ←別のところで動く
  27. 27. service workerのライフサイクル(2) register SW install activate idle push fetch terminateError
  28. 28. service workerの注意点 ①対応ブラウザはChromeとFirefox SafariとEdgeは開発中。 ※Safariについてはv11.3で対応、 Edgeも次のversionで対応するぽい 参考 https://caniuse.com/#search=service https://jakearchibald.github.io/isserviceworkerready/ ②dev環境とhttps通信の環境下でないと動作しない。 →接続へのハイジャック、改ざんなどが行われてしまう  可能性があるので、これを防ぐため。
  29. 29. アプリの構成 app js css index.html offline.html sw.js style.css offline.js
  30. 30. ソースコードはこんな感じ。
  31. 31. ①register Service Workerのコントロール下に 置くページを定義する。
  32. 32. ②install 主に静的ファイルをcacheに追加。 フレームワークとか使うならここで読み込んでも良さそう。
  33. 33. ③activate ↑今回は記述してませんが。こんな感じで書きます。 Service Workerを更新するタイミングで発火。 古いキャッシュは削除して、差分を更新する。
  34. 34. ④fetch Service Worker がブラウザをコントロールしている時に リクエストが発生すると fetch イベントが発火。fetch イベントで何もしなければ、 ネットワーク経由でリクエストが処理される。
  35. 35. まとめ ・キャッシュに色々とためておくと、オフラインのページでも結構自由自在。  フレームワークとか読み込んでおくと良さそう。 ・コードを書くにあたりES6のPromiseあるいはES7のAsyc Awaitについてはちゃ んと理解しないとダメ。。(頑張ります・・・)
  36. 36. 参考サイト ①https://goo.gl/gQJ79g ②https://goo.gl/G6upQ9 ③https://goo.gl/9NFxsS ④https://goo.gl/mjhGpx ⑤https://goo.gl/vRV1VH ③が特にオススメです!
  37. 37. PWA一緒に勉強していきましょう! おしまい

×