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
690
Lambda@Edgeを利用したサードパーティJavaScriptのカナリアリリース / Canary release using Lamdba@Edge
edwardkenfox
0
89
AWS re:Invent 2019 / Hackathon for Good 参加録
edwardkenfox
2
570
Repro basketball club
edwardkenfox
0
230
Introduction to UX Optimizer
edwardkenfox
0
97
フロントエンド開発の落とし穴 / Fallacies of Client Side Programming (2019ver)
edwardkenfox
0
310
僕と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
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
140
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
390
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
3.3k
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
240
Model Mondays S2E03: SLMs & Reasoning
nitya
0
240
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
1
1.4k
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
310
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
160
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
160
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
380
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
26k
Lazy application authentication with Tailscale
bluehatbrit
0
130
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
329
21k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Being A Developer After 40
akosma
90
590k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
How STYLIGHT went responsive
nonsquared
100
5.6k
Typedesign – Prime Four
hannesfritz
42
2.7k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
How to Ace a Technical Interview
jacobian
277
23k
Building Applications with DynamoDB
mza
95
6.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
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ʹඇͣɺࣗ༝ͳϦ Ϧʔεʹͦ͋͜Γ ɾاۀͷ։ൃɾվળɾ࠾༻ઓུ͕ม ΘΔ ɾΣϒ͕ՃతʹਐԽ͢Δະདྷ
͋Γ͕ͱ͏͍͟͝·ͨ͠