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
530
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
320
ReasonReactとReactのAPIの違い / The Difference between ReasonReact API and React API
tipo159
2
440
REASONの紹介 / Introductory talk about REASON
tipo159
1
360
PWAで何ができるようになるのか / What does PWA do
tipo159
1
870
fetchのCancel Abort方法標準化の変遷 / A History of Cancel Abort Method Standard
tipo159
1
430
ES2015 Proxyを使ってみた / Introductory talk about ES2015 Proxy
tipo159
1
550
Webコンポーネント関連の最新動向 / Recent Topics on Web Components
tipo159
0
540
SlackはどうやってBrowserViewに乗り換えたのか / How Slack move from webview to BrowserView
tipo159
2
4.1k
コンポーネント再利用ってどこまでするの? / How to reuse components
tipo159
0
860
Other Decks in Programming
See All in Programming
CSC307 Lecture 14
javiergs
PRO
0
220
APIのない大学ログインWebサービスをWKWebViewとJavaScriptでアプリ化した話
akidon0000
1
330
Temporalを取り巻く仕様を整理する
sajikix
0
110
みんなのオブザーバビリティプラットフォームを作ってるんだがパフォーマンスがやばい #mackerelio #srenext
ne_sachirou
0
370
Harnessing Large Language Models for Training-free Video Anomaly Detection
tereka114
1
1.3k
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
MIERUNE BBQにおけるユーザー中心設計()
mierune
PRO
1
110
Product Management LT会_クアンド新家
shinshin
0
210
Rust.Nagoya #1
codemountains
0
170
しくじり先生 Image Matching Challenge 2024 編
goosehaaan
0
810
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
HMSコンペ 11th Solution (team : kansai-kaggler)
t88
1
680
Featured
See All Featured
Leading Effective Engineering Teams 2024
addyosmani
3
300
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
A Philosophy of Restraint
colly
200
16k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
36
9.1k
In The Pink: A Labor of Love
frogandcode
139
22k
Embracing the Ebb and Flow
colly
81
4.3k
[RailsConf 2023] Rails as a piece of cake
palkan
35
4.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Atom: Resistance is Futile
akmur
261
25k
What the flash - Photography Introduction
edds
65
11k
We Have a Design System, Now What?
morganepeng
46
7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
360
22k
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