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.

Let's try to use Background sync

287 views

Published on

Android Bazaar and Conference 2019 Spring (ABC2019Spring)

PWAのコンセプトの一つであるオフラインサポートのうち、"Background Sync"というバックグラウンドでデータを送受信する仕組みがあります。 本セッションでは、Service worker上でBackground Sync APIをどのように利用するか、またどのようにオフラインサポートを実現するかをまとめた内容を実際のコードやWorkboxを使った実装を交えて解説します。

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Let's try to use Background sync

  1. 1. Let’s try to use Background Sync  @_tomoko523 2019.5.26 ABC 2019 Spring
  2. 2. Tomoko Hirata Backend Engineer (golang/php/aws/vue/node) . Like : , , . Account : @_tomoko523 or @tomoko523
  3. 3. ● Background sync ● オフライン対応 ● Workboxでの実装 ● Background syncのこれから ● 参考URL
  4. 4. Background Sync - PWA と Service Worker - Service Worker と Background Sync - Background Sync とオフライン対応
  5. 5. PWA と Service Worker PWA=Progressive Web Apps モバイルユーザーのユーザー体験向上を目的とした Webアプリをネイティブアプリのような動作を可能にする仕組み Service Worker ブラウザのバックグラウンドで動くJavascript Worker
  6. 6. Service Worker と Background Sync Service Workerの特徴 ● ネットワークプロキシとしてクライアント-サーバ間の通信を制御できる ● 独立したライフサイクルをもつイベント駆動型サービス実行基盤 https://developer.mozilla.org/ja/docs/Web/API/ServiceWorker_API/Using_Service_Workers
  7. 7. Background Sync とオフライン対応 GETリクエスト リソースの取得 [オフライン対応] オンライン時に あらかじめキャッシュしておく → Cache API POST/PUT/DELETEリクエスト リソースの登録更新など [オフライン対応] オフライン時にリクエストを保存し オンライン時に再度実施する → Background Sync API
  8. 8. オフライン対応 - 実行の流れ - fetch,IndexedDB,sync - syncイベント発生タイミング
  9. 9. Background sync実行の流れ クライアントにService workerが登録される Service Workerにsync イベントが登録される Service Workerがサーバーとの通信可能時にsync イベントを発火する
  10. 10. if ('serviceWorker' in navigator && 'SyncManager' in window) { navigator.serviceWorker.ready.then(function(reg) { return reg.sync.register('tag-name'); }).catch(function() { // system was unable to register for a sync, // this could be an OS-level restriction postDataFromThePage(); }); } else { // serviceworker/sync not supported postDataFromThePage(); } syncイベントを登録
  11. 11. Client Server GET POST/PUT/DELETE Service Worker Online fetch
  12. 12. Client Server GET POST/PUT/DELETE IndexedDB Service Worker Offline fetch Push Fail request IndexedDB: ブラウザ内にデータを保存できるキーバリュー型のストレージ
  13. 13. Client Server GET POST/PUT/DELETE IndexedDB Service Worker Online fetch sync Get Fail request & retry
  14. 14. syncイベントの実行タイミング サーバーとの通信が可能になったと判断したタイミングで Syncイベントが発火する(※) オンライン時にsyncイベントの登録 → ただちに実行される オフライン時にsyncイベントの登録 → ※のタイミングで実行 開発者ツールではApplicationタブの「sync」から実行可能
  15. 15. Workbox - Workbox - Queue
  16. 16. Workbox Google製のService Worker用Javascriptライブラリ Background Syncのライブラリは “workbox.backgroundSync” Plugin と Queue という2つのクラスが提供されている
  17. 17. Queueの登録 let bgQueue = new workbox.backgroundSync.Queue('bg-queue-name'); self.addEventListener('fetch', (e) => { if (!e.request.url.startsWith('http://httpbin.org/post')) { return; } const clone = e.request.clone(); const promiseChain = fetch(e.request).catch((err) => { return bgQueue.pushRequest({request: clone}); }); e.waitUntil(promiseChain); }); registration.sync.register()を実行 fetch失敗時にリクエストを保存 ※実際に動かすには servieworker登録処理やconfigの設定が必要です
  18. 18. その他実装について workbox.core.setCacheNameDetails({prefix: "bgsync"}); self.__precacheManifest = [].concat(self.__precacheManifest || []); workbox.precaching.precacheAndRoute(self.__precacheManifest, {}); オフラインキャッシュ workbox.core.skipWaiting(); workbox.core.clientsClaim(); 初期表示からSWをControl配下に置く →最初からfetch eventをハンドルできる self.addEventListener('sync', (e) => { // console.log('sync event') // console.log(e) }); sync event 発生時に処理を実行 ここのevent引数に 登録したtag名が渡される
  19. 19. Background Syncのこれから - Safari - Project FuguとPeriodic Background Sync
  20. 20. Safariは未対応(2019/5/26現在) 失敗したリクエストを再fetchする自前実装が必要
  21. 21. Project Fugu Google I/O 2019の「Unlocking New Capabilities for the Web」セッションで話に 挙がったネイティブアプリ独自の機能をChromeに提供する施策 ネイティブアプリとWebアプリ間のギャップを埋めることを目的とする PWAをネイティブアプリに近づける上で注力すべき内容であり 「Periodic Background Sync」も実装が進められている 
  22. 22. https://www.chromestatus.com/feature/5689383275462656
  23. 23. 参考URL ● Service worker の使用 https://developer.mozilla.org/ja/docs/Web/API/ServiceWorker_API/Using_Service_Workers ● Introducing Background Sync https://developers.google.com/web/updates/2015/12/background-sync ● Workbox Background Sync https://developers.google.com/web/tools/workbox/modules/workbox-background-sync ● workbox.backgroundSync.Queue https://developers.google.com/web/tools/workbox/reference-docs/latest/workbox.backgroundS ync.Queue ● Unlocking New Capabilities for the Web https://developers.google.com/web/updates/capabilities ● Tagged in Project Fugu https://medium.com/dev-channel/tagged/project-fugu ● Periodic Background Sync https://www.chromestatus.com/feature/5689383275462656 ● Issue 925297: Implement Periodic Background Sync https://bugs.chromium.org/p/chromium/issues/detail?id=925297

×