Upgrade to Pro — share decks privately, control downloads, hide ads and more …

フロントエンドエンジニアのためのServer Push入門 / Server Push for...

フロントエンドエンジニアのための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

More Decks by Masashi Hirano

Other Decks in Programming

Transcript

  1. NetlifyͰαʔόϓογϡ . !"" public # !"" _headers # !"" my-app.js

    # !"" index.html # %"" style.css %"" src !"" my-app.js !"" index.html %"" style.css QVCMJDΛσϓϩΠ͢Δ৔߹ɺ QVCMJD௚Լʹ@IFBEFSTΛஔ͘
  2. _headersϑΝΠϧ /server-push-path Link: </my-app.js>; rel=preload; as=script Link: </style.css>; rel=preload; as=style

    ϦΫΤετͷύε -JOLQVTI͍ͨ͠ϦιʔεͷύεSFMQSFMPBEBTϦιʔεͷछྨ
  3. firebaseͰαʔόϓογϡ . !"" firebase.json !"" public # !"" img1.png #

    !"" index.html # %"" style.css %"" src !"" img1.png !"" index.html %"" style.css pSFCBTFKTPOΛஔ͘
  4. 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" }] } ] } }