85

Introduction to Service Worker

Embed Size (px)

Citation preview

Page 1: Introduction to Service Worker
Page 2: Introduction to Service Worker

!

Page 3: Introduction to Service Worker
Page 4: Introduction to Service Worker
Page 5: Introduction to Service Worker
Page 6: Introduction to Service Worker
Page 7: Introduction to Service Worker
Page 8: Introduction to Service Worker
Page 9: Introduction to Service Worker
Page 10: Introduction to Service Worker
Page 11: Introduction to Service Worker
Page 12: Introduction to Service Worker

"# $

Page 13: Introduction to Service Worker

%&

Page 14: Introduction to Service Worker
Page 15: Introduction to Service Worker
Page 16: Introduction to Service Worker
Page 17: Introduction to Service Worker
Page 18: Introduction to Service Worker
Page 19: Introduction to Service Worker
Page 20: Introduction to Service Worker

オフラインファーストとは

Page 21: Introduction to Service Worker
Page 22: Introduction to Service Worker
Page 23: Introduction to Service Worker
Page 24: Introduction to Service Worker
Page 25: Introduction to Service Worker
Page 26: Introduction to Service Worker
Page 27: Introduction to Service Worker
Page 28: Introduction to Service Worker
Page 29: Introduction to Service Worker
Page 30: Introduction to Service Worker
Page 31: Introduction to Service Worker
Page 32: Introduction to Service Worker
Page 33: Introduction to Service Worker

' ( ) * +

#

, &

&&

-

- &

&&

Page 34: Introduction to Service Worker
Page 35: Introduction to Service Worker

var value = localStorage['key']; var json = JSON.parse(value); localStorage['key'] = JSON.stringify(json);

Page 36: Introduction to Service Worker

' ( ) * +

#

, -

--

--

- -

-

Page 37: Introduction to Service Worker
Page 38: Introduction to Service Worker

var db; var objectStore; var req = window.indexedDB.open('dbname', 3);

req.onsuccess = function(event) { db = event.target.result; };

req.onupgradeneeded = function(event) { db = event.target.result;

objectStore = db.createObjectStore('name', { keyPath: 'key' }); };

Page 39: Introduction to Service Worker

' ( ) * +

#

, -

--

--

- -

-

Page 40: Introduction to Service Worker

<html manifest=app.mf>

Page 41: Introduction to Service Worker

CACHE MANIFEST

# Resource to cache CACHE: index.html stylesheet.css image.png script.js

# Resource to bypass NETWORK: login.php /api/data

# Fallback URLs FALLBACK: / /offline.html

Page 42: Introduction to Service Worker
Page 43: Introduction to Service Worker
Page 44: Introduction to Service Worker
Page 45: Introduction to Service Worker

if (navigator.onLine) { $.ajax({ url: '/api/data', method: 'get' }).done(function (data) { render(data); }); } else { var cacheData = localStorage.getItem('key'); render(JSON.parse(cacheData)); }

Page 46: Introduction to Service Worker
Page 47: Introduction to Service Worker
Page 48: Introduction to Service Worker
Page 49: Introduction to Service Worker
Page 50: Introduction to Service Worker
Page 51: Introduction to Service Worker
Page 52: Introduction to Service Worker
Page 53: Introduction to Service Worker

var sw = navigator.serviceWorker; sw.register('sw.js').then(function (res) { console.log('sw.js is installed!'); }, function (error) { console.log('sw.js is not installed...'); });

Page 54: Introduction to Service Worker
Page 55: Introduction to Service Worker
Page 56: Introduction to Service Worker
Page 57: Introduction to Service Worker

self.addEventListener('fetch', function (e) { console.log('Request in Browser');

e.respondWith( new Response('Not Found', { status: 404 }) ); });

Page 58: Introduction to Service Worker
Page 59: Introduction to Service Worker
Page 60: Introduction to Service Worker
Page 61: Introduction to Service Worker

fetch('/url/json').then(function (res) { return res.json(); }).then(function (json) { console.log(json); });

Page 62: Introduction to Service Worker
Page 63: Introduction to Service Worker
Page 64: Introduction to Service Worker
Page 65: Introduction to Service Worker
Page 66: Introduction to Service Worker

caches.open('cache-key').then(function(cache) { return cache.addAll([ 'js/app.js', 'css/app.css', 'img/image.png' ]); });

caches.match(e.request).then(function (res) { return res; });

Page 67: Introduction to Service Worker
Page 68: Introduction to Service Worker
Page 69: Introduction to Service Worker
Page 70: Introduction to Service Worker

var sw = navigator.serviceWorker; sw.ready.then(function(reg) { reg.syncManager.register({ id: "periodicSync", minDelay: 60 * 60 * 1000, minPeriod: 12 * 60 * 60 * 1000, allowOnBattery: true idleRequired: false }).then(function() { // Success }); });

Page 71: Introduction to Service Worker
Page 72: Introduction to Service Worker
Page 73: Introduction to Service Worker

var sw = navigator.serviceWorker; sw.ready.then(function(reg) { reg.pushManager.subscribe().then( function(subscription) { // Success console.log(subscription.subscriptionId); console.log(subscription.endpoint); } }); });

Page 74: Introduction to Service Worker
Page 75: Introduction to Service Worker
Page 76: Introduction to Service Worker
Page 77: Introduction to Service Worker

' ( ) * +

#

,-

-

-

&&

&

-

Page 78: Introduction to Service Worker
Page 79: Introduction to Service Worker
Page 80: Introduction to Service Worker
Page 81: Introduction to Service Worker
Page 82: Introduction to Service Worker

e.respondWith( caches.open(CACHE_KEY).then(function (cache) { return cache.match(e.request) .then(function (response) { if (response) { return response; } else { return fetch(e.request.clone()) .then(function (res) { cache.put(e.request, res.clone()); return res; }); } }); }) );

Page 83: Introduction to Service Worker
Page 84: Introduction to Service Worker
Page 85: Introduction to Service Worker

.

!

/