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
これからのウェブの話をしよう – あるいは、ServiceWorkerとPWAで変わるフロント...
Search
Edward Fox
February 23, 2018
Technology
0
130
これからのウェブの話をしよう – あるいは、ServiceWorkerとPWAで変わるフロントエンドとモバイル開発について
20180223 @社内LT会
Edward Fox
February 23, 2018
Tweet
Share
More Decks by Edward Fox
See All by Edward Fox
Priorityを制するものはローディングを制す
edwardkenfox
4
700
Lambda@Edgeを利用したサードパーティJavaScriptのカナリアリリース / Canary release using Lamdba@Edge
edwardkenfox
0
91
AWS re:Invent 2019 / Hackathon for Good 参加録
edwardkenfox
2
570
Repro basketball club
edwardkenfox
0
240
Introduction to UX Optimizer
edwardkenfox
0
99
フロントエンド開発の落とし穴 / Fallacies of Client Side Programming (2019ver)
edwardkenfox
0
320
僕とprototypeとJSONで / Me and prototype down by the JSON
edwardkenfox
0
130
クライアントサイド開発の落とし穴 / Fallacies of Client Side Programming
edwardkenfox
0
430
Beacon API ことはじめ 〜そしてkeepalive fetchへ〜 / Beacon API The Basics
edwardkenfox
0
1.1k
Other Decks in Technology
See All in Technology
Microsoft Learn MCP/Fabric データエージェント/Fabric MCP/Copilot Studio-簡単・便利なAIエージェント作ってみた
reireireijinjin6
1
110
Ktor + Google Cloud Tasks/PubSub におけるOTel Messaging計装の実践
sansantech
PRO
1
320
PHPでResult型やってみよう
higaki_program
0
200
AIに全任せしないコーディングとマネジメント思考
kikuchikakeru
0
240
Shadow DOMとセキュリティ - 光と影の境界を探る / Shibuya.XSS techtalk #13
masatokinugawa
0
310
Turn Your Community into a Fundraising Catalyst for Black Philanthropy Month
auctria
PRO
0
180
スプリントレビューを効果的にするために
miholovesq
9
1.7k
Semantic Machine Intelligence for Vision, Language, and Actions
keio_smilab
PRO
2
410
怖くない!GritQLでBiomeプラグインを作ろうよ
pal4de
1
130
増え続ける脆弱性に立ち向かう: 事前対策と優先度づけによる 持続可能な脆弱性管理 / Confronting the Rise of Vulnerabilities: Sustainable Management Through Proactive Measures and Prioritization
nttcom
1
210
Kiro Hookを Terraformで検証
ao_inoue
0
130
モバイルゲームの開発を支える基盤の歩み ~再現性のある開発ラインを量産する秘訣~
qualiarts
0
570
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Typedesign – Prime Four
hannesfritz
42
2.7k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
A designer walks into a library…
pauljervisheath
207
24k
Faster Mobile Websites
deanohume
308
31k
Making Projects Easy
brettharned
116
6.3k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Transcript
͜Ε͔ΒͷΣϒͷ Λ͠Α͏ ͋Δ͍ɺServiceWorkerͱPWAͰมΘΔ ϑϩϯτΤϯυͱϞόΠϧ։ൃʹ͍ͭͯ Edward Fox 2018/02/23 @Repro Weekly MTG
@edwardkenfox Edward Fox ɾΤϯδχΞ@Reproגࣜձࣾ ɾʑͷํ͔Βདྷ·ͨ͠ ɾRuby, JavaScript, AWS ɾϒϥβٕज़શൠ, PWA,
Vue.js
TOC 1. ServiceWorkerͱ 2. PWAͱ 3. Կ͕ʢ୭͕ʣخ͍͠ͷ͔ 4. ͜Ε͔ΒԿ͕ى͖Δͷ͔
1. ServiceWorkerͱ
ϒϥβͷUIεϨου͔Β ಠཱͯ͠ಈ͘ ϩʔΧϧϓϩΩγ
ɾUIεϨου͔ΒͷωοτϫʔΫϦ ΫΤετΛϓϩΩγͰ͖Δ ɾlocalStorageIndexedDBͱผͷ ΩϟογϡετϨʔδΛར༻Մೳ ɾΩϟογϡ͔ΒϨεϙϯεΛ ฦͨ͠ΓɺϨεϙϯεΛվ᜵Ͱ͖Δ ɾΦϑϥΠϯ࣌ಈ࡞͢Δ
σϞ http://127.0.0.1:8889/
2. PWAͱ
Progressive Web Applications
ServiceWorkerͳͲͷ ઌਐతͳϒϥβAPIΛ͍ ༏ΕͨϢʔβʔମݧΛ ఏڙ͢ΔΞϓϦέʔγϣϯ
※ ಛఆͷٕज़༷ɺ ϑϨʔϜϫʔΫΛࢦ͢ ༻ޠͰͳ͍
ɾΦϑϥΠϯରԠ ɾϓογϡ௨ ɾϗʔϜεΫϦʔϯʹՃ ͳͲϞόΠϧΞϓϦʹଘࡏ ͍ͯͨ͠UXΛΣϒͰ ఏڙ͠Α͏ɺͱ͍͏ಈ͖
༨ஊ
Σϒϓογϡ ݏΘΕ͗͢
None
3. Կ͕ʢ୭͕ʣخ͍͠ͷ͔
3ͭͷొਓ
ɾPWAΛਪਐ͢Δاۀ ɾαʔϏεఏڙऀ ɾΤϯυϢʔβʔ
ͦΕͧΕͷϝϦοτΛ ݟͯΈΔ
PWAΛਪਐ͢Δاۀͷࢹ ɾ༏ΕͨϢʔβʔମݧ ɾΞϓϦˠΣϒͷ༳Γ͠ => Σϒࠂ૿ʁ
αʔϏεఏڙऀͷࢹ ɾࣗ༝ʹϦϦʔεͰ͖Δ => ϦδΣΫτʹΑΔڪා࣏ ͔Βͷ٫ => PDCAߴԽ
※PWAԽ͞ΕͨαʔϏεͷ தͷਓվળhotfix͕ ͙͢ϦϦʔεͰ͖Δͷ͕ ϚΈͱݴͬͯ·ͨ͠
ΤϯυϢʔβʔͷࢹ ɾUXʹมԽͳ͍ʢ͍·ͷͱ͜Ζʣ ɾΠϯετʔϧʗΞοϓσʔτ͕ෆ ཁʢ˺ΪΨઅʁʣ
4. ͜Ε͔ΒԿ͕ى͖Δͷ͔
4.1. ΣϒͷਐԽͷૅͱͳΔ
ServiceWorker + Gamepad API + WebAssembly => େنϒϥβήʔϜ ʢΦϑϥΠϯରԠʣ
ServiceWorker + Geolocation API, navigator.bluetooth, navigator.getBattery() & etc. => ϞόΠϧΛओͱͨ͠
৽͍͠λΠϓͷαʔϏε
Web Components ES Modules Payment Request API QUIC ͳͲͷ৽͍ٕ͠ज़ͱͷ γφδʔ
ϢʔβʔͷՄॲ࣌ؒΛ ϞόΠϧͷྖҬͷதͰ ͍͔ʹୣ͏͔͕େࣄͰ͋Γٕज़ ࣮ॏཁͰͳ͍ => ϞόΠϧΛओͱͨ͠ ΣϒαʔϏε͕ΕΔ͜ͱ͕ ֨ஈʹ૿͑Δ
4.2. ࠾༻ઓུ͕มΘΔ
ωΠςΟϒΞϓϦ ↓ ϋΠϒϦουΞϓϦ ↓ React Native ↓ PWA
JavaScriptΤϯδχΞͷ धཁ⚽⚽
·ͱΊ
ɾServiceWorker = ϩʔΧϧϓϩΩ γ ɾPWAͷԸܙUXʹඇͣɺࣗ༝ͳϦ Ϧʔεʹͦ͋͜Γ ɾاۀͷ։ൃɾվળɾ࠾༻ઓུ͕ม ΘΔ ɾΣϒ͕ՃతʹਐԽ͢Δະདྷ
͋Γ͕ͱ͏͍͟͝·ͨ͠