ServiceWorkerでつくるWebの未来
- 1. Create a Web future with ServiceWorker
- 2. トークテーマ ● PWAの現状 ● Offline Web App ● DOMとの連携 ● バックグラウンド通信
- 8. ServiceWorkerできること › レスポンス動的書き換え › プッシュ通知 › オフラインキャッシュ › バックグラウンド通信
- 9. 2. Offline Web app Cache storage
- 15. window.onload = function() { target = document.querySelector(".next") if(target) { target.addEventListener('mousedown', function(event) { navigator.serviceWorker .controller .postMessage('/list.html') }) } } クライアント側js
- 16. ServiceWorker側js self.addEventListener('message', function(event) { fetch(new Request(event.data, {mode: 'no-cors'})) .then(function(response) { caches.open(CACHE_NAME).then(function(cache) { cache.put(event.data, response) }) }) })
- 20. クライアント側js function sendMessageWithSync(data) { addIndexedDb(data).then(function(result) { return navigator.serviceWorker.ready.then(function(reg) { return reg.sync.register('send-talk') }) }) } //sendMessageWithSyncはsubmit時に呼ばれる //dataに入力データ //addIndexedDbはindexeddbに登録するメソッドを用意
- 21. ServiceWorker側js self.addEventListener('sync', function(event) { if(event.tag == 'send-talk') { event.waitUntil( getMessage().then(function(request) { return fetch(url,{method:'POST', body: JSON.stringify(data), credentials: 'include', mode: 'no-cors', headers: {'content-type': 'application/json'} }) }) .then(function() { return deleteMessage(1) }) ) } }) //getMessage: indexeddbからデータを取得する
- 22. ServiceWorker側js self.addEventListener('sync', function(event) { if(event.tag == 'send-talk') { event.waitUntil( getMessage().then(function(request) { return fetch(url,{method:'POST', body: JSON.stringify(data), credentials: 'include', mode: 'no-cors', headers: {'content-type': 'application/json'} }) }) .then(function() { return deleteMessage(1) }) ) } }) 実行が完了するまで待つ
- 24. デバッグつらい（T T）