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
40
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
15
5.1k
Server Side JavaScript のためのバンドル最適化
mizchi
5
6.8k
V8 as a container on CDN Edge worker
mizchi
6
2.1k
Edge Side Frontend という新領域
mizchi
35
14k
バンドル最適化マニアクス at tfconf
mizchi
7
4.3k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
6
2.4k
「フロントエンド領域」を再定義する
mizchi
50
36k
Other Decks in Technology
See All in Technology
次世代KYC活動報告 / 20250219-BizDay17-KYC-nextgen
oidfj
0
460
スキルだけでは満たせない、 “組織全体に”なじむオンボーディング/Onboarding that fits “throughout the organization” and cannot be satisfied by skills alone
bitkey
0
130
AWSを活用したIoTにおけるセキュリティ対策のご紹介
kwskyk
0
280
The Future of SEO: The Impact of AI on Search
badams
0
260
日経のデータベース事業とElasticsearch
hinatades
PRO
0
200
Visualize, Visualize, Visualize and rclone
tomoaki0705
9
75k
生成 AI プロダクトを育てる技術 〜データ品質向上による継続的な価値創出の実践〜
icoxfog417
PRO
5
1.9k
ESXi で仮想化した ARM 環境で LLM を動作させてみるぞ
unnowataru
0
150
Amazon Aurora のバージョンアップ手法について
smt7174
1
110
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
120
OpenID BizDay#17 KYC WG活動報告(法人) / 20250219-BizDay17-KYC-legalidentity
oidfj
0
450
あれは良かった、あれは苦労したB2B2C型SaaSの新規開発におけるCloud Spanner
hirohito1108
2
880
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
Facilitating Awesome Meetings
lara
52
6.2k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Navigating Team Friction
lara
183
15k
Producing Creativity
orderedlist
PRO
344
40k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Optimizing for Happiness
mojombo
376
70k
Being A Developer After 40
akosma
89
590k
Mobile First: as difficult as doing things right
swwweet
223
9.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
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~
͋ͳͨʹඞཁͳʮʯͳΜͰ͢ ͔ʁ
͓ΘΓ