Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to Service Worker

0d605a3350dd7e91b8136aecffd5ceeb?s=47 Shogo Sensui
February 21, 2015

Introduction to Service Worker

2015/2/21に開催されたFrontrend Conferenceの「Introduction to Service Worker」のセッションの資料です。

0d605a3350dd7e91b8136aecffd5ceeb?s=128

Shogo Sensui

February 21, 2015
Tweet

Transcript

  1. *OUSPEVDUJPOUP 4FSWJDF8PSLFS 'SPOUSFOE$POGFSFODF

  2. !DI !

  3. 4FOTVJ4IPHP &OHJOFFSBU$ZCFS"HFOU *OD 'SPOUFOEⰋ菙 /PEFKTהַ&4הַ

  4. ؿٗٝزؒٝسؒٝآص، 균䧭铣劤 8&# %#13&44 8FCؿٗٝزؒٝس剑⵸简

  5. 㛇燉ַ׵׻ַ׷ 8FC$PNQPOFOUT䗡䎿鍑铡 ։➬圫ַ׵㹋鄲תד椚鍑ׅ׷։ IUUQIUNMFYQFSUTKQTFSJFTXFCDPNQPOFOUT

  6. 8FC׾《׶䋆ֻ 橆㞮ך鹌⻉

  7. طحزٙ٦ؙ ה ع٦سؐؑ،

  8. ع٦سؐؑ،ךألحؙ䱿獳 J1IPOF J1IPOF4 "QQMF" ()[ "QQMF" ()[ .FNPSZ (# .FNPSZ

    .#
  9. ػا؝ٝ׮ׁ׷ֿהזָ׵ ٌغ؎ٕ׮ع؎ألحؙ⻉ָ 滠㹋ח鹌׿דֹגְ׷

  10. ٌغ؎ٕر٦ة㔐简ךⵃ欽罏 劢⢪欽  -5&  (  (  ˟筨⹡満չ䎂䧭䎃晛䞔㜠鸐⥋涯剅*$5ךⵃ欽橆㞮ך㢌⻉պ

  11. ( -5& ך兛⿹ָ鹌׬׮ךך (כ ה劢׌ח㢳ְ كأزؒؿؓ٦ز׌׃˘

  12. رغ؎أה㛇㖑㽷הך騃ꨄ ꟦ח֮׷黪誊暟䒉暟٥瑞孡 ٖ؎ذٝء٦ך銲㔓 " # $

  13. طحزٙ٦ؙכ ع٦سؐؑ،קו 㸜㹀׃גְזְ % &

  14. 頾蚚׾ַֽ׷ץֹכ طحزٙ٦ؙדכזֻ ع٦سؐؑ،

  15. ٌغ؎ٕرغ؎أך兛⿹װ 8FC䪮遭ך鹌⻉הⰟח ػؿؓ٦وٝأָ㉏׻׸׷

  16. )JHI1FSGPSNBODF8FC'SPOUFOE IUUQTTQFBLFSEFDLDPNBIPNVIJHIQFSGPSNBODFXFCGSPOUFOE

  17. )JHI1FSGPSNBODF#SPXTFS/FUXPSLJOH IUUQDIJNFSBMBCTPSFJMMZDPNCPPLT

  18. 馄㣐✲կד׮ծ ؔؿٓ؎ٝך儗ח歗꬗ָ 溪׏涯זֿהכ劢鍑寸˘կ

  19. ؔؿٓ؎ٝؿ؋٦أزהכ ؔؿٓ؎ٝ8FC׾㹋植ׅ׷䪮遭 4FSWJDF8PSLFSJTDPNJOH

  20. ΦϑϥΠϯϑΝʔετͱ͸

  21. ؔؿٓ؎ٝ׾⵸䲿ח 8FC،فٔ׾⡲׷ֿה

  22. 0JOF'JSTU ˊ"CFUUFS)5.-6TFS&YQFSJFODF IUUQCMPHKPFMBNCFSUDPVLPJOFSTUBCFUUFSIUNMVTFSFYQFSJFODF

  23. ؔؿٓ؎ٝ8FCךًٔحز ؔؿٓ؎ٝד׮،ؙإأדֹ׷ 琎噰涸חٍؗحءُ׾⿫撑ׅ׷ךד넝鸞 طحزٙ٦ؙ䌒㚖׮眍秈〳腉

  24. ؔؿٓ؎ٝ׾꣇ּ׌ֽדכזְ 㸣Ⰻזؔؿٓ؎ٝ׌ֽדכזֻ 鴟㞮ך㖑װ㖑♴ꉟך״ֲז籬ָ׶ꨇְ 橆㞮ח㼎׃ג׮؟ه٦زדֹ׷

  25. ط؎ذ؍ـך䮶׷莸ְח鵚בֻ ؎ٝأز٦ٕ儗ח䲽歗ٔا٦أ׾然⥂ ؔؿٓ؎ٝ儗ח׮歗꬗ָ溪׏涯חז׵זְ 鸐⥋דֹזַ׏׋ֿה׾䠐陎ׇׁזְ鏣鎘

  26. ؔؿٓ؎ٝכ堣腉ךמהא ٔ،ٕة؎ي䚍׾銲実ׁ׸׷،فٔחכ♶ぢֹ 铣׫⚥䗰٥⽯儗䚍ָ♶銲ז箟꧊ד֮׸ל˘ ،فٔ؛٦ءّٝך堣腉ךמהאח麓ֺזְ

  27. ؔؿٓ؎ٝ⻉ָ姻纏דכזְ

  28. ד׮ծ嗚鎢כ⳿勻׷

  29. ؔؿٓ؎ٝ8FC׾㹋植ׅ׷䪮遭

  30. ꟼ鸬ׅ׷ـٓؐؠ"1* OBWJHBUPSPO-JOF 'JMF4ZTUFN 8FC4UPSBHF JOEFYFE%# "QQMJDBUJPO$BDIF

  31. OBWJHBUPSPO-JOF ؔٝٓ؎ַٝוֲַ׾《䖤 POMJOFPJOF؎كٝز ـٓؐؠ؟ه٦ز׮קר㸣✪

  32. 'JMF4ZTUFN 㣐ֹז؟؎ؤךؿ؋؎ٕך⥂㶷ぢֽ ꬊず劍㘗"1* زٓٝؠؙءّٝꬊ㼎䘔

  33. 'JMF4ZTUFN ' ( ) * + # , & &

    & - - & &   &
  34. 8FC4UPSBHF ,FZ7BMVF䕎䒭דر٦ة׾⥂㶷_.# ず劍㘗ךءٝفٕז"1* 㼰ꆀךر٦ة׾⵸䲿ה׃גְ׷

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

    JSON.stringify(json);
  36. 8FC4UPSBHF ' ( ) * + # , - -

    - - - - - -  
  37. JOEFYFE%# ,FZ7BMVF䕎䒭דر٦ة׾⥂㶷_.# ꬊず劍㘗ךװװ醱꧟ז"1* ؎ٝرحؙأ׾⢪׏׋넝鸞ז،ؙإأ غ٦آّصؚٝהزٓٝؠؙءّٝ

  38. 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' }); };
  39. JOEFYFE%# ' ( ) * + # , - -

    - - - - - -  
  40. "QQMJDBUJPO$BDIF وصؿؑأزؿ؋؎ٕחٍؗحءُ׾㹀纏 <html manifest=app.mf>

  41. 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
  42. ⽃秪ח鋅ִג醱꧟ז "QQMJDBUJPO$BDIF㉏겗

  43. "QQMJDBUJPO$BDIFךꨇ׃ׁ 㹀纏⯋ך)5.-ل٦آ׾ٍؗحءُ ٍؗحءُ׾稢װַח؝ٝزٗ٦ٕ♶〳 +BWB4DSJQUַ׵ٍؗحءُך乼⡲♶〳 长ղך➬圫♳ծ鏣鎘ָ䓼ⵖׁ׸׷

  44. POMJOF"1* 4UPSBHF"1*

  45. if (navigator.onLine) { $.ajax({ url: '/api/data', method: 'get' }).done(function (data)

    { render(data); }); } else { var cacheData = localStorage.getItem('key'); render(JSON.parse(cacheData)); }
  46. "QQMJDBUJPO$BDIFד갹䓸׷

  47. ꟼ鸬ׅ׷ـٓؐؠ"1* OBWJHBUPSPO-JOF 'JMF4ZTUFN 8FC4UPSBHF JOEFYFE%# "QQMJDBUJPO$BDIF 4FSWJDF8PSLFS̒/FX

  48. 4FSWJDF8PSLFSJTDPNJOH

  49. 넝堣腉זٗ٦ٕؕفٗؗء 4FSWJDF8PSLFSכ+BWB4DSJQUד㹋鄲ׅ׷ ٗ٦ٕؕفٗؗءך״ֲז׮ך

  50. 4FSWJDF8PSLFS +BWB4DSJQU8PSLFSךמהא )551ؙٔؒأزך嗚濼ה何甑 'FUDI"1*׾⢪׏׋ٔا٦أך《䖤 $BDIF"1*׾⢪׏׋ٍؗحءُך盖椚 غحؙؚٓؐٝسず劍#BDLHSPVOE4ZOD ؟٦غ٦فحءُך「⥋8FC1VTI"1*

  51. +BWB4DSJQU8PSLFSךמהא

  52. ـٓؐؠ 4FSWJDF8PSLFS 4FSWJDF8PSLFSך涫ꐮ 4FSWJDF8PSLFS׾涫ꐮ

  53. 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
  54. )551ؙٔؒأزך嗚濼ה何甑

  55. ـٓؐؠ 4FSWJDF8PSLFS ؙٔؒأز嗚濼 ؟٦غ٦ )551ؙٔؒأز涪欰 չֶծؙٔؒأز׌պ GFUDI؎كٝز涪欰

  56. ـٓؐؠ 4FSWJDF8PSLFS ؙٔؒأز何甑 ؟٦غ٦ )551ؙٔؒأز涪欰 չ⹧䩛חٖأهٝأպ

  57. self.addEventListener('fetch', function (e) { console.log('Request in Browser'); e.respondWith( new Response('Not

    Found', { status: 404 }) ); }); JO4FSWJDF8PSLFS
  58. 'FUDI"1*׾⢪׏׋ ٔا٦أך《䖤

  59. 'FUDI"1*הכ ٔا٦أ《䖤ך倜׋ז"1* 1SPNJTFك٦أך"1*鏣鎘 9)3״׶⡚ٖكٕ ➙ךהֿ׹4FSWJDF8PSLFS؝ٝذؗأز㼔欽

  60. 4FSWJDF8PSLFS 'FUDI"1*ךⵃ欽 ؟٦غ٦ 'FUDI"1*ד ٔا٦أ׾《䖤

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

    JO4FSWJDF8PSLFS
  62. 'FUDI"1*鍑铡ծת׋כ 8FCחְֶג'FUDIׅ׷הכ⡦ַ IUUQKYDLIBUFOBCMPHDPNFOUSZXIBUXHGFUDI

  63. $BDIF"1*׾⢪׏׋ ٍؗحءُך盖椚

  64. $BDIF"1*הכ ٔا٦أך宕竲涸ٍؗحءُ׾ׅ׷"1* 1SPNJTFك٦أך"1*鏣鎘 ➙ךהֿ׹4FSWJDF8PSLFS؝ٝذؗأز㼔欽

  65. 4FSWJDF8PSLFS $BDIF"1*ךⵃ欽 $BDIF"1* $BDIF"1*׾⢪׏ג ٔا٦أ׾涫ꐮ٥⿫撑

  66. 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
  67. 4FSWJDF8PSLFSDBDIFQPMZMM IUUQHJUIVCDPNDPPOTUBDBDIFQPMZMM

  68. غحؙؚٓؐٝسず劍 #BDLHSPVOE4ZOD

  69. ـٓؐؠ 4FSWJDF8PSLFS 涫ꐮ儗ח♧㹀ךワ劍ד TZOD؎كٝز涪抟鏣㹀 TZOD؎كٝزך㹀劍涸ז涪抟 TZOD؎كٝز涪欰

  70. 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 }); }); JO#SPXTFS
  71. ؟٦غ٦فحءُך「⥋ 8FC1VTI"1*

  72. 4FSWJDF8PSLFS 1VTIر٦ة「⥋ 1VTI؟٦غ٦ QVTI؎كٝز涪欰 )551הַד ؟٦غ٦1VTI

  73. var sw = navigator.serviceWorker; sw.ready.then(function(reg) { reg.pushManager.subscribe().then( function(subscription) { //

    Success console.log(subscription.subscriptionId); console.log(subscription.endpoint); } }); }); JO#SPXTFS
  74. 4FSWJDF8PSLFSה)551ָⴖ׶Ꟛֻ 倜׃ְ8FC1VTIך⚅歲ר׍ר׍傈鎸 IUUQEIBUFOBOFKQKPWJ

  75. 넝堣腉ײִ)5514ָ䗳갭 鸐⥋鷿⚥ד何甑ׁ׸זְ״ֲחկ Ꟛ涪כٗ٦ٕؕمأزדծꂁ⥋כ44-⵸䲿կ

  76. ؔؿٓ؎ٝ8FCך׋׭׌ֽ דכזְկ4FSWJDF8PSLFSך⯋ד 8FC1VTIװغحؙؚٓؐٝسず劍׾㹋植ׅ׷

  77. 4FSWJDF8PSLFSך㹋鄲朐屣 ' ( ) * + # , - -

    -   & & & -
  78. 4FSWJDF8PSLFS׾⢪׏׋ ٔا٦أٍؗحءُך؎ً٦آ

  79. ـٓؐؠ ؟٦غ٦ 鸐䌢ٕ٦ز ؙٔؒأز׃ג ٖأهٝأ׾׮׵ֲ

  80. ـٓؐؠ ؟٦غ٦ 4FSWJDF8PSLFS $BDIF"1* 4FSWJDF8PSLFS ד劢ٍؗحءُ $BDIF"1*׾⢪׏ג ٔا٦أ׾⥂㶷

  81. ـٓؐؠ ؟٦غ٦ 4FSWJDF8PSLFS $BDIF"1* $BDIF"1*ַ׵⿫撑׃ ٔا٦أ׾鵤⽱ 4FSWJDF8PSLFS דٍؗحءُ幥

  82. 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
  83. IUUQTDIHJUIVCJPUPEP

  84. ؔؿٓ؎ٝהְֲ倜׋ז ػٓت؎ي׾「ֽⰅ׸״ֲ

  85. 5IBOLZPV !DI . ! DI / DIOFU