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
500
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
230
ReasonReactとReactのAPIの違い / The Difference between ReasonReact API and React API
tipo159
2
420
REASONの紹介 / Introductory talk about REASON
tipo159
1
350
PWAで何ができるようになるのか / What does PWA do
tipo159
1
850
fetchのCancel Abort方法標準化の変遷 / A History of Cancel Abort Method Standard
tipo159
1
410
ES2015 Proxyを使ってみた / Introductory talk about ES2015 Proxy
tipo159
1
520
Webコンポーネント関連の最新動向 / Recent Topics on Web Components
tipo159
0
520
SlackはどうやってBrowserViewに乗り換えたのか / How Slack move from webview to BrowserView
tipo159
2
4k
コンポーネント再利用ってどこまでするの? / How to reuse components
tipo159
0
850
Other Decks in Programming
See All in Programming
DocC Tutorial と TCA におけるテスト機能の紹介
kalupas226
1
330
Data Contracts In Practice With Debezium and Apache Flink (Kafka Summit London)
gunnarmorling
2
270
Cloud RunとCloud PubSubでサーバレスなデータ基盤2024 with Terraform / Cloud Run and PubSub with Terraform
shinyorke
7
1.9k
どうしてこうなった命名集 ~🔥編~ / OOC 2024 LT
pictiny
4
2.7k
Deno に Web 標準 API を実装する / Implementing Web Standard API to Deno
petamoriken
0
350
SwiftUI, Jetpack Composeの導入で変化した「家族アルバム みてね」のアプリ開発体験
hicka04
6
390
LLMチャットボットのアプリケーション設計Tips
os1ma
4
650
まっちすいっち戦争 / match vs switch
takuyakatsusa
2
660
イベントストーミングによるオブジェクトモデリング・オブジェクト指向プログラミングの適用・開発プロセスの変遷・アーキテクチャの変革 / Object modeling with Event Storming.
nrslib
12
2.3k
オブジェクト指向コードレビューの新しいアプローチ
akkie76
3
1.1k
オブジェクト指向は必要なのか / Is object-oriented needed?
kishida
27
18k
OpenAPI を守るのは難しい
ohmori_yusuke
1
140
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
174
21k
Producing Creativity
orderedlist
PRO
335
39k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Into the Great Unknown - MozCon
thekraken
10
830
Practical Orchestrator
shlominoach
180
9.7k
Docker and Python
trallard
33
2.6k
The Art of Programming - Codeland 2020
erikaheidi
40
12k
The Pragmatic Product Professional
lauravandoore
24
5.7k
Stop Working from a Prison Cell
hatefulcrawdad
265
19k
How to name files
jennybc
62
92k
How to train your dragon (web standard)
notwaldorf
71
5.1k
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