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
CI/CD 改善の勘所
mizchi
0
120
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
16
5.6k
Server Side JavaScript のためのバンドル最適化
mizchi
5
7.3k
V8 as a container on CDN Edge worker
mizchi
6
2.3k
Edge Side Frontend という新領域
mizchi
35
14k
バンドル最適化マニアクス at tfconf
mizchi
8
4.5k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
7
2.5k
「フロントエンド領域」を再定義する
mizchi
50
37k
Other Decks in Technology
See All in Technology
Browser
recruitengineers
PRO
6
2k
衝突して強くなる! BLUE GIANTと アジャイルチームの共通点とは ― いきいきと活気に満ちたグルーヴあるチームを作るコツ ― / BLUE GIANT and Agile Teams
naitosatoshi
0
270
Vault meets Kubernetes
mochizuki875
0
140
「守る」から「進化させる」セキュリティへ ~AWS re:Inforce 2025参加報告~ / AWS re:Inforce 2025 Participation Report
yuj1osm
1
180
知られざるprops命名の慣習 アクション編
uhyo
11
2.8k
Grafana Meetup Japan Vol. 6
kaedemalu
1
180
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
2
580
モバイルアプリ研修
recruitengineers
PRO
5
1.6k
イオン店舗一覧ページのパフォーマンスチューニング事例 / Performance tuning example for AEON store list page
aeonpeople
2
380
AI時代に非連続な成長を実現するエンジニアリング戦略
sansantech
PRO
3
850
おやつは300円まで!の最適化を模索してみた
techtekt
PRO
0
240
ここ一年のCCoEとしてのAWSコスト最適化を振り返る / CCoE AWS Cost Optimization devio2025
masahirokawahara
1
900
Featured
See All Featured
Become a Pro
speakerdeck
PRO
29
5.5k
Agile that works and the tools we love
rasmusluckow
330
21k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Fireside Chat
paigeccino
39
3.6k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
We Have a Design System, Now What?
morganepeng
53
7.8k
Optimizing for Happiness
mojombo
379
70k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Documentation Writing (for coders)
carmenintech
73
5k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
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~
͋ͳͨʹඞཁͳʮʯͳΜͰ͢ ͔ʁ
͓ΘΓ