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

1. Let’s try to use
Background Sync @_tomoko523
2019.5.26 ABC 2019 Spring

2. Tomoko Hirata
Backend Engineer (golang/php/aws/vue/node) .
Like : , , .
Account : @_tomoko523 or @tomoko523

3. ● Background sync
● オフライン対応
● Workboxでの実装
● Background syncのこれから
● 参考URL

4. Background Sync
- PWA と Service Worker
- Service Worker と Background Sync
- Background Sync とオフライン対応

5. PWA と Service Worker
PWA=Progressive Web Apps
モバイルユーザーのユーザー体験向上を目的とした
Webアプリをネイティブアプリのような動作を可能にする仕組み
Service Worker
ブラウザのバックグラウンドで動くJavascript Worker

6. Service Worker と Background Sync
Service Workerの特徴
● ネットワークプロキシとしてクライアント-サーバ間の通信を制御できる
● 独立したライフサイクルをもつイベント駆動型サービス実行基盤
https://developer.mozilla.org/ja/docs/Web/API/ServiceWorker_API/Using_Service_Workers

7. Background Sync とオフライン対応
GETリクエスト
リソースの取得
[オフライン対応]
オンライン時に
あらかじめキャッシュしておく
→ Cache API
POST/PUT/DELETEリクエスト
リソースの登録更新など
[オフライン対応]
オフライン時にリクエストを保存し
オンライン時に再度実施する
→ Background Sync API

8. オフライン対応
- 実行の流れ
- fetch,IndexedDB,sync
- syncイベント発生タイミング

9. Background sync実行の流れ
クライアントにService workerが登録される
Service Workerにsync イベントが登録される
Service Workerがサーバーとの通信可能時にsync
イベントを発火する

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. Client Server
GET
POST/PUT/DELETE
Service Worker Online
fetch

12. Client Server
GET
POST/PUT/DELETE
IndexedDB
Service Worker Offline
fetch
Push Fail request
IndexedDB: ブラウザ内にデータを保存できるキーバリュー型のストレージ

13. Client Server
GET
POST/PUT/DELETE
IndexedDB
Service Worker Online
fetch
sync
Get Fail request
& retry

14. syncイベントの実行タイミング
サーバーとの通信が可能になったと判断したタイミングで
Syncイベントが発火する（※）
オンライン時にsyncイベントの登録 → ただちに実行される
オフライン時にsyncイベントの登録 → ※のタイミングで実行
開発者ツールではApplicationタブの「sync」から実行可能

15. Workbox
- Workbox
- Queue

16. Workbox
Google製のService Worker用Javascriptライブラリ
Background Syncのライブラリは “workbox.backgroundSync”
Plugin と Queue という２つのクラスが提供されている

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. その他実装について
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名が渡される

21. Background Syncのこれから
- Safari
- Project FuguとPeriodic Background Sync

22. Safariは未対応(2019/5/26現在)
失敗したリクエストを再fetchする自前実装が必要

23. Project Fugu
Google I/O 2019の「Unlocking New Capabilities for the Web」セッションで話に
挙がったネイティブアプリ独自の機能をChromeに提供する施策
ネイティブアプリとWebアプリ間のギャップを埋めることを目的とする
PWAをネイティブアプリに近づける上で注力すべき内容であり
「Periodic Background Sync」も実装が進められている

24. https://www.chromestatus.com/feature/5689383275462656

25. 参考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