Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Introduction to Service Worker
Search
Shogo Sensui
February 21, 2015
Technology
16
4.9k
Introduction to Service Worker
2015/2/21に開催されたFrontrend Conferenceの「Introduction to Service Worker」のセッションの資料です。
Shogo Sensui
February 21, 2015
Tweet
Share
More Decks by Shogo Sensui
See All by Shogo Sensui
EU のデジタル市場法と Apple / DMA and Apple
1000ch
0
66
Web Share API
1000ch
0
81
2023 年の Web 開発のベースライン / Web Development Baseline 2023
1000ch
0
24
開発生産性と組織 / Productivity and Organization
1000ch
0
1.1k
なぜ私達は働くのか / Why We Work?
1000ch
0
44
新しいメルカリ Web とそのパフォーマンス / The New Mercari Web and its performance
1000ch
0
39
Web Standards Interop 2022
1000ch
0
270
パフォーマンスを高める CSS / Performance Optimized CSS
1000ch
1
750
HTML Optimization for Web Performance
1000ch
0
680
Other Decks in Technology
See All in Technology
手軽に始める? おうちサーバーのすゝめ
nyagasan
0
180
APIのドキュメント化何使ってますか?
miu_crescent
2
160
セキュリティ監視の内製化 効率とリスク
mixi_engineers
PRO
4
640
Bidirectional Quadratic Voting Leveraging Issue-Based Matching
kentaro
2
170
疎通2024
sadnessojisan
4
490
Oracle Exadata Database Service(Dedicated Infrastructure):サービス概要のご紹介
oracle4engineer
PRO
0
9.3k
contenteditableと向き合う
kikuchikakeru
2
140
いまからでも遅くない! コンテナでWebアプリケーションを 動かしてみよう(1)Gitハンズオン
nomu
0
280
Chunk computing
matyo91
0
270
RAGHack: Kickoff and RAG 101
pamelafox
0
200
#Zenoh 完全に理解した 〜組込み純情篇〜
takasehideki
1
450
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
0
13k
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
22
3.9k
Designing for humans not robots
tammielis
248
25k
How GitHub (no longer) Works
holman
309
140k
Why Our Code Smells
bkeepers
PRO
333
56k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Building an army of robots
kneath
302
42k
How to Ace a Technical Interview
jacobian
275
23k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Art, The Web, and Tiny UX
lynnandtonic
294
20k
BBQ
matthewcrist
83
9.1k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
157
15k
Transcript
*OUSPEVDUJPOUP 4FSWJDF8PSLFS 'SPOUSFOE$POGFSFODF
!DI !
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،فٔ⡲ֿה
0JOF'JSTU ˊ"CFUUFS)5.-6TFS&YQFSJFODF IUUQCMPHKPFMBNCFSUDPVLPJOFSTUBCFUUFSIUNMVTFSFYQFSJFODF
ؔؿٓ؎ٝ8FCךًٔحز ؔؿٓ؎ٝד،ؙإأדֹ 琎噰涸חٍؗحءُ撑ׅךד넝鸞 طحزٙ٦ؙ䌒㚖眍秈〳腉
ؔؿٓ؎ּֽٝדכזְ 㸣Ⰻזؔؿٓ؎ֽٝדכזֻ 鴟㞮ך㖑װ㖑♴ꉟך״ֲז籬ָꨇְ 橆㞮ח㼎׃ג؟ه٦زדֹ
ط؎ذ؍ـך䮶莸ְח鵚בֻ ؎ٝأز٦ٕ儗ח䲽歗ٔا٦أ然⥂ ؔؿٓ؎ٝ儗ח歗ָ溪涯חזזְ 鸐⥋דֹזַֿה䠐陎ׇׁזְ鏣鎘
ؔؿٓ؎ٝכ堣腉ךמהא ٔ،ٕة؎ي䚍銲実ׁ،فٔחכ♶ぢֹ 铣⚥䗰٥⽯儗䚍ָ♶銲ז箟꧊ד֮ל˘ ،فٔ؛٦ءّٝך堣腉ךמהאח麓ֺזְ
ؔؿٓ؎ٝ⻉ָ姻纏דכזְ
דծ嗚鎢כ⳿勻
ؔؿٓ؎ٝ8FC㹋植ׅ䪮遭
ꟼ鸬ׅـٓؐؠ"1* OBWJHBUPSPO-JOF 'JMF4ZTUFN 8FC4UPSBHF JOEFYFE%# "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 وصؿؑأزؿ؋؎ٕחٍؗحءُ㹀纏 <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
4FSWJDF8PSLFSDBDIFQPMZMM IUUQHJUIVCDPNDPPOTUBDBDIFQPMZMM
غحؙؚٓؐٝسず劍 #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: true idleRequired: false }).then(function() { // Success }); }); JO#SPXTFS
؟٦غ٦فحءُך「⥋ 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