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
130
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
16
5.7k
Server Side JavaScript のためのバンドル最適化
mizchi
5
7.4k
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
プロポーザルのコツ ~ Kaigi on Rails 2025 初参加で3名の登壇を実現 ~
naro143
1
230
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
6
1k
速習AGENTS.md:5分で精度を上げる "3ブロック" テンプレ
ismk
6
1.3k
Git in Team
kawaguti
PRO
3
370
Claude Codeを駆使した初めてのiOSアプリ開発 ~ゼロから3週間でグローバルハッカソンで入賞するまで~
oikon48
1
460
プロダクトのコードから見るGoによるデザインパターンの実践 #go_night_talk
bengo4com
1
2.5k
カンファレンスに託児サポートがあるということ / Having Childcare Support at Conferences
nobu09
1
560
Codexとも仲良く。CodeRabbit CLIの紹介
moongift
PRO
0
200
能登半島地震において デジタルができたこと・できなかったこと
ditccsugii
0
190
『バイトル』CTOが語る! AIネイティブ世代と切り拓くモノづくり組織
dip_tech
PRO
1
120
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
260
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
930
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.5k
How to Think Like a Performance Engineer
csswizardry
27
2k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
A designer walks into a library…
pauljervisheath
209
24k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
How GitHub (no longer) Works
holman
315
140k
Embracing the Ebb and Flow
colly
88
4.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.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~
͋ͳͨʹඞཁͳʮʯͳΜͰ͢ ͔ʁ
͓ΘΓ