Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
HNPWAの紹介 / Introductory talk about HNPWA
tipo159
April 16, 2018
Programming
2
360
HNPWAの紹介 / Introductory talk about HNPWA
HNPWAとは
HNPWAの仕様
データソース仕様
ネットワーク設定
注意事項
tipo159
April 16, 2018
Tweet
Share
More Decks by tipo159
See All by tipo159
ReasonReactとReactのAPIの違い / The Difference between ReasonReact API and React API
tipo159
2
350
REASONの紹介 / Introductory talk about REASON
tipo159
1
310
PWAで何ができるようになるのか / What does PWA do
tipo159
1
760
fetchのCancel Abort方法標準化の変遷 / A History of Cancel Abort Method Standard
tipo159
1
360
ES2015 Proxyを使ってみた / Introductory talk about ES2015 Proxy
tipo159
1
420
Webコンポーネント関連の最新動向 / Recent Topics on Web Components
tipo159
0
470
SlackはどうやってBrowserViewに乗り換えたのか / How Slack move from webview to BrowserView
tipo159
2
3.5k
コンポーネント再利用ってどこまでするの? / How to reuse components
tipo159
0
820
Webデザイナーに聞きたいこと / Questions to ask web designers
tipo159
0
120
Other Decks in Programming
See All in Programming
WindowsコンテナDojo:第2回 Windowsコンテナアプリのビルド、公開、デプロイ
oniak3ibm
PRO
0
150
機能横断型チームにおける技術改善
takeshiakutsu
3
490
SRE bridge the gap: Feature development to Core API / 機能開発チームとコアAPIチームの架け橋としてのSRE
kenzan100
1
410
未経験QAの私が、よきQA(Question Asker) になっていく物語
atamaplus
0
340
コードの解析と言語習得の心得
jinjin33333
0
130
A technique to implement DSL in Ruby
okuramasafumi
0
810
脱オブジェクト指向講座(5分LT資料)
kishida
8
11k
heyにおけるSREの大切さ~マルチプロダクト運用の「楽しさ」と「難しさ」および今後の展望~
fufuhu
3
2.1k
[RailsConf 2022] The pitfalls of realtime-ification
palkan
0
290
LOWYAの信頼性向上とNew Relic
kazumax55
4
370
Composing an API with Kotlin (Kotlin Dev Day 2022)
zsmb
0
290
Hapticをカスタマイズしてみよう / ZOZO Tech Talk #6 Customize Haptic
endoumari
0
360
Featured
See All Featured
Faster Mobile Websites
deanohume
294
28k
Teambox: Starting and Learning
jrom
121
7.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
Art, The Web, and Tiny UX
lynnandtonic
280
17k
Infographics Made Easy
chrislema
233
17k
10 Git Anti Patterns You Should be Aware of
lemiorhan
638
52k
Designing with Data
zakiwarfel
91
3.9k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
100
5.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
4
450
The Straight Up "How To Draw Better" Workshop
denniskardys
225
120k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
Intergalactic Javascript Robots from Outer Space
tanoku
261
25k
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