Introduction to Service Worker

*OUSPEVDUJPOUP 4FSWJDF8PSLFS 'SPOUSFOE$POGFSFODF

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

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

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

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

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

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

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

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

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

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

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

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

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

)JHI1FSGPSNBODF8FC'SPOUFOE IUUQTTQFBLFSEFDLDPNBIPNVIJHIQFSGPSNBODFXFCGSPOUFOE

)JHI1FSGPSNBODF#SPXTFS/FUXPSLJOH IUUQDIJNFSBMBCTPSFJMMZDPNCPPLT

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

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

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

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

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

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

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

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

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

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

ד׮ծ嗚鎢כ⳿勻׷

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

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

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

'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 وصؿؑأزؿ؋؎ٕחٍؗحءُ׾㹀纏 <html manifest=app.mf>

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

⽃秪ח鋅ִג醱꧟ז "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 'JMF4ZTUFN 8FC4UPSBHF JOEFYFE%# "QQMJDBUJPO$BDIF 4FSWJDF8PSLFS̒/FX

4FSWJDF8PSLFSJTDPNJOH

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

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

+BWB4DSJQU8PSLFSךמהא

ـٓؐؠ 4FSWJDF8PSLFS 4FSWJDF8PSLFSך涫ꐮ 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

4FSWJDF8PSLFSDBDIFQPMZMM IUUQHJUIVCDPNDPPOTUBDBDIFQPMZMM

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

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

؟٦غ٦فحءُך「⥋ 8FC1VTI"1*

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

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

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

Introduction to Service Worker

Introduction to Service Worker

More Decks by Shogo Sensui

Other Decks in Technology

Featured

Transcript