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
HNPWAの紹介 / Introductory talk about HNPWA
Search
tipo159
April 16, 2018
Programming
2
640
HNPWAの紹介 / Introductory talk about HNPWA
HNPWAとは
HNPWAの仕様
データソース仕様
ネットワーク設定
注意事項
tipo159
April 16, 2018
Tweet
Share
More Decks by tipo159
See All by tipo159
Type-safe front-end development using Rust/Rustを使った型安全なフロントエンド開発
tipo159
0
440
ReasonReactとReactのAPIの違い / The Difference between ReasonReact API and React API
tipo159
2
520
REASONの紹介 / Introductory talk about REASON
tipo159
1
390
PWAで何ができるようになるのか / What does PWA do
tipo159
1
970
fetchのCancel Abort方法標準化の変遷 / A History of Cancel Abort Method Standard
tipo159
1
510
ES2015 Proxyを使ってみた / Introductory talk about ES2015 Proxy
tipo159
1
640
Webコンポーネント関連の最新動向 / Recent Topics on Web Components
tipo159
0
600
SlackはどうやってBrowserViewに乗り換えたのか / How Slack move from webview to BrowserView
tipo159
2
4.3k
コンポーネント再利用ってどこまでするの? / How to reuse components
tipo159
0
910
Other Decks in Programming
See All in Programming
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
2
240
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
110
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
110
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
450
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
1.7k
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
330
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
Navigating Dependency Injection with Metro
zacsweers
3
990
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
10
4.3k
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
Faster Mobile Websites
deanohume
309
31k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Facilitating Awesome Meetings
lara
55
6.5k
It's Worth the Effort
3n
187
28k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Rails Girls Zürich Keynote
gr2m
95
14k
Agile that works and the tools we love
rasmusluckow
330
21k
Transcript
HNPWAͷհ PWA Beginners ษڧձ #3 2018.4.16 tipo159
ΞδΣϯμ • HNPWAͱ • Hacker Newsͱ • HNPWAͷ༷ • σʔλιʔε༷
• ωοτϫʔΫઃఆ • ҙࣄ߲ • HNPWA Time to interactiveͷ݁Ռ(Ұ෦ൈਮ) 2
HNPWAͱ • PWAͰ࡞ͬͨHacker NewsϦʔμʔͷ࣮ྫΛूੵ͢Δα Πτ https://hnpwa.com • TodoMVCͷਫ਼ਆతͳޙܧऀ • TodoMVCɼJavaScriptΞϓϦέʔγϣϯ։ൃऀͷMV*
ϑϨʔϜϫʔΫͷબΛॿ͚͍ͯͨ • ϞμϯϒϥβͷೳྗʹରԠͰ͖͍ͯͳ͔ͬͨ 3
Hacker Newsͱ • ίϯϐϡʔλελʔτΞοϓؔ࿈ͷιʔγϟϧχϡʔεα Πτ • YίϯϏωʔλ͕ӡӦ 4
HNPWAͷ༷(1/2) • ඞਢ݅ • Top Stories, New, Show, Ask, Jobs
& threaded CommentsͷϏϡʔ Λ࣮ • ֤ϏϡʔɼγΣΞͰ͖ΔΑ͏ϧʔςΟϯάΛ༻ • Story listϏϡʔϖʔδͨΓ30ΞΠςϜΛදࣔ • Progressive Web App • LighthouseͰ90/100Ҏ্ • 3GͷMoto G4Ͱ5ඵҎʹΠϯλϥΫςΟϒʹͳΔɽWebPageTest ͷauto-selected Moto G4 + Faster 3GͰ”Time to interactive”Λଌఆ 5
HNPWAͷ༷(2/2) • Application ShellύλʔϯΛ༻ • σεΫτοϓɼϞόΠϧڞʹϨεϙϯγςΟϒ • ՄೳͳݶΓΫϩεϒϥβಈ࡞ • Φϓγϣϯ݅
• Hacker NewsσʔλͷΦϑϥΠϯΩϟογϯά • αʔόʔαΠυϨϯμϦϯά • ϢʔβΠϯλϑΣʔε • ݱ࣌ͰελΠϧγʔτ࣮ςʔϚΛఏڙ͍ͯ͠ͳ͍͕ɼকདྷతʹ ఏڙ༧ఆ 6
σʔλιʔε༷ • Official real-time Hacker News API powered by Firebase
http://hacker-news.firebaseio.com/v0/ • Unofficial APIͱ݅Λἧ͑ΔͨΊɼϖʔδͨΓ30ε τʔϦʔΛ༻ • Unofficial Hacker News API https://node-hnapi.herokuapp.com/ 7
ωοτϫʔΫઃఆ • Emerging Markets • 400Kbps 3G Ԇ400ms • WebPageTest:
auto-selected Moto G4 + Emerging Markets • Faster 3G • 1.6Mbps 3G Ԇ300ms • WebPageTest: auto-selected Moto G4 + Faster 3G 8
ҙࣄ߲ • ϑϨʔϜϫʔΫͷੑೳൺֱʹ༻͍͍͚ͯͳ͍ • ϧʔζͳ༷ʹج͍࣮ͮͨ • αʔόஔʹΑΔੑೳͷӨڹ • ϑϨʔϜϫʔΫҎ֎ͷ࣮͕ҟͳΔ •
࣮࣌ظ͕࠷େ11ϲ݄ҟͳΔ • WebPageTestͰɼΠϯλϥΫςΟϒʹͳΔ·Ͱͷ࣌ؒଌఆͰ͖ Δ͕ɼϢʔβૢ࡞ͷԠ࣌ؒଌఆͰ͖ͳ͍ • ྫ͑ɼαʔόαΠυϓϦϑΣονΛ࣮͍ͯͯ͠ɼ WebPageTestͷଌఆ݁Ռʹө͞Εͳ͍ 9
HNPWA Time to interactiveͷ݁Ռ(Ұ෦ൈਮ) 10
'JSFCBTF 7JQFS 1SFBDU 3FBDU "OHVMBS 7VF 'BUFS( &NFSHJOH
ࢀߟใ • App Shell Ϟσϧ https://developers.google.com/web/fundamentals/architecture/app-shell?hl=ja • sw-precache? sw-toolbox? What's
the difference? https://github.com/GoogleChromeLabs/sw-precache/blob/master/sw-precache-and-sw- toolbox.md • sw-precache/GettingStarted https://github.com/GoogleChromeLabs/sw-precache/blob/master/GettingStarted.md • sw-toolbox https://googlechromelabs.github.io/sw-toolbox/ • Workbox https://developers.google.com/web/tools/workbox/ • Lab: Migrating to Workbox from sw-precache and sw-toolbox https://developers.google.com/web/ilt/pwa/lab-migrating-to-workbox-from-sw- precache-and-sw-toolbox • PRPL ύλʔϯ https://developers.google.com/web/fundamentals/performance/prpl-pattern/?hl=ja 11