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
加速するフロントエンドとPWA
Search
Koutarou Chikuba
February 16, 2018
Technology
56
15k
加速するフロントエンドとPWA
at DevSumi 2018
Koutarou Chikuba
February 16, 2018
Tweet
Share
More Decks by Koutarou Chikuba
See All by Koutarou Chikuba
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
14
4.4k
Server Side JavaScript のためのバンドル最適化
mizchi
5
6.1k
V8 as a container on CDN Edge worker
mizchi
5
1.8k
Edge Side Frontend という新領域
mizchi
33
13k
バンドル最適化マニアクス at tfconf
mizchi
7
4k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
6
2.2k
「フロントエンド領域」を再定義する
mizchi
50
35k
光を超えるためのフロントエンドアーキテクチャ
mizchi
84
21k
Other Decks in Technology
See All in Technology
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
フルリモートワークはエンジニアの夢を叶えたか? #cm_odyssey
mamohacy
2
600
ここがすごいよ! AWS Systems Manager!
saichan11
0
1.8k
Scaling Technical Excellence at 104: Evolution in AWS and Developer Empowerment
scotthsieh825
1
160
さらに高品質・高速化を目指すAI時代のテスト設計支援と、めざす先 / AI Test Lab vol.1
shift_evolve
0
190
運用改善、不都合な真実 / 20240722-ssmjp-kaizen
opelab
17
8.2k
[2024最新版]AWS Control Towerを使ったセキュアなマルチアカウント環境の作り方
hiashisan
0
270
Docker互換のセキュアなコンテナ実行環境「Podman」超入門
devops_vtj
6
3.2k
【基調講演】変える、今ここから ― IoTとAIで紡ぐ未来
soracom
PRO
0
320
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
Datadog Cloud SIEMを使ってAWS環境の脅威を可視化した話/lifeistech-datadog-cloud-siem
gidajun
0
480
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
Featured
See All Featured
Done Done
chrislema
179
15k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Rails Girls Zürich Keynote
gr2m
93
13k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Designing for humans not robots
tammielis
247
25k
It's Worth the Effort
3n
181
27k
In The Pink: A Labor of Love
frogandcode
139
22k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
Adopting Sorbet at Scale
ufuk
71
8.8k
A designer walks into a library…
pauljervisheath
201
24k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
Transcript
Ճ͢ΔϑϩϯτΤϯυͱPWA @mizchi Developers Summit 2018
ࣗݾհ • അޫଠ / mizchi • node.js / ϑϩϯτΤϯυΤϯδχΞ •
ϑϦʔϥϯε • ϦΫϧʔτςΫϊϩδʔζ༷ • freeeגࣜձ༷ࣾ • etc...
ʮReactͷਓʯ
None
ܦྺ • େֶ࣌: WebSocket Ͱ MMORPG ΛҰਓͰ࣮ • 2012~ ήʔϜܥ:
HTML5 / Unity / Flash • 2013~ EdTechܥ: ڭࢣ͚ڭࡐΦʔαϦϯάπʔϧ • 2014~ Qiita: ϓϩάϥϚࢧԉπʔϧ • 2017~ ϑϦʔϥϯε
ࠓͷ༰ • PWAʹ͍ͭͯ • ϑϩϯτΤϯυͷߴԽʹ͍ͭͯ • ύϥμΠϜ͕ԿʹมΘΔ͔
͞ͳ͍͜ͱ • ࣮ͷৄࡉ • ࡉ͔͍༷
CAUTION!!! ࣗͷʹ͍ͭͯ • ϑϩϯτΤϯυͱ͍͍ͭͭJSத৺ɺಛʹSPAภॏ • ͍ΘΏΔʮWeb੍࡞ʯͱແԑ • PWAͷղऍʹ͍ͭͯɺGoogleͱҧ͏ղऍΛ͍ͯ͠Δ͔
ࠓݺΕͨίϯςΩετ
dev.to ͱ͍͏αΠτ͕ੌ͍ • ւ֎ͷ qiita Έ͍ͨͳΣϒαΠτ • ҟৗͳϨεϙϯε • ҙ֎ͱγϯϓϧͳઃܭ
ʮͳͥ dev.to ͕ʙʯཁ • ʮࠓʯͷύϑΥνϡͷৗࣝͰɺਅͬʹ࡞Δͱ͜Μͳʹ͍ • ͳ͕ͥࣗͰ͖ͳ͔ͬͨͷ͔ɺչ͍͠ • (ٕज़తͳৄࡉޙड़)
ࠃͷࣄྫ: https://r.nikkei.com ܦిࢠ൛Λ͘͢Δ / nikkei-inside-frontend
PWAͱԿ͔
᷿ͷPWA • Google ͷਪਐ͢Δ࣍ੈͷϑϩϯτΤϯυڥ • ͿͬͪΌ͚ʮHTML5ʯ ͷϦϒϥϯσΟϯάײ ΈΜͳຊʹཧղͯ͠·͔͢ʁʁʁ
ຊ࣭Λݟ·͠ΐ͏
ڱٛͷPWA • ϞμϯͳϒϥβΛ͏ϢʔβʔʹɺΑΓྑ͍ମݧΛɺͱ͍ ͏ʮํੑʯ • ServiceWorker ΛͬͯϞόΠϧΞϓϦͷମݧʹ͍ͭͨ͘ Ίͷʮ࣮ʯ
None
ϨΨγʔͷڥք • ServiceWorker ͕࣮͞Ε͍ͯΔ͔൱͔ • ϨΨγʔ = IE, Safari !
• Ϟμϯ = ͦΕҎ֎
None
ServiceWorker ͱ • όοΫάϥϯυͰಈ͘ϩʔΧϧϓϩΩγ • ͋ΒΏΔϨεϙϯεΛॻ͖͑Մೳ • HTML5 Application Cache
ͷϦϒʔτ
ҙ!!!! ͔͜͜ΒઌैདྷͷϦΫΤετ&ϨεϙϯεϞσϧͷৗ͕ࣝ௨༻͠ ·ͤΜ ઌೖ؍ΛऔΓআ͍͍ͯͩ͘͞
None
ServiceWorkerͷىಈ // client / SWىಈ navigator.serviceWorker.register('/sw.js', {scope: '/'}) // sw.js
self.addEventListener('fetch', event => { // logging ͢Δ͚ͩ console.log(event.request.url); });
None
Service Worker Ͱग़དྷΔ͜ͱ • ͋ΒΏΔʢຊʹશͯͷ)Ϩεϙϯεͷಈతͳॻ͖͑ • ΦϑϥΠϯΩϟογϡ • όοΫάϥϯυॲཧ •
ϓογϡ௨
Service Worker Ͱग़དྷͳ͍͜ͱ • ৗறϓϩηε • Workerͷੜଘ࣌ؒϦΫΤετ։͔࢝Β15~30ඵఔ • ϝϞϦ༻ྔ੍ݶ •
Web Budget API (͍͜͠ͷͰࠓճׂѪ)
ʮWebͷৗࣝʯͷҰͭͷస • αʔόʔʹ௨ => Ϩεϙϯεಈతʹॻ͖ΘΔ • history.pushState ҎདྷͷϥΠϑαΠΫϧͷେ͖ͳมԽ(ޙ ड़)
history.pushState
None
None
history.pushState Կ͔ͩͬͨ • ಉҰυϝΠϯ෦ͰಈతʹURLΛॻ͖͑Δٕज़ • ಉҰϖʔδͷϥΠϑαΠΫϧͷԆ • Single Page Application
ͷجૅٕज़ͷҰͭ
PWA: ΦϑϥΠϯԽͷྫ
Offline Cache ͷίʔυྫ // sw.js self.addEventListener('fetch', event => { event.respondWith(
caches.match(event.request).then(response => { return response || fetch(event.request); }) ); });
None
Կ͕ى͍ͬͯ͜Δ͔ • ҰճͷϦΫΤετͰΩϟογϡΛஷΊΔ • ೋճ͔ΒΩϟογϡΛͬͯىಈ • html,js,css Λʮαʔόʔʹ౸ୡ͢ΔલʹʯϓϩΩγग़དྷΔ
None
None
ΞϓϦέʔγϣϯͱͯ͠ͷPWA • ΦϑϥΠϯΩϟογϡͰىಈ͠ɺαʔόʔʹґଘ͠ͳ͍ܗଶ • ͍͔ͭ͘ͷڥͰΞϓϦͱͯ͠ొͰ͖Δ • Android: Add to Homescreen
• Windows Store
࠷ۙͷχϡʔε • ϚΠΫϩιϑτɺProgressive Web AppsʢPWAʣΛ Windows 10ͷσεΫτοϓͰ࣮ߦՄೳʹɻWindows 10 WindowsɺLinuxɺPWAରԠͷϓϥοτϑΥʔϜ http://
www.publickey1.jp/blog/18/ progressivewebappspwawindows10windows10windowsl inuxpwa.html
ؔ࿈ٕज़: Web Packaging • ΣϒϖʔδΛҰͭͷόΠφϦʹͯ͢͠Δٕज़ • ༷: https://github.com/WICG/webpackage • AMP
Web Packaging ରԠͰ࠶ߏங͞ΕΔํੑ • https://amphtml.wordpress.com/2018/01/09/ improving-urls-for-amp-pages/
ΞϓϦέʔγϣϯԽ: ڝ߹͢Δٕज़ • Electron • PC൛ Chrome ͕ Add to
homescreen ʹରԠ༧ఆ • React Native • Webٕज़ͷ Mobile App ։ൃڥͱ͍͏Ͱڝ߹
ͳͥΦϑϥΠϯԽ͕େࣄ͔ • Googleͷݴ͍: ·ͩΠϯλʔωοτ͕ශऑͳڥ͕ଟ͍ • ޫ͕͍ / ࠃ: 20ms~50ms, ΞϝϦΧ:
100ms~ • UXΛಥ͖٧ΊΔͨΊʹޫΛ͑Δ
࣮ྫ: dev.to
None
dev.to ͷΈ • ॳճϦΫΤετΛ CDN Ͱ cache • ϦϯΫཁૉͷΦϯϚεͰɺભҠઌΛࣄલʹ fetch
& cache • ࣮ࡍͷϨεϙϯεSWͷCache͔Βฦ٫ ࢀߟ: https://dev.to/ben/making-devto-insanely- fast
None
dev.to ͔ΒֶΔ͜ͱ • ͕͞࠷ॳ͔ΒઃܭʹΈࠐ·Ε͍ͯΔ • ϒϥβ CDN ͱ OfflineCache ͔͠૬खΛ͠ͳ͍
• ߋ৽࣌ͷ cache ͷഁغઓུΛ٧ΊΔ • ࠷ߴͷUX(͋Δ͍ͦͷ)
ServiceWorker: ಁաతͳߴԽ • ͋͘·ͰطଘͷWebৼΔ͍ΛकΓͭͭߴԽ • SWͷਅͷϙςϯγϟϧΛ׆͔͖͠ΔͷɺIE͕ࢮΜͩޙ • ͋Δ͍։ൃऀπʔϧͳΒࠓ͙͢
PWAͱԿ͔: ·ͱΊ • Service Worker ΛͷͨΊʹಁաతͳͱͯ͠͏ • IE͕ࢮ͵·Ͱͷ௨ա • Push௨͏ͪΐͬͱޙ͔Ͷ
ݱ࣮
ຊʹ PWA ͷ͕࣌དྷΔͷ͔ • Mobile vs Web ͷཧઓ૪ͷؾ • Internet
Explorer !!!!! • Push Notification
IE: αϙʔτظݶ • Windows10 IE11: 2025/10/14 • Windows10 ʹ Edge
ࡌࡁΈ • Edge Λ͑ͱݴ͑ΔՄೳੑʁ • Windows7(8) IE11: 2020/01/14
IE: ߈ུํ๏ • Mobile First Index • ࠓޙϞόΠϧ൛ΣϒαΠτͰΫϩʔϥʹIndex͞ΕΔ • ੈքతʹσεΫτοϓγΣΞԼؾຯ
=> ϞόΠϧΛλʔήοτʹ͢Δ = IEΛ͢ํศ
ʮPWAಁաతͳΩϟογϡʯ • SWಡΈࠐΈલͰ • SW͕ͳͯ͘ • SWಡΈࠐΈࡁΈͰ ಉ͡ಈ͖Λ͢Δͣ
ݱʹ͍Ζ͍Ζͳཁٻ͕͋ΔͷͰ அօ͞Μ͓·͔ͤ͠·͢
Push Notification • ݱࡏਐߦܗͰେྔͷϔΠτΛങͬͯΔ ͜Ε
Push Notification ͷίʔυྫ self.addEventListener('push', event => { event.waitUntil( self.registration.showNotification('λΠτϧ', {
body: 'ຊจ' }) ); });
Push Notification • pushͱpush notificationґଘ͢Δ͚Ͳҧ͏ͷ • push௨ͷෆධͰόοΫάϥϯυॲཧ͕௵͞ΕΔͷ…
: Push ͱ Apple • Safari TP11 ͷ SW ʹ
onfetch ͋ͬͯ onpush ͳ͍ • AppStore Notification Center ͱͷམͱ͠ॴ͕ඞཁ
None
PWAͷߴԽΛݟͭΊͳ͓͢
ύϑΥʔϚϯενϡʔχϯάͱ • ࢧతͳϒϩοΩϯάཁૉΛ୳͢ • ௵͢ • ܁Γฦ͢ ʮਪଌ͢ΔͳɺܭଌͤΑʯ
None
ࢦඪͷऔΓํ • DevTools • Lighthouse • Puppeteer
DevToolsͷΛಡΉ
Lighthouse • Google ͷ ύϑΥʔϚϯεϝτϦΫεπʔϧ • ύϑΥʔϚϯε • SEO •
ΞΫηγϏϦςΟ • PWA Support
ͨͩߴͳΞϓϦΛ࡞Δ $ npm install -g preact-cli $ preact create simple
myapp // deploy it
None
ڏແ͍ • ͲΜͳͷ࡞ͬͨͱ͖͍ • ͦΕΛҡ࣋͢Δͷ͍͠ • ʮॏ͞ʯͱʮػೳͷॏΈʯͰ͋Δ
͋ͳͨͷΣϒΛ͘͢Δͷ • ॏ͍SQL • ղ૾ͷߴ͍ը૾ • ࠂʹΑΔϒϩοΩϯά • ୯ແཧղʹΑΔॳظԽύεͷෳࡶԽ
ʮʯʹ͍Ζ͍Ζ͋Δ • ΠϯλϥΫγϣϯ: 16ms~ • ωοτϫʔΫ: 100ms~ • ϓϩτλΠϐϯά: 1ϲ݄~
• ػೳՃ: 1िؒ~ • ϓϩμΫτͷϥΠϑαΠΫϧ: 1~ • ্: 3~
͋ͳͨʹඞཁͳʮʯͳΜͰ͢ ͔ʁ
͓ΘΓ