Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
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
5k
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
84
Web Share API
1000ch
0
95
2023 年の Web 開発のベースライン / Web Development Baseline 2023
1000ch
0
31
開発生産性と組織 / Productivity and Organization
1000ch
0
1.1k
なぜ私達は働くのか / Why We Work?
1000ch
0
53
新しいメルカリ Web とそのパフォーマンス / The New Mercari Web and its performance
1000ch
0
50
Web Standards Interop 2022
1000ch
0
270
パフォーマンスを高める CSS / Performance Optimized CSS
1000ch
1
760
HTML Optimization for Web Performance
1000ch
0
680
Other Decks in Technology
See All in Technology
sre本読んだ感想
pisakun
0
160
サービスの拡大に伴うオペレーション課題に立ち向かう / 20241128_cloudsign_pdm
bengo4com
0
770
データ共有による新しい価値の創造
iotcomjpadmin
0
300
Will multimodal language processing change the world?
keio_smilab
PRO
2
250
Entra ID の基礎(Japan Microsoft 365 コミュニティ カンファレンス 2024)
murachiakira
3
2.1k
クラウドネイティブなNewSQLで実現するミッションクリティカルなアプリケーションの運用
yuyu_hf
PRO
1
160
突き破って学ぶコンテナセキュリティ/container-breakout-cncj-lt
mochizuki875
3
140
241130紅白ぺぱ合戦LT「編集の技術」
toya524287
5
570
GitHub Copilot全社導入のその後とGitHub×ZOZOTOWNコラボレーションの舞台裏 / GitHub ZOZOTOWN
ikkou
0
150
【CNDW2024】SIerで200人クラウドネイティブのファンを増やした話
yuta1979
1
280
エンジニアの草の根活動のその先へ LINEギフトのアクセシビリティにおける ネクストアクション
lycorptech_jp
PRO
0
110
Amazon ECSとCloud Runの相互理解で広げるクラウドネイティブの景色 / Mutually understanding Amazon ECS and Cloud Run
iselegant
18
2.3k
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
20
1.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Optimizing for Happiness
mojombo
376
70k
Site-Speed That Sticks
csswizardry
0
88
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
880
Bash Introduction
62gerente
608
210k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
150
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
Building Your Own Lightsaber
phodgson
103
6.1k
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