皆艶姻厩庄界艶安看姻一艶姻でつくる安艶恢の隆栖
- 1. Create a Web future with ServiceWorker
- 2. ト`クテ`マ ¢ PWAのF彜 ¢ Offline Web App ¢ DOMとのB亊 ¢ バックグラウンド宥佚
- 8. ServiceWorkerできること ? レスポンス啜きQえ ? プッシュ宥岑 ? オフラインキャッシュ ? バックグラウンド宥佚
- 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. ServiceWorkerjs 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はsubmitrに柵ばれる //dataに秘薦デ`タ //addIndexedDbはindexeddbに鞠hするメソッドを喘吭
- 21. ServiceWorkerjs 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. ServiceWorkerjs 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) }) ) } }) g佩が頼阻するまで棋つ
- 24. デバッグつらいT T