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