2015/2/21に開催されたFrontrend Conferenceの「Introduction to Service Worker」のセッションの資料です。
*OUSPEVDUJPOUP4FSWJDF8PSLFS'SPOUSFOE$POGFSFODF
View Slide
!DI!
4FOTVJ4IPHP&OHJOFFSBU$ZCFS"HFOU *OD'SPOUFOEⰋ菙/PEFKTהַ&4הַ
ؿٗٝزؒٝسؒٝآص،균䧭铣劤8%#13&448FCؿٗٝزؒٝس剑简
㛇燉ַַ8FC$PNQPOFOUT䗡䎿鍑铡։➬圫ַ㹋鄲תד椚鍑ׅ։IUUQIUNMFYQFSUTKQTFSJFTXFCDPNQPOFOUT
8FC《䋆ֻ橆㞮ך鹌⻉
طحزٙ٦ؙהع٦سؐؑ،
ع٦سؐؑ،ךألحؙ䱿獳J1IPOFJ1IPOF4"QQMF"()["QQMF"()[.FNPSZ(#.FNPSZ.#
ػا؝ֿׁٝהזָٌغ؎ٕع؎ألحؙ⻉ָ滠㹋ח鹌דֹגְ
ٌغ؎ٕر٦ة㔐简ךⵃ欽罏劢⢪欽-5&((˟筨満չ䎂䧭䎃晛䞔㜠鸐⥋涯剅*$5ךⵃ欽橆㞮ך㢌⻉պ
( -5&ך兛⿹ָ鹌ךך(כה劢ח㢳ְكأزؒؿؓ٦ز׃˘
رغ؎أה㛇㖑㽷הך騃ꨄח֮黪誊暟䒉暟٥瑞孡ٖ؎ذٝء٦ך銲㔓"# $
طحزٙ٦ؙכع٦سؐؑ،קו㸜㹀׃גְזְ%&
頾蚚ַֽץֹכطحزٙ٦ؙדכזֻع٦سؐؑ،
ٌغ؎ٕرغ؎أך兛⿹װ8FC䪮遭ך鹌⻉הⰟחػؿؓ٦وٝأָ㉏
)JHI1FSGPSNBODF8FC'SPOUFOEIUUQTTQFBLFSEFDLDPNBIPNVIJHIQFSGPSNBODFXFCGSPOUFOE
)JHI1FSGPSNBODF#SPXTFS/FUXPSLJOHIUUQDIJNFSBMBCTPSFJMMZDPNCPPLT
馄㣐✲կדծؔؿٓ؎ٝך儗ח歗ָ溪涯זֿהכ劢鍑寸˘կ
ؔؿٓ؎ٝؿ؋٦أزהכؔؿٓ؎ٝ8FC㹋植ׅ䪮遭4FSWJDF8PSLFSJTDPNJOH
ΦϑϥΠϯϑΝʔετͱ
ؔؿٓ؎ٝ䲿ח8FC،فٔ⡲ֿה
0JOF'JSTUˊ"CFUUFS)5.-6TFS&YQFSJFODFIUUQCMPHKPFMBNCFSUDPVLPJOFSTUBCFUUFSIUNMVTFSFYQFSJFODF
ؔؿٓ؎ٝ8FCךًٔحزؔؿٓ؎ٝד،ؙإأדֹ琎噰涸חٍؗحءُ撑ׅךד넝鸞طحزٙ٦ؙ䌒㚖眍秈〳腉
ؔؿٓ؎ּֽٝדכזְ㸣Ⰻזؔؿٓ؎ֽٝדכזֻ鴟㞮ך㖑װ㖑♴ꉟך״ֲז籬ָꨇְ橆㞮ח㼎׃ג؟ه٦زדֹ
ط؎ذ؍ـך䮶莸ְח鵚בֻ؎ٝأز٦ٕ儗ח䲽歗ٔا٦أ然⥂ؔؿٓ؎ٝ儗ח歗ָ溪涯חזזְ鸐⥋דֹזַֿה䠐陎ׇׁזְ鏣鎘
ؔؿٓ؎ٝכ堣腉ךמהאٔ،ٕة؎ي䚍銲実ׁ،فٔחכ♶ぢֹ铣⚥䗰٥⽯儗䚍ָ♶銲ז箟꧊ד֮ל˘،فٔ؛٦ءّٝך堣腉ךמהאח麓ֺזְ
ؔؿٓ؎ٝ⻉ָ姻纏דכזְ
דծ嗚鎢כ⳿勻
ؔؿٓ؎ٝ8FC㹋植ׅ䪮遭
ꟼ鸬ׅـٓؐؠ"1*OBWJHBUPSPO-JOF'JMF4ZTUFN8FC4UPSBHFJOEFYFE%#"QQMJDBUJPO$BDIF
OBWJHBUPSPO-JOFؔٝٓ؎ַٝוֲַ《䖤POMJOFPJOF؎كٝزـٓؐؠ؟ه٦زקר㸣✪
'JMF4ZTUFN㣐ֹז؟؎ؤךؿ؋؎ٕך⥂㶷ぢֽꬊず劍㘗"1*زٓٝؠؙءّٝꬊ㼎䘔
'JMF4ZTUFN' ( ) * +#, &&&-- &&&
8FC4UPSBHF,FZ7BMVF䕎䒭דر٦ة⥂㶷_.#ず劍㘗ךءٝفٕז"1*㼰ꆀךر٦ة䲿ה׃גְ
var value = localStorage['key'];var json = JSON.parse(value);localStorage['key'] = JSON.stringify(json);
8FC4UPSBHF' ( ) * +#, ------ --
JOEFYFE%#,FZ7BMVF䕎䒭דر٦ة⥂㶷_.#ꬊず劍㘗ךװװ醱꧟ז"1*؎ٝرحؙأ⢪넝鸞ז،ؙإأغ٦آّصؚٝהزٓٝؠؙءّٝ
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'});};
JOEFYFE%#' ( ) * +#, ------ --
"QQMJDBUJPO$BDIFوصؿؑأزؿ؋؎ٕחٍؗحءُ㹀纏
CACHE MANIFEST# Resource to cacheCACHE:index.htmlstylesheet.cssimage.pngscript.js# Resource to bypassNETWORK:login.php/api/data# Fallback URLsFALLBACK:/ /offline.html
⽃秪ח鋅ִג醱꧟ז"QQMJDBUJPO$BDIF㉏겗
"QQMJDBUJPO$BDIFךꨇ׃ׁ㹀纏⯋ך)5.-ل٦آٍؗحءٍُؗحءُ稢װַח؝ٝزٗ٦ٕ♶〳+BWB4DSJQUַٍؗحءُך乼⡲♶〳长ղך➬圫♳ծ鏣鎘ָ䓼ⵖׁ
POMJOF"1*4UPSBHF"1*
if (navigator.onLine) {$.ajax({url: '/api/data',method: 'get'}).done(function (data) {render(data);});} else {var cacheData = localStorage.getItem('key');render(JSON.parse(cacheData));}
"QQMJDBUJPO$BDIFד갹䓸
ꟼ鸬ׅـٓؐؠ"1*OBWJHBUPSPO-JOF'JMF4ZTUFN8FC4UPSBHFJOEFYFE%#"QQMJDBUJPO$BDIF4FSWJDF8PSLFS̒/FX
4FSWJDF8PSLFSJTDPNJOH
넝堣腉זٗ٦ٕؕفٗؗء4FSWJDF8PSLFSכ+BWB4DSJQUד㹋鄲ׅٗ٦ٕؕفٗؗءך״ֲזך
4FSWJDF8PSLFS+BWB4DSJQU8PSLFSךמהא)551ؙٔؒأزך嗚濼ה何甑'FUDI"1*⢪ٔا٦أך《䖤$BDIF"1*⢪ٍؗحءُך盖椚غحؙؚٓؐٝسず劍#BDLHSPVOE4ZOD؟٦غ٦فحءُך「⥋8FC1VTI"1*
+BWB4DSJQU8PSLFSךמהא
ـٓؐؠ4FSWJDF8PSLFS4FSWJDF8PSLFSך涫ꐮ4FSWJDF8PSLFS涫ꐮ
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...');});JO#SPXTFS
)551ؙٔؒأزך嗚濼ה何甑
ـٓؐؠ4FSWJDF8PSLFSؙٔؒأز嗚濼؟٦غ٦)551ؙٔؒأز涪欰չֶծؙٔؒأزպGFUDI؎كٝز涪欰
ـٓؐؠ4FSWJDF8PSLFSؙٔؒأز何甑؟٦غ٦)551ؙٔؒأز涪欰չ䩛חٖأهٝأպ
self.addEventListener('fetch', function (e) {console.log('Request in Browser');e.respondWith(new Response('Not Found', {status: 404}));});JO4FSWJDF8PSLFS
'FUDI"1*⢪ٔا٦أך《䖤
'FUDI"1*הכٔا٦أ《䖤ך倜ז"1*1SPNJTFك٦أך"1*鏣鎘9)3״⡚ٖكٕ➙ךהֿ4FSWJDF8PSLFS؝ٝذؗأز㼔欽
4FSWJDF8PSLFS'FUDI"1*ךⵃ欽؟٦غ٦'FUDI"1*דٔا٦أ《䖤
fetch('/url/json').then(function (res) {return res.json();}).then(function (json) {console.log(json);});JO4FSWJDF8PSLFS
'FUDI"1*鍑铡ծתכ8FCחְֶג'FUDIׅהכ⡦ַIUUQKYDLIBUFOBCMPHDPNFOUSZXIBUXHGFUDI
$BDIF"1*⢪ٍؗحءُך盖椚
$BDIF"1*הכٔا٦أך宕竲涸ٍؗحءُׅ"1*1SPNJTFك٦أך"1*鏣鎘➙ךהֿ4FSWJDF8PSLFS؝ٝذؗأز㼔欽
4FSWJDF8PSLFS$BDIF"1*ךⵃ欽$BDIF"1*$BDIF"1*⢪גٔا٦أ涫ꐮ٥撑
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;});JO4FSWJDF8PSLFS
4FSWJDF8PSLFSDBDIFQPMZMMIUUQHJUIVCDPNDPPOTUBDBDIFQPMZMM
غحؙؚٓؐٝسず劍#BDLHSPVOE4ZOD
ـٓؐؠ4FSWJDF8PSLFS涫ꐮ儗ח♧㹀ךワ劍דTZOD؎كٝز涪抟鏣㹀TZOD؎كٝزך㹀劍涸ז涪抟TZOD؎كٝز涪欰
var sw = navigator.serviceWorker;sw.ready.then(function(reg) {reg.syncManager.register({id: "periodicSync",minDelay: 60 * 60 * 1000,minPeriod: 12 * 60 * 60 * 1000,allowOnBattery: trueidleRequired: false}).then(function() {// Success});});JO#SPXTFS
؟٦غ٦فحءُך「⥋8FC1VTI"1*
4FSWJDF8PSLFS1VTIر٦ة「⥋1VTI؟٦غ٦QVTI؎كٝز涪欰)551הַד؟٦غ٦1VTI
var sw = navigator.serviceWorker;sw.ready.then(function(reg) {reg.pushManager.subscribe().then(function(subscription) {// Successconsole.log(subscription.subscriptionId);console.log(subscription.endpoint);}});});JO#SPXTFS
4FSWJDF8PSLFSה)551ָⴖֻ倜׃ְ8FC1VTIך⚅歲רר傈鎸IUUQEIBUFOBOFKQKPWJ
넝堣腉ײִ)5514ָ䗳갭鸐⥋鷿⚥ד何甑ׁזְ״ֲחկ涪כٗ٦ٕؕمأزדծꂁ⥋כ44-䲿կ
ؔؿٓ؎ٝ8FCךֽדכזְկ4FSWJDF8PSLFSך⯋ד8FC1VTIװغحؙؚٓؐٝسず劍㹋植ׅ
4FSWJDF8PSLFSך㹋鄲朐屣' ( ) * +#,---&&&-
4FSWJDF8PSLFS⢪ٔا٦أٍؗحءُך؎ً٦آ
ـٓؐؠ؟٦غ٦鸐䌢ٕ٦زؙٔؒأز׃גٖأهٝأֲ
ـٓؐؠ؟٦غ٦4FSWJDF8PSLFS$BDIF"1*4FSWJDF8PSLFSד劢ٍؗحءُ$BDIF"1*⢪גٔا٦أ⥂㶷
ـٓؐؠ؟٦غ٦4FSWJDF8PSLFS$BDIF"1*$BDIF"1*ַ撑׃ٔا٦أ鵤⽱4FSWJDF8PSLFSדٍؗحءُ幥
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;});}});}));JO4FSWJDF8PSLFS
IUUQTDIHJUIVCJPUPEP
ؔؿٓ؎ٝהְֲ倜זػٓت؎ي「ֽⰅ״ֲ
5IBOLZPV!DI.!DI/ DIOFU
1000ch
yukimatsuyoshi
akiroom
hanaseleb
ryomaru0825
simosako
k1low
oracle4engineer
iamshunta
ar_tama
el_stoffel
pict3
hatefulcrawdad
reverentgeek
skipperchong
pedronauck
lemiorhan
bermonpainter
frogandcode
sugarenia
bkeepers
nonsquared
chriscoyier
mclloyd