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とブラウザでの通知について
Search
Toshihisa Tomatsu
January 22, 2020
Technology
3
330
Service Workerとブラウザでの通知について
Ehime.js #4の資料です。
https://ehimejs.connpass.com/event/162348/
Toshihisa Tomatsu
January 22, 2020
Tweet
Share
More Decks by Toshihisa Tomatsu
See All by Toshihisa Tomatsu
"フロントエンドの技術"を移行する技術 / Frontend Migrations
10shi10ma
0
30
Service Workerとは、それを使ってできること / what-is-service-worker
10shi10ma
3
1.9k
フロントエンドのエコシステム / Frontend Ecosystem
10shi10ma
8
3.2k
意外に知らないnpmと便利なCLI
10shi10ma
8
2.4k
歴史から学ぶ現代のフロントエンド
10shi10ma
17
11k
サイボウズ フロントエンドエキスパートチームとOSSの管理について
10shi10ma
0
1.1k
大規模フロントエンドの技術的負債と向き合う。
10shi10ma
5
5.9k
Google I/O ’19から見る新しいJavaScript
10shi10ma
5
3.1k
React+Storybook ことはじめ
10shi10ma
8
2.5k
Other Decks in Technology
See All in Technology
だいたい分かった気になる 『SREの知識地図』 / introduction-to-sre-knowledge-map-book
katsuhisa91
PRO
3
1.5k
AIを使ってテストを楽にする
kworkdev
PRO
0
280
re:Invent 2025の見どころと便利アイテムをご紹介 / Highlights and Useful Items for re:Invent 2025
yuj1osm
0
360
QA業務を変える(!?)AIを併用した不具合分析の実践
ma2ri
0
160
パフォーマンスチューニングのために普段からできること/Performance Tuning: Daily Practices
fujiwara3
2
150
IBC 2025 動画技術関連レポート / IBC 2025 Report
cyberagentdevelopers
PRO
2
220
プロダクト開発と社内データ活用での、BI×AIの現在地 / Data_Findy
sansan_randd
1
640
猫でもわかるAmazon Q Developer CLI 解体新書
kentapapa
1
150
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
2
150
戦えるAIエージェントの作り方
iwiwi
10
3.7k
会社を支える Pythonという言語戦略 ~なぜPythonを主要言語にしているのか?~
curekoshimizu
4
910
頭部ふわふわ浄酔器
uyupun
0
240
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
186
22k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Reflections from 52 weeks, 52 projects
jeffersonlam
355
21k
Bash Introduction
62gerente
615
210k
Thoughts on Productivity
jonyablonski
71
4.9k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Rails Girls Zürich Keynote
gr2m
95
14k
KATA
mclloyd
PRO
32
15k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Transcript
4FSWJDF8PSLFSͱ ϒϥβͷ௨ʹ͍ͭͯ &IJNFKT 5PTIJIJTB5PNBUTV
֎দढ़ঘ 5PTIJIJTB5PNBUTV αΠϘζגࣜձࣾ ϑϩϯτΤϯυΤΩεύʔτνʔϜ ۚˠ౦ژˠѪඤ &IJNFKT !UPTIJUPNB !UPTIJ@@UPNB 2
None
࠷ۙɺ௨ΛٻΊΔαΠτ͕ଟ͘ͳ͖ͬͯͨ ▸ αΠτʹΞΫηεͨ͠ޙɺ௨ͷڐՄΛٻΊΔμΠΞϩά͕ग़ͨΒͲ͏͢Δʁ
▸ αΠτʹΞΫηεͨ͠ޙɺ௨ͷڐՄΛٻΊΔμΠΞϩά͕ग़ͨΒͲ͏͢Δʁ ▸ ͱΓ͋͑ͣʮ#MPDLʯ ▸ αʔϏεʹΑͬͯॏཁ ▸ ͦͷαʔϏεΛϝΠϯͰͬͯͳ͍͚Ͳɺ௨͕དྷͨΒݟ͍ͨ ▸ ϦϚΠϯμʔػೳɺλΠϚʔػೳFUD
࠷ۙɺ௨ΛٻΊΔαΠτ͕ଟ͘ͳ͖ͬͯͨ
ϒϥβͰ௨Λग़͢ʹʁ
ϒϥβͰ௨Λग़͢ʹ ▸ ํ๏ ▸ 8FC"1*/PUJpDBUJPO ▸ ํ๏ ▸ 8FC"1*1VTI"1* 4FSWJDF8PSLFS3FHJTUSBUJPOTIPX/PUJpDBUJPO
8FC"1*/PUJpDBUJPO
IUUQTEFWFMPQFSNP[JMMBPSHFO64EPDT8FC"1*OPUJpDBUJPO
ํ๏/PUJpDBUJPO ▸ /PUJpDBUJPOT"1*ͷ/PUJpDBUJPOΠϯλϑΣʔε ▸ σεΫτοϓ௨ͷઃఆදࣔΛՄೳʹ͢Δ ▸ λϒΛΓସ͑ͨΓɺผͷΞϓϦʹҠಈ͍ͯͯ͠0, ▸ ௨Λදࣔ͢ΔʹɺݱࡏͷΦϦδϯʹରͯ͠ڐՄΛಘΔඞཁ͕͋Δ ▸
$ISPNF 'JSFGPY 4BGBSJ
௨ͷڐՄ
௨ͷදࣔ
؆୯
$ISPNF%FW5PPMTͷ$POTPMFͰ؆୯ʹࢼͤΔ ▸ 'JSFGPY$POTPMF͔ΒμΠΞϩάग़ͤͳ͔ͬͨ
ͨͩ͠ɺ/PUJpDBUJPOΛग़ ͢+4Λ࣮ߦ͍ͯ͠ΔϖʔδΛ ։͍͓ͯ͘ඞཁ͕͋Δ
ͭ·ΓɺͦͷϖʔδΛด͡Δ ͱ௨͞Εͳ͍
ϒϥβͰ௨Λग़͢ʹ ▸ ํ๏ ▸ 8FC"1*/PUJpDBUJPO ▸ ํ๏ ▸ 8FC"1*1VTI"1* 4FSWJDF8PSLFS3FHJTUSBUJPOTIPX/PUJpDBUJPO
8FC"1*1VTI"1* 4FSWJDF8PSLFS3FHJTUSBUJPO TIPX/PUJpDBUJPO
IUUQTEFWFMPQFSNP[JMMBPSHFO64EPDT8FC"1*1VTI@"1*
IUUQTEFWFMPQFSNP[JMMBPSHFO64EPDT8FC"1*4FSWJDF8PSLFS3FHJTUSBUJPOTIPX/PUJpDBUJPO
IUUQTEFWFMPQFSNP[JMMBPSHFO64EPDT8FC"1*4FSWJDF8PSLFS3FHJTUSBUJPOTIPX/PUJpDBUJPO
4FSWJDF8PSLFS
4FSWJDF8PSLFS ▸ ҰൠతʹϒϥβͰಈ͘+4ɺ8FCϖʔδͷϥΠϑαΠΫϧͰ࣮ߦ ▸ 4FSWJDF8PSLFS8FCϖʔδͱผʹϒϥβͷόοΫάϥϯυͰಈ࡞ ͢Δ+4ͷ࣮ߦڥ Πϕϯτۦಈ 8FCϖʔδ 4FSWJDF8PSLFS +4
+4 )5.- $44
4FSWJDF8PSLFS͕͋Δͱ ▸ ͜Ε·ͰͰ͖ͳ͔ͬͨ͜ͱ͕ՄೳʹͳΔ ▸ ྫ ▸ ΦϑϥΠϯମݧ ▸ ϓογϡ௨ ▸
όοΫάϥϯυಉظ
4FSWJDF8PSLFS͕͋Δͱ ▸ ͜Ε·ͰͰ͖ͳ͔ͬͨ͜ͱ͕ՄೳʹͳΔ ▸ ྫ ▸ ΦϑϥΠϯମݧ ▸ ϓογϡ௨ ▸
όοΫάϥϯυಉظ ϞόΠϧͬΆ͍ʂ →PWA
Πϕϯτۦಈ 8FCϖʔδ 4FSWJDF8PSLFS αʔόʔ POGFUDI POQVTI POTZOD ΠϕϯτʹԠͯ͡ ॲཧ͢ΔΑ
4FSWJDF8PSLFS͕͋Δͱ ▸ ͜Ε·ͰͰ͖ͳ͔ͬͨ͜ͱ͕ՄೳʹͳΔ ▸ ྫ ▸ ΦϑϥΠϯମݧ ▸ ϓογϡ௨ ▸
όοΫάϥϯυಉظ
Ұൠతͳ8FCϖʔδ 8FCϖʔδ αʔόʔ JOEFYIUNM͍ͩ͘͞ BQQDTT͍ͩ͘͞ NBJOKT͍ͩ͘͞ ʹΞΫηε
8FCϖʔδXJUI4FSWJDF8PSLFS 8FCϖʔδ αʔόʔ JOEFYIUNM͍ͩ͘͞ ʹΞΫηε 4FSWJDF8PSLFS Cache͋Δ͔Βɺ ͔ͦͬͪΒฦ͢Ͷ $BDIF
8FCϖʔδXJUI4FSWJDF8PSLFS 8FCϖʔδ αʔόʔ GPPIUNM͍ͩ͘͞ GPPʹΞΫηε 4FSWJDF8PSLFS Cacheͳ͍͔Β αʔόʔʹϦΫΤετ $BDIF 'FUDI"1*
GPPIUNM
4FSWJDF8PSLFSͰ ΦϑϥΠϯରԠͷ࣮ྫ
JOEFYKT 4FSWJDF8PSLFSͷొ 8FCϖʔδ
TXKT 4FSWJDF8PSLFSͷΠϯετʔϧΩϟογϡ࡞ 4FSWJDF 8PSLFS
TXKT GFUDIΠϕϯτΛΩϟονΩϟογϡ͔Βฦ͢ 4FSWJDF 8PSLFS
4FSWJDF8PSLFS͕͋Δͱ ▸ ͜Ε·ͰͰ͖ͳ͔ͬͨ͜ͱ͕ՄೳʹͳΔ ▸ ྫ ▸ ΦϑϥΠϯମݧ ▸ ϓογϡ௨ ▸
όοΫάϥϯυಉظ
ํ๏1VTI"1* 4FSWJDF8PSLFS3FTJHUSBUJPOTIPX/PUJpDBUJPO ▸ 4FSWJDF8PSLFSΛར༻ͯ͠ϓογϡ௨Λ࣮ݱ ▸ 1VTI4FSWJDF͔Βͷϓογϡ௨Λड৴ͯ͠ɺσεΫτοϓ௨Λදࣔ͢Δ ▸ 4FSWJDF8PSLFSΛ͏ͷͰɺϖʔδΛดͯ͡௨͕Մೳ ▸
$ISPNF'JSFGPY
4FSWJDF8PSLFSΛ͏͜ͱͰ ϓογϡ௨Λ࣮ݱ͢Δ
1VTI"1*ͱ/PUJpDBUJPOT"1*Ͱͷ࣮ 4FSWJDF8PSLFSΛΠϯετʔϧ͢Δ 4FSWJDF8PSLFS3FHJTUSBUJPO 4FSWJDF8PSLFS3FHJTUSBUJPOΦϒδΣΫτ͔Β1VTI.BOBHFSΛऔಘ 1VTI.BOBHFSͷTVCTDSJCFؔͰBQQMJDBUJPO4FSWFS,FZΛ͢ͱϓογϡͷߪಡ Λ։࢝
ʙαʔόʔͰϓογϡαʔϏεʹϝοηʔδΛૹ৴ʙ 4FSWJDF8PSLFSͷPOQVTIͰ1VTI4FSWJDF͔Βͷϓογϡ௨Λड৴ /PUJpDBUJPOT"1*ͷ4FSWJDF8PSLFS3FHJTUSBUJPOTIPX/PUJpDBUJPOͰ௨Λ ग़͢
ϓογϡ௨ͷͬ͘͟ΓΠϝʔδ ຊࣄલʹαʔόʔʹ1VTI4VCTDSJQUJPOΛૹ৴͓ͯ͘͠ 8FCϖʔδ αʔόʔ 4FSWJDF8PSLFS 1VTI4FSWJDF ྫ'$. POQVTI
ΫϥΠΞϯτଆͷ ࣮ͷϙΠϯτ͚ͩൈਮ
JOEFYKT 4FSWJDF8PSLFSͷొ 8FCϖʔδ
JOEFYKT 1VTI.BOBHFSΛऔಘ 8FCϖʔδ
JOEFYKT ϓογϡαʔϏεͷߪಡΛཁٻ 8FCϖʔδ
"QQMJDBUJPO4FSWFS,FZͷ࡞ٴͼ1VTI௨Λ؆୯ʹࢼͤΔ IUUQTXFCQVTIDPEFMBCHMJUDINF
TXKT QVTIΠϕϯτ͕དྷͨΒ௨Λग़͢ 4FSWJDF 8PSLFS
TXKT ௨ΛΫϦοΫͨ࣌͠ͷॲཧ࣮Մೳ 4FSWJDF 8PSLFS
ϖʔδΛดͯ͡௨
αʔόʔଆͷ࣮͕ඞཁͳͷͰେม
·ͱΊ ▸ σεΫτοϓ௨Λग़͢߹ɺ/PUJpDBUJPOT"1*Λ͏ ▸ ϖʔδ͕ดͯͯ͡௨Λग़͢ʹɺ4FSWJDF8PSLFSͷ1VTI"1*ͱΈ߹ Θͤͯ͏ αʔόʔαΠυͷ࣮͕ඞཁ ▸ ϖʔδ͕։͍ͯΔ࣌ʹ௨Λग़͢ͳΒɺ/PUJpDBUJPOT"1*ͷ/PUJpDBUJPO
ΠϯλϑΣʔεΛ͑؆୯ʹग़ͤΔ ▸ ؆୯ʹ௨Λग़͗͢͠ΔͱϢʔβʔʹݏΘΕΔͷͰ͍ํҙ
ৄ͘͠Γ͍ͨਓ ▸ 4FSWJDF8PSLFSͷհc8FC'VOEBNFOUBMT ▸ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMT QSJNFSTTFSWJDFXPSLFST IMKB ▸ 8FC1VTIΛʢͪΐͬͱʣৄ͘͠ղઆ͢ΔGVLVPLBQXB ▸
IUUQTTQFBLFSEFDLDPNQJSPTJLJDLXFCQVTIXPUJZPUVUP YJBOHTJLVKJFTIVPTVSVOVNCFSGVLVPLBQXB