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
740
Lambda@Edgeを利用したサードパーティJavaScriptのカナリアリリース / Canary release using Lamdba@Edge
edwardkenfox
0
99
AWS re:Invent 2019 / Hackathon for Good 参加録
edwardkenfox
2
580
Repro basketball club
edwardkenfox
0
240
Introduction to UX Optimizer
edwardkenfox
0
110
フロントエンド開発の落とし穴 / Fallacies of Client Side Programming (2019ver)
edwardkenfox
0
330
僕とprototypeとJSONで / Me and prototype down by the JSON
edwardkenfox
0
140
クライアントサイド開発の落とし穴 / Fallacies of Client Side Programming
edwardkenfox
0
450
Beacon API ことはじめ 〜そしてkeepalive fetchへ〜 / Beacon API The Basics
edwardkenfox
0
1.1k
Other Decks in Technology
See All in Technology
それでも私が品質保証プロセスを作り続ける理由 #テストラジオ / Why I still continue to create QA process
pineapplecandy
0
170
AI時代の開発を加速する組織づくり - ブログでは書けなかったリアル
hiro8ma
1
290
今この時代に技術とどう向き合うべきか
gree_tech
PRO
2
2.2k
AWS DMS で SQL Server を移行してみた/aws-dms-sql-server-migration
emiki
0
120
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
12
81k
serverless team topology
_kensh
3
190
AIエージェント入門 〜基礎からMCP・A2Aまで〜
shukob
1
160
クラウドとリアルの融合により、製造業はどう変わるのか?〜クラスメソッドの製造業への取組と共に〜
hamadakoji
0
380
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
43k
物体検出モデルでシイタケの収穫時期を自動判定してみた。 #devio2025
lamaglama39
0
280
Introdução a Service Mesh usando o Istio
aeciopires
1
280
「REALITY」3Dアバターシステムの7年分の拡張の歴史について
gree_tech
PRO
0
140
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
97
6.3k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Into the Great Unknown - MozCon
thekraken
40
2.1k
RailsConf 2023
tenderlove
30
1.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Optimizing for Happiness
mojombo
379
70k
Mobile First: as difficult as doing things right
swwweet
225
10k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
A better future with KSS
kneath
239
18k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
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ʹඇͣɺࣗ༝ͳϦ Ϧʔεʹͦ͋͜Γ ɾاۀͷ։ൃɾվળɾ࠾༻ઓུ͕ม ΘΔ ɾΣϒ͕ՃతʹਐԽ͢Δະདྷ
͋Γ͕ͱ͏͍͟͝·ͨ͠