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
390
3
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Service Workerとブラウザでの通知について
Ehime.js #4の資料です。
https://ehimejs.connpass.com/event/162348/
Toshihisa Tomatsu
January 22, 2020
More Decks by Toshihisa Tomatsu
See All by Toshihisa Tomatsu
"フロントエンドの技術"を移行する技術 / Frontend Migrations
10shi10ma
0
100
Service Workerとは、それを使ってできること / what-is-service-worker
10shi10ma
3
2k
フロントエンドのエコシステム / Frontend Ecosystem
10shi10ma
8
3.4k
意外に知らないnpmと便利なCLI
10shi10ma
8
2.5k
歴史から学ぶ現代のフロントエンド
10shi10ma
17
11k
サイボウズ フロントエンドエキスパートチームとOSSの管理について
10shi10ma
0
1.2k
大規模フロントエンドの技術的負債と向き合う。
10shi10ma
5
6.1k
Google I/O ’19から見る新しいJavaScript
10shi10ma
5
3.2k
React+Storybook ことはじめ
10shi10ma
8
2.6k
Other Decks in Technology
See All in Technology
今こそ聞きたいソフトウェア設計 ドメイン駆動設計再入門
masuda220
PRO
17
7.3k
システム思考で問題に対処する
yussak
0
290
社内の7割が使うデータ基盤を、 データチーム2人で回すためにやったこと
koh_yoshi
4
1.3k
Bill One 開発エンジニア 紹介資料
sansan33
PRO
7
19k
私がブラウザを自作したくなった理由
supurazako
1
230
【CEDEC2026】ゲームシナリオライターを支援するAIツール開発の実践 ― 設計とプロンプトの工夫 ―
cygames
PRO
1
850
老害フォレンジッカーはAI羊の夢を見るか?
tadmaddad
0
330
【CEDEC2026】『ウマ娘 プリティーダービー』 英語版のキャラクターの方言や口調をローカライズするための創造的アプローチ
cygames
PRO
2
940
Sets in Go
ramalho
1
680
ブラウザ研修 2026
recruitengineers
PRO
6
1k
【CEDEC2026】専門性の高いデフォルメチームが挑んだ人材育成戦略 〜Cygames Academiaの企画から実施まで〜
cygames
PRO
0
610
ホームラボ紹介
y_sera15
0
180
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
57
14k
How to make the Groovebox
asonas
2
2.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
62k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
baasie
0
470
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
Speed Design
sergeychernyshev
33
2k
Reality Check: Gamification 10 Years Later
codingconduct
0
2.2k
Become a Pro
speakerdeck
PRO
31
6.2k
jQuery: Nuts, Bolts and Bling
dougneiner
66
8.5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Discover your Explorer Soul
emna__ayadi
2
1.3k
Faster Mobile Websites
deanohume
310
32k
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