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
Service Workerとは、それを使ってできること / what-is-service-...
Search
Toshihisa Tomatsu
September 26, 2020
Technology
3
1.9k
Service Workerとは、それを使ってできること / what-is-service-worker
Kanazawa.js Remote Meetup #06の資料です。
https://kanazawajs.connpass.com/event/188109/
Toshihisa Tomatsu
September 26, 2020
Tweet
Share
More Decks by Toshihisa Tomatsu
See All by Toshihisa Tomatsu
フロントエンドのエコシステム / Frontend Ecosystem
10shi10ma
8
3.2k
Service Workerとブラウザでの通知について
10shi10ma
3
300
意外に知らないnpmと便利なCLI
10shi10ma
8
2.3k
歴史から学ぶ現代のフロントエンド
10shi10ma
17
11k
サイボウズ フロントエンドエキスパートチームとOSSの管理について
10shi10ma
0
1.1k
大規模フロントエンドの技術的負債と向き合う。
10shi10ma
5
5.8k
Google I/O ’19から見る新しいJavaScript
10shi10ma
5
3k
React+Storybook ことはじめ
10shi10ma
8
2.5k
TypeScript入門 〜型のあるモダンなJavaScript〜
10shi10ma
2
730
Other Decks in Technology
See All in Technology
Contract One Dev Group 紹介資料
sansan33
PRO
0
6k
大規模PaaSにおける監視基盤の構築と効率化の道のり
lycorptech_jp
PRO
0
170
会社員しながら本を書いてきた知見の共有
sat
PRO
3
680
AIコードエディタは開発を変えるか?Cursorをチームに導入して1ヶ月経った本音
ota1022
1
670
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.6k
令和トラベルQAのAI活用
seigaitakahiro
0
490
超簡単!RAGアプリケーション構築術
oracle4engineer
PRO
0
110
コードの考古学 〜労務システムから発掘した成長の糧〜
kenta_smarthr
0
680
それでもぼくらは貢献をつづけるのだ(たぶん) @FOSS4GLT会#002
furukawayasuto
1
270
アプリケーションの中身が見える!Mackerel APMの全貌と展望 / Mackerel APMリリースパーティ
mackerelio
0
420
AIオンボーディングとAIプロセスマイニング
nrryuya
5
1.3k
AIのための オンボーディングドキュメントを整備する - hirotea
hirotea
9
2.3k
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
41
2.6k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Writing Fast Ruby
sferik
628
61k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Designing Experiences People Love
moore
142
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.6k
Embracing the Ebb and Flow
colly
85
4.7k
Visualization
eitanlees
146
16k
Raft: Consensus for Rubyists
vanstee
137
7k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
RailsConf 2023
tenderlove
30
1.1k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Transcript
4FSWJDF8PSLFSͱ ͦΕΛͬͯͰ͖Δ͜ͱ ,BOB[BXBKT3FNPUF.FFUVQ 5PTIJIJTB5PNBUTV 1
֎দढ़ঘ 5PTIJIJTB5PNBUTV αΠϘζגࣜձࣾ ϑϩϯτΤϯυ ۚ େֶଔۀ·Ͱ ˠ౦ژˠѪඤ !UPTIJUPNB !UPTIJ@@UPNB
4FSWJDF8PSLFSͱ 3
4FSWJDF8PSLFS 48 8FCϖʔδͱผʹϒϥβͷόοΫάϥϯυͰ ಈ࡞͢Δ+4ͷ࣮ߦڥͰ ϖʔδ͔ΒͷωοτϫʔΫϦΫΤετʹհೖͰ͖Δ 4
Α͘Θ͔Βͳ͍ 5
4FSWJDF8PSLFS 48 ᶃ8FCϖʔδͱผʹϒϥβͷόοΫάϥϯυͰ ᶄಈ࡞͢Δ+4ͷ࣮ߦڥͰ ᶅϖʔδ͔ΒͷωοτϫʔΫϦΫΤετʹհೖͰ͖Δ 6
4FSWJDF8PSLFS 48 ᶃ8FCϖʔδͱผʹϒϥβͷόοΫάϥϯυͰ ᶄಈ࡞͢Δ+4ͷ࣮ߦڥͰ ᶅϖʔδ͔ΒͷωοτϫʔΫϦΫΤετʹհೖͰ͖Δ 7
Ұൠతͳ8FCϖʔδ ҰൠతʹϒϥβͰಈ͘+4ɺ8FCϖʔδͷ ϥΠϑλΠϜͷதͰ࣮ߦ ˠλϒΛดͨ͡Βɺऴྃ͢Δ 8FCϖʔδ +4 )5.- $44 8FCϖʔδ +BWB4DSJQUͷ࣮ߦ
8
8FCϖʔδͱผʹϒϥβͷ όοΫάϥϯυ 48ɺϒϥβͷཪͰಈ͘ͷͰ ϖʔδΛดͯ͡ੜଘ͢Δ 8FCϖʔδ 48 +4 +4 )5.- $44
8FCϖʔδ 4FSWJDF8PSLFS 9
4FSWJDF8PSLFS 48 ᶃ8FCϖʔδͱผʹϒϥβͷόοΫάϥϯυͰ ᶄಈ࡞͢Δ+4ͷ࣮ߦڥͰ ᶅϖʔδ͔ΒͷωοτϫʔΫϦΫΤετʹհೖͰ͖Δ 10
+4ͷ࣮ߦڥ 8FC8PSLFS ผεϨουͰ+BWB4DSJQUΛ࣮ߦ͢Δ 11
4FSWJDF8PSLFS 48 ᶃ8FCϖʔδͱผʹϒϥβͷόοΫάϥϯυͰ ᶄಈ࡞͢Δ+4ͷ࣮ߦڥͰ ᶅϖʔδ͔ΒͷωοτϫʔΫϦΫΤετʹհೖͰ͖Δ 12
ϦΫΤετʹհೖͰ͖Δ 8FCϖʔδ αʔόʔ BQJBSUJDMFT ʹΞΫηε 4FSWJDF8PSLFS APIϦΫΤετ ϦιʔεͷϦΫΤετ͕͋Εɺҙͷ ॲཧΛ࣮ߦͰ͖ΔΑɻ ϦΫΤετΛൃߦ͢Δ͜ͱͰ͖Δ
13
4FSWJDF8PSLFS 48 ͱ 8FCϖʔδͱผʹϒϥβͷόοΫάϥϯυͰ ಈ࡞͢Δ+4ͷ࣮ߦڥͰ ϖʔδ͔ΒͷωοτϫʔΫϦΫΤετʹհೖͰ͖Δ 14
ͪΐͬͱ͔Δؾ͕͢Δ 15
·ͩྑ͘Θ͔Βͳ͍ͷͰ 48Λ׆༻ͯ͠ΔαʔϏεΛݟͯ ΠϝʔδΛ͚Δ 16
48ΛऔΓೖΕ͍ͯΔ αʔϏε 17
4DSBQCPY ΦϑϥΠϯͰίϯ ςϯπΛӾཡՄೳ 18 IUUQTQSUJNFTKQNBJOIUNMSEQIUNM
5XJUUFS 8FCΞϓϦΛ 18"ͱͯ͠Πϯε τʔϧ πΠʔτ͕ˢ 19 IUUQTEFWFMPQFSTHPPHMFDPNXFCTIPXDBTFUXJUUFS
:PV5VCF ϖʔδΛ։͍ͯ ແͯ͘σεΫτοϓ ௨͕͘Δ 20
͜ΕΒ48Λϕʔεʹ ࣮ݱ͍ͯ͠Δ 21
48ͱ ͦΕΛͬͯͰ͖Δ͜ͱ 22
4FSWJDF8PSLFSͱ 8FCϖʔδͷϥΠϑλΠϜΛ͑ͯ αʔϏε FH1VTI௨ɺΦϑϥΠϯମݧ ΛఏڙͰ͖Δͷ 8FCϖʔδ 48 +4 )5.-
$44 8FCϖʔδͱผʹϒϥβͷόοΫάϥϯυͰಈ࡞͢Δ+4ͷ࣮ߦڥ Ͱϖʔδ͔ΒͷωοτϫʔΫϦΫΤετʹհೖͰ͖Δ 23
4FSWJDF8PSLFS ʓʓ w 4FSWJDF8PSLFS͚ͩͰϓογϡ௨ΦϑϥΠϯମݧͳͲ ͕ఏڙͰ͖ΔΘ͚Ͱͳ͍ w ΦϑϥΠϯମݧ w $BDIF"1* 48
w ϓογϡ௨ w 1VTI"1* 48 ϙΠϯτɺ48ϖʔδ ͱผͰϒϥβͷόοΫάϥϯ υͰಈ࡞ͯ͠ɺϖʔδͷϦΫΤετ ΛϑοΫͰ͖Δ 24
2020/09/26 ֤ϒϥβͷαϙʔτঢ়گ 25
Ͱ͖Δ͜ͱ ᶃ8FCϖʔδ͔ΒαʔόʔͷϦΫΤετΛϑοΫͰ͖Δ ˠΩϟογϡͷ׆༻ ΦϑϥΠϯମݧɺදࣔͷߴԽ ᶄ8FCϖʔδΛ։͍ͯແͯ͘ɺಛఆͷॲཧΛߦ͑Δ ˠϓογϡ௨ ᶅ48ΛΠϯετʔϧͯ͠ɺ8FCΞϓϦΛ18"ͱͯ͠Πϯετʔϧ ˠ"EEUP)PNF4DSFFO ")4
ChromeɾEdge Firefox Safari Firefox Safari Firefox ChromeɾEdge ChromeɾEdge 26
ᶃ8FCϖʔδ͔ΒαʔόʔͷϦΫΤ ετΛϑοΫͰ͖ΔˠΦϑϥΠϯମݧ 8FCϖʔδ αʔόʔ JOEFYIUNM͍ͩ͘͞ ʹΞΫηε 4FSWJDF8PSLFS ࣄલʹϦιʔεΛ Ωϟογϡ͓͍͔ͯͨ͠Βɺ ΦϑϥΠϯͰϦιʔεΛ
ฦͤΔͶ $BDIF 27
ᶃ8FCϖʔδ͔ΒαʔόʔͷϦΫΤ ετΛϑοΫͰ͖ΔˠදࣔͷߴԽ ᶃΩϟογϡϑΝʔετ ᶃωοτϫʔΫϑΝʔετ ଞʹ͍͔ͭ͘ Ωϟογϡઓུ͕͋Δ 28
͋·Γසൟʹ༰͕ߋ৽͞Εͳ͍ Ϧιʔεσʔλ Ωϟογϡ͔Βฦͤྑ͍Ͷʂ 29
ᶃΩϟογϡϑΝʔετ 8FCϖʔδ αʔόʔ JOEFYIUNM͍ͩ͘͞ ʹΞΫηε 4FSWJDF8PSLFS Cache͋Δ͔ΒɺCache͔Βฦ͢Ͷ $BDIF 30
ɹᶃΩϟογϡϑΝʔετ 8FCϖʔδ αʔόʔ JOEFYIUNM͍ͩ͘͞ ʹΞΫηε 4FSWJDF8PSLFS Cacheແ͍ͳΒαʔόʔʹϦΫΤε τ͢ΔΑ $BDIF 'FUDI"1*
JOEFYIUNM 31
සൟʹ༰͕ߋ৽͞Εͦ͏ͳใʁ 32
ᶃωοτϫʔΫϑΝʔετ 8FCϖʔδ αʔόʔ GPPIUNM͍ͩ͘͞ GPPʹΞΫηε 4FSWJDF8PSLFS ·ͣαʔόʔʹ ϦΫΤετ͢ΔΑ 'FUDI"1* GPPIUNM
$BDIF 33
ɹᶃωοτϫʔΫϑΝʔετ 8FCϖʔδ αʔόʔ GPPIUNM͍ͩ͘͞ GPPʹΞΫηε 4FSWJDF8PSLFS OfflineͳΒCache͔Βฦ͢Α $BDIF 34
ᶄ8FCϖʔδΛ։͍ͯແͯ͘ɺ ಛఆͷॲཧΛߦ͑Δˠϓογϡ௨ 8FCϖʔδ αʔόʔ 4FSWJDF8PSLFS 1VTI4FSWJDF 35
ᶄ8FCϖʔδΛ։͍ͯແͯ͘ɺ ಛఆͷॲཧΛߦ͑Δˠϓογϡ௨ 8FCϖʔδ αʔόʔ 4FSWJDF8PSLFS 1VTI4FSWJDF 36 ϖʔδΛ։͍ͯແͯ͘ ɺ1VTI4FSWJDF͔Β ͷ௨Λड͚औΕΔΑ
ᶄ8FCϖʔδΛ։͍ͯແͯ͘ɺ ಛఆͷॲཧΛߦ͑Δˠϓογϡ௨ 8FCϖʔδ αʔόʔ 4FSWJDF8PSLFS 1VTI4FSWJDF 37 '$. 'JSFCBTF$MPVE.FTTBHJOH '$.Λ͏ͷ͕Ұൠత
ϖΠϩʔυͷ҉߸ԽͳͲ໘ͳ ॲཧΛͤΕΔ
ᶅ48ΛΠϯετʔϧͯ͠ 8FCΞϓϦΛ18"ͱͯ͠Πϯετʔϧ ˠ"EEUP)PNF4DSFO ")4 38
39 ᶅ48ΛΠϯετʔϧͯ͠ 8FCΞϓϦΛ18"ͱͯ͠Πϯετʔϧ ˠ"EEUP)PNF4DSFO ")4
40 ᶅ48ΛΠϯετʔϧͯ͠ 8FCΞϓϦΛ18"ͱͯ͠Πϯετʔϧ ˠ"EEUP)PNF4DSFO ")4
18" 41
18"ͱʁ w 1SPHSFTTJWF8FC"QQT w ৽͍͠"1*ͱϓϩάϨογϒͳ֦ுઓུΛ༻ͯ͠ɺΫϩεϓϥοτ ϑΥʔϜͳΣϒΞϓϦ w 8FCΞϓϦͰωΠςΟϒΞϓϦͷΑ͏ͳϢʔβʔମݧΛఏڙ͢Δ 3FMJBCMF *OUFHSBUFE
'BTU &OHBHJOH w ϞόΠϧˠϞόΠϧΞϓϦ w 1$ˠσεΫτοϓΞϓϦ 42
18"ͱʁ w ϞόΠϧΣϒʹ͓͚ΔϢʔβʔମݧͷ্ w 'BTU ߴ ΣϒΞϓϦͷίϯςϯπΛߴʹఏڙ͢Δ w *OUFHSBUFE ౷߹
σόΠε04ʹ߹Θͤͨମݧ w 3FMJBCMF ৴པ ͳωοτϫʔΫΦϑϥΠϯͰར༻Մೳ w &OHBHJOH Τϯήʔδ ʹΠϯετʔϧՄೳɺϓογϡ௨ 43
18"ͷಋೖࣄྫ w 466.0 w ಡΈࠐΈ࣌ؒΛॖɺϓογϡ௨ͷ։෧ IUUQTEFWFMPQFSTHPPHMFDPNXFCTIPXDBTFTVVNP w 5XJUUFS w
πΠʔτ૿Ճɺؼݮগ IUUQTEFWFMPQFSTHPPHMFDPNXFCTIPXDBTFUXJUUFS w ܦ w ίϯόʔδϣϯ ձһొ ૿ՃɺͷΞΫςΟϒϢʔβʔ૿Ճ IUUQTEFWFMPQFSTHPPHMFDPNXFCTIPXDBTFOJLLFJ 44
18"ͷ࡞Γํ 8FCΞϓϦΛ࡞Δ 4FSWJDF8PSLFSΛΠϯετʔϧ͢Δ NBOJGFTUKTPOΛ࡞ͯ͠MJOLλάͰಡΈࠐ· ͤΔ 45
18"Ͱͷମݧ w 48Λج൫ʹͨ͠8FCͷٕज़ͱΈ߹ΘͤΔ͜ͱͰɺωΠςΟ ϒΞϓϦͷΑ͏ͳମݧΛఏڙՄೳ w ϓογϡ௨ w ϗʔϜը໘ͷΠϯετʔϧ w ΦϑϥΠϯͰͷӾཡ
w ωΠςΟϒΞϓϦͷΑ͏ͳߴͳදࣔ 46
18"ͷϝϦοτɾσϝϦοτ w ϝϦοτ w 8FCʹՃͰ͔͔ΔωΠςΟϒΞϓϦ։ൃίετ͕͍ w ωΠςΟϒετΞ͔ΒͷΠϯετʔϧ͕ෆཁ w ετΞͷ৹͕ࠪෆཁϢʔβʔ͕Ξοϓσʔτ͢ΔλΠϛϯάΛؾʹ͠ͳͯ͘ྑ͍
w σϝϦοτ w ΞϓϦετΞܦ༝Ͱͷू٬͕Ͱ͖ͳ͍ 58" w J04ͰҰ෦ػೳ੍͕ݶ͞ΕΔ w ωΠςΟϒͷମݧʹྼΔ෦ͪΖΜ͋Γͦ͏ ैདྷͷ8FCͷ Ԇઢ্Ͱগͣͭ͠Ճ͍͚ͯ͠Δ 47
18" 8FCͰྑ͍ମݧΛఏڙ͍ͯ͜͠͏ɻ 48
ͦͷଞ࠷ۙͷಈ 49
ݱঢ়ͱࠓޙͷมԽ 8FCΞϓϦ 4FSWJDF8PSFLS ৽͍͠ "1* ৽͍͠ "1* ৽͍͠ "1* 48্Ͱ࣮ݱͰ͖Δ
"1*͕૿͍͑ͯ͘ ؆୯ʹ͔͚Δ Α͏ʹ ϕʔεʹͳΔ ߟٕ͑ज़ ग़དྷ্͕ͬͯͦ͏ 50
؆୯ʹ͔͚ΔΑ͏ʹ w 8PSLCPY w IUUQTEFWFMPQFSTHPPHMFDPNXFCUPPMTXPSLCPY w 4FSWJDF8PSLFSʹؔ࿈͢Δɺ༷ʑͳॲཧΛ ؆୯ʹ࣮Ͱ͖ΔϥΠϒϥϦ w ๛ͳ1MVHJO͕༻ҙ͞Ε͍ͯΔ
51
48Ͱ#BDLHSPVOEॲཧ w #BDLHSPVOE'FUDI w όοΫάϥϯυͰσʔλΛऔಘͰ͖Δ w #BDLHSPVOE4ZOD w ΦϑϥΠϯ࣌ʹࣦഊͨ͠ϦΫΤετΛ෮ؼ࣌ʹ࠶࣮ߦͰ͖Δ w
1FSJPEJD#BDLHSPVOE4ZOD w όοΫάϥϯυͰλεΫΛఆظ࣮ߦͰ͖Δ 52
༷ʑͳϓϥοτϑΥʔϜͰ18" w σεΫτοϓ18" $ISPNF04 8JOEPXT -JOVY NBD04 w 8JOEPXTͰͷ18"
w IUUQTXXXTMJEFTIBSFOFUPTBNVNQXBPOXJOEPXT w 5SVTUFE8FC"DUJWJUZ 58" w ಛఆͷ݅1MBZετΞͷϙϦγʔʹै͏͜ͱͰ18"͔Β"1,Λ࡞ ͯ͠(PPHMF1MBZʹొՄೳ w CVCCMFXSBQͱ͍͏$-*πʔϧ༻ҙ͞Ε͍ͯΔ 53
8FCͷ৽͍͠"1*ͱΈ߹Θͤͯ ΑΓωΠςΟϒΞϓϦͷΑ͏ͳମݧ w 8FC4IBSF8FC4IBSF5BSHFU w 4.4 $POUBDU1JDLFS /BUJWF'JMF4ZTUFN w 4IPSUDVUT
#BEHJOH w &UDʜ 54
J04Ͱͷ18" w J04 w ")4͕ར༻Մೳʹ w 4FSWJDF8PSLFS͕ΠϯετʔϧͰ͖ΔΑ͏ʹ w 0BVUIͰͷϩάΠϯ࣌ʹ4BGSJ͕ىಈ18"͔Β ೝূใʹΞΫηεͰ͖ͳ͍
w J04 w 0BVUIϩάΠϯ࣌ʹ18"Οϯυ͕ ্ཱ͕ͪΔೝূใ͕͑Δ J04Ͱ18" ˞ 48ͷ1VTI"1* ͑ͳ͍ 55
·ͱΊ w 4FSWJDF8PSLFSͱ w 8FCϖʔδͷϥΠϑλΠϜΛ͑ͯαʔϏεΛఏڙͯ͘͠ΕΔ 8PSLFS w 48Λ͑ w ΦϑϥΠϯମݧϓογϡ௨ɺ18"ͱͯ͠ͷΠϯετʔϧͳ
ͲωΠςΠϒΞϓϦʹ͍ۙ͜ͱΛ8FCΞϓϦͰఏڙͰ͖Δ 56