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
フロントエンドエンジニアのためのServer Push入門 / Server Push for...
Search
Masashi Hirano
June 07, 2018
Programming
0
380
フロントエンドエンジニアのためのServer Push入門 / Server Push for Frontend Engineer
JAM plus #1 でNetlifyでHTTP/2サーバプッシュするLTしました
https://kfug.connpass.com/event/87799/
Masashi Hirano
June 07, 2018
Tweet
Share
More Decks by Masashi Hirano
See All by Masashi Hirano
Protocol Buffers and Connect for Frontend Development
masashi
0
90
You may not need XXX in Node.js
masashi
5
1.4k
OSSとコミュニティを支える
masashi
1
1.3k
英語ができなかった自分達が、グローバルチーム立ち上げに挑戦!?
masashi
1
3.4k
フロントエンド開発のためのセキュリティ入門について
masashi
1
520
フロントエンド開発のためのセキュリティ入門
masashi
49
18k
Node.jsの2022年と未来 / Node.js in 2022 and Future
masashi
1
1.1k
Corepack ~Node.jsに追加されたパッケージマネージャーマネージャー~ / #tng37
masashi
3
13k
Node.js + Web Compatibility
masashi
2
660
Other Decks in Programming
See All in Programming
階層化自動テストで開発に機動力を
ickx
1
440
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
520
20250708_JAWS_opscdk
takuyay0ne
2
150
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
660
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
6.9k
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
160
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
3
510
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
34
10k
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
4
1.3k
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
300
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
200
What's new in Adaptive Android development
fornewid
0
120
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.7k
The Cult of Friendly URLs
andyhume
79
6.5k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Designing for humans not robots
tammielis
253
25k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Docker and Python
trallard
45
3.5k
Agile that works and the tools we love
rasmusluckow
329
21k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Side Projects
sachag
455
43k
Bash Introduction
62gerente
613
210k
Transcript
ϑϩϯτΤϯυ ΤϯδχΞͷͨΊͷ Server Pushೖ JAM plus #1 Masashi Hirano
(@shisama)
{ "about": { "name": "Masashi Hirano", "works": "Weblio, Inc.", "twitter":
"@shisama_", "github": "shisama" } }
λʔήοτ • ૣ͍WebΛఏڙ͍ͨ͠ਓ • αʔόઃఆͨ͘͠ͳ͍ ָ͍ͨ͠ϑϩϯτΤϯ υΤϯδχΞͷօ༷
ࠓ͞ͳ͍͜ͱ • HTTP/1.1HTTP/2ͷৄࡉ • αʔόͷ
HTTP/1.1ͷ • 1ͭͷϦΫΤετ͕ྃ͢Δ·Ͱ࣍ͷϦΫΤετߦ͑ͳ͍ • ଟॏԽ͢Δ͜ͱͰ1υϝΠϯͷෳଓՄೳ • ಉ࣌ଓݶΒΕ͍ͯΔ • Chromeͷ߹6ͭ·Ͱ͔͠ಉ࣌ଓͰ͖ͳ͍ https://codezine.jp/article/detail/8663
HTTP/1.1ͷ • HTTPύΠϓϥΠϯ • લճͷϦΫΤετΛͨͣʹ࣍ͷϦΫΤετΛૹ৴Մೳ • αʔόʔϦΫΤετͷॱ൪௨ΓʹϨεϙϯεΛฦ͞ͳ͚ΕͳΒͳ͍ • ઌ಄ͷϦΫΤετʹ͕͔͔࣌ؒͬͨ߹ɺޙଓͷϨεϙϯεϒϩοΫ ͞ΕΔ
https://codezine.jp/article/detail/8663
HTTP/1.1ͷ • ߴͳWeb͕ٻΊΒΕΔݱ • ϦΫΤετΛݮΒ͍ͨ͠ • CSSεϓϥΠτɺJSϑΝΠϧͷόϯυϧͳͲͰ ରԠ͍ͯ͠Δ͕ਏ͍ • όϯυϧͨ͠ϑΝΠϧͷେ͖͕͞ʹͳΔ͜
ͱ
HTTP/2
HTTP/2ͱ • HTTP/1.1ͷϨΠςϯγΛղܾ͢ΔͨΊͷ৽͠ ͍ϓϩτίϧ • HTTP/1.1͔Β16ͿΓͷΞοϓσʔτ • 2015ʹRFCԽࡁΈ(RFC7540) • ΄΅ͯ͢ͷϒϥβ͕ରԠ(IE11!)
HTTP/2ͷओͳػೳ • ετϦʔϜͷଟॏԽ • ετϦʔϜͷ༏ઌ • ϑϩʔ੍ޚ • ϔομѹॖ(HPACK) •
αʔόϓογϡ
HTTP/2ͷओͳػೳ • ετϦʔϜͷଟॏԽ • ετϦʔϜͷ༏ઌ • ϑϩʔ੍ޚ • ϔομѹॖ(HPACK) •
αʔόϓογϡ
αʔόϓογϡͱ • Ϧιʔεऔಘʹ1RTT(ϦΫΤετ+Ϩεϙϯε)Λඞཁͱ͠ͳ͍ • ࠷ॳͷϦΫΤετΛड͚औͬͨαʔό͕࣍ͷϦΫΤετΛ༧ ଌͯ͠ΫϥΠΞϯτʹpush͢Δ )5.-ͷϦΫΤετʹର ͯ͠$44ͱը૾Λಉ࣌ʹ ৴͍ͯ͠Δ https://giuseppeciotta.net/getting-to-know-http20-with-the-mosaic-demo.html
αʔόΛ৮Βͳ͚Ε͍͚ͳ͍ͷͰ͠ΐɾɾɾ
ϑϩϯτΤϯυ ΤϯδχΞͷͨΊͷ Server Pushೖ Masashi Hirano (@shisama)
ϑϩϯτΤϯυ ΤϯδχΞͷͨΊͷ Server Pushೖ Masashi Hirano (@shisama) αʔόͷ͠·ͤΜʂʂ
Netlify
Netlifyͱ • ߴػೳϗεςΟϯάαʔϏε • ϏϧυɾσϓϩΠɾϗεςΟϯάΛͯ͢ߦ͑Δ • GitHubʹ͋ΔϦϙδτϦΛͦͷ··ϗεςΟϯ άͰ͖Δɻpush͢ΔͨͼʹࣗಈσϓϩΠ • HTTPSɺHTTP/2͕ແྉͰ؆୯ʹ͑Δ
https://www.netlify.com/blog/2017/07/18/http/2-server-push-on-netlify/
NetlifyͰαʔόϓογϡ • σϓϩΠ͢ΔσΟϨΫτϦʹ_headersͱ͍͏ ϑΝΠϧΛஔ͚ͩ͘ • _headersʹͲͷϦιʔεΛpush͢Δͷ͔ॻ͘
NetlifyͰαʔόϓογϡ . !"" public # !"" _headers # !"" my-app.js
# !"" index.html # %"" style.css %"" src !"" my-app.js !"" index.html %"" style.css QVCMJDΛσϓϩΠ͢Δ߹ɺ QVCMJDԼʹ@IFBEFSTΛஔ͘
_headersϑΝΠϧ /server-push-path Link: </my-app.js>; rel=preload; as=script Link: </style.css>; rel=preload; as=style
ϦΫΤετͷύε -JOLQVTI͍ͨ͠ϦιʔεͷύεSFMQSFMPBEBTϦιʔεͷछྨ
Ϩεϙϯεϔομʔ ϦΫΤετͨ͠IUNMͷϨεϙϯεϔομʔ ʹMJOL͕Ճ͞ΕΔ
HTTP1.1ͱHTTP/2 ൺֱ $ISPNFͷ߹ɺ)551ͩͱ 1SPUPDPM͕IʹͳΔ
HTTP1.1ͱHTTP/2 ൺֱ *OJUJBUPS͕1VTI0UIFSʹͳ͍ͬͯͯαʔ όϓογϡ͞Ε͍ͯΔ͜ͱ͕Θ͔Δ
αʔόϓογϡ͕ෆཁʹͳͬͨΒ /server-push-path Link: </my-app.js>; rel=preload; as=script nopush Link: </style.css>; rel=preload;
as=style OPQVTIΛ͚Δ
None
firebaseͱ • GoogleͷϞόΠϧϓϥοτϑΥʔϜ • Realtime DatabaseɺCloud Functionɺ Crashlytics etc •
ϗεςΟϯάαʔϏε͋Δ • ແྉͰHTTPSHTTP/2͕͑Δ
firebaseͰαʔόϓογϡ . !"" firebase.json !"" public # !"" img1.png #
!"" index.html # %"" style.css %"" src !"" img1.png !"" index.html %"" style.css pSFCBTFKTPOΛஔ͘
firebase.json { "hosting": { "public": "public", "headers": [ { "source":
"/", "headers": [{ "key": "Link", "value": "</elements/my-app.js>;rel=preload;as=script,</ style.css>;rel=preload;as=style" }] } ] } }
·ͱΊ • HTTP/2αʔόϓογϡͰϦΫΤετΛݮΒ ͠ϖʔδϩʔυΛߴԽ • ߴػೳϗεςΟϯάαʔϏεΛ͏͜ͱͰ HTTP/2αʔόϓογϡ؆୯ʹ͑Δ
એ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠