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
サービスロボット最前線:ugoが挑むPhysical AI活用
kmatsuiugo
0
190
MySQL HeatWave:サービス概要のご紹介
oracle4engineer
PRO
4
1.7k
Understanding Go GC #coefl_go_jp
bengo4com
0
1.1k
どこで動かすか、誰が動かすか 〜 kintoneのインフラ基盤刷新と運用体制のシフト 〜
ueokande
0
190
モダンな現場と従来型の組織——そこに生じる "不整合" を解消してこそチームがパフォーマンスを発揮できる / Team-oriented Organization Design 20250825
mtx2s
5
540
Backboneとしてのtimm2025
yu4u
4
1.5k
AIとTDDによるNext.js「隙間ツール」開発の実践
makotot
5
690
人と組織に偏重したEMへのアンチテーゼ──なぜ、EMに設計力が必要なのか/An antithesis to the overemphasis of people and organizations in EM
dskst
5
620
ドキュメントはAIの味方!スタートアップのアジャイルを加速するADR
kawauso
3
370
広島銀行におけるAWS活用の取り組みについて
masakimori
0
140
モダンフロントエンド 開発研修
recruitengineers
PRO
2
340
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
2
20k
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
Designing Experiences People Love
moore
142
24k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Typedesign – Prime Four
hannesfritz
42
2.8k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
GraphQLとの向き合い方2022年版
quramy
49
14k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
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~
͋ͳͨʹඞཁͳʮʯͳΜͰ͢ ͔ʁ
͓ΘΓ