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
630
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
430
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
960
fetchのCancel Abort方法標準化の変遷 / A History of Cancel Abort Method Standard
tipo159
1
500
ES2015 Proxyを使ってみた / Introductory talk about ES2015 Proxy
tipo159
1
630
Webコンポーネント関連の最新動向 / Recent Topics on Web Components
tipo159
0
590
SlackはどうやってBrowserViewに乗り換えたのか / How Slack move from webview to BrowserView
tipo159
2
4.3k
コンポーネント再利用ってどこまでするの? / How to reuse components
tipo159
0
900
Other Decks in Programming
See All in Programming
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
13k
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
680
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
940
ふつうの技術スタックでアート作品を作ってみる
akira888
1
1.3k
What's new in AppKit on macOS 26
1024jp
0
150
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
98
36k
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
260
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
330
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
3
550
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
7.1k
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
460
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
130
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
How GitHub (no longer) Works
holman
314
140k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Documentation Writing (for coders)
carmenintech
72
4.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Rails Girls Zürich Keynote
gr2m
95
14k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
It's Worth the Effort
3n
185
28k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
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