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
5.1k
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
三年間の関わりから見る PR TIMES エンジニアリングの変化 / Transition of PRTimes Engineering
1000ch
0
2.3k
EU のデジタル市場法と Apple / DMA and Apple
1000ch
0
130
Web Share API
1000ch
0
150
2023 年の Web 開発のベースライン / Web Development Baseline 2023
1000ch
0
58
開発生産性と組織 / Productivity and Organization
1000ch
0
1.2k
なぜ私達は働くのか / Why We Work?
1000ch
0
84
新しいメルカリ Web とそのパフォーマンス / The New Mercari Web and its performance
1000ch
0
94
Web Standards Interop 2022
1000ch
0
320
パフォーマンスを高める CSS / Performance Optimized CSS
1000ch
1
830
Other Decks in Technology
See All in Technology
今だから言えるセキュリティLT_Wordpress5.7.2未満を一斉アップデートせよ
cuebic9bic
2
170
〜『世界中の家族のこころのインフラ』を目指して”次の10年”へ〜 SREが導いたグローバルサービスの信頼性向上戦略とその舞台裏 / Towards the Next Decade: Enhancing Global Service Reliability
kohbis
3
1.5k
CDK Vibe Coding Fes
tomoki10
1
630
shake-upを科学する
rsakata
7
1k
AI時代にも変わらぬ価値を発揮したい: インフラ・クラウドを切り口にユーザー価値と非機能要件に向き合ってエンジニアとしての地力を培う
netmarkjp
0
130
無理しない AI 活用サービス / #jazug
koudaiii
0
100
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
4
1k
“日本一のM&A企業”を支える、少人数SREの効率化戦略 / SRE NEXT 2025
genda
1
270
ロールが細分化された組織でSREは何をするか?
tgidgd
1
420
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.7k
ポストコロナ時代の SaaS におけるコスト削減の意義
izzii
1
470
ABEMAの本番環境負荷試験への挑戦
mk2taiga
5
1.3k
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Building an army of robots
kneath
306
45k
Optimizing for Happiness
mojombo
379
70k
Embracing the Ebb and Flow
colly
86
4.8k
Navigating Team Friction
lara
187
15k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Producing Creativity
orderedlist
PRO
346
40k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Language of Interfaces
destraynor
158
25k
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