pixiv chatstory の
 PWA としての取り組み

pixiv chatstory の
 PWA としての取り組み

136cec31e295d3ac8fa9d14c944250c5?s=128

ikasoumen

July 08, 2018
Tweet

Transcript

  1. 3.

    ª ൃදࢿྉ 3 ࣗݾ঺հ w JLBTPVNFO w UXJUUFS!@JLBTPVNFO w HJUIVCJLBTPVNFO

    w ϐΫγϒ෱ԬΦϑΟε w ৽ଔೖࣾ೥໨ w 8FCٕज़͕޷͖ͳΤϯδχ Ξ
  2. 4.

    ª ൃදࢿྉ 4 ϐΫγϒגࣜձࣾ w 8FCαʔϏε։ൃɾӡӦ w QJYJW w #005)

    w QJYJW'"/#09 w ͳͲ w 8FCͰ׆༂͢Δ
 ΫϦΤΠλʔͷ૑࡞׆ಈࢧԉ w ΄΅ࣗࣾαʔϏε
  3. 7.

    ª ൃදࢿྉ 7 ෱Ԭ͸͍͍ͧ w த৺஍͔Βۭߓ·Ͱ෼ w Ո௞͍҆ w ͝൧ඒຯ͍͠

    w 8FCܥاۀͷਐग़͕੝Μ w Ұॹʹ෱ԬͰಇ͘஥ؒΛ
 ืू͍ͯ͠·͢ʂʂ
  4. 9.

    ª Google Pixel By Victor Stuber www.VictorStuber.com 9 w νϟοτܗࣜͷ


    খઆΛ౤ߘͰ͖ΔαʔϏε w J04ʜ/BUJWF 4XJGU  w "OESPJE 1$ʜ18" w 18"͸ϐΫγϒͰ΋ॳɻ
 ͔ͳΓख୳Γ w ࠓ೔͸18"൛ͷ஌ݟΛ
 ࿩͠·͢ QJYJWDIBUTUPSZ
  5. 13.

    w ҎԼͷΑ͏ͳಛ௃Λ࣋ͬͨ8FCΞϓϦ w ϗʔϜը໘͔ΒΞΫηε w ϓογϡ௨஌͕ར༻Մೳ w ΦϑϥΠϯͰ΋࢖͑Δ w ͳͲ

    w ετΞ͔ΒΠϯετʔϧͰ͸ͳ͘ɺ8FC͔ΒΞΫηε͢Δ w ωΟςΟϒΞϓϦͰͳ͍ͱ೉͔ͬͨ͠ػೳͷ࣮ݱ w ৄ͍͠࡞Γํ͸(PPHMF%FWFMPQFSTͰʂ 18" 1SPHSFTTJWF8FC"QQ 13
  6. 15.

    ª Google Pixel By Victor Stuber www.VictorStuber.com 15 w ʮϗʔϜը໘ʹ௥Ճʯ

    w 18"ʹ͓͚Δ
 ʮΞϓϦͷΠϯετʔϧʯ w "QQ*OTUBMMCBOOFSʹΑΔ
 Πϯετʔϧૌٻ "OESPJE $ISPNF ")4
  7. 16.

    ª Google Pixel By Victor Stuber www.VictorStuber.com 16 w ผΞϓϦ͔ΒαʔϏεͷ63-Λ

    ౿Ήͱ18"Ͱ։͔͘બ΂Δ
 "OESPJE  w "OESPJEͰ͸ΞϓϦѻ͍ w ಺෦తʹ΋ʮϗʔϜը໘ʹ௥ Ճʯͨ͠ͱ͖ʹBQLΛੜ੒ ͍ͯ͠Δ ")4ΞϓϦͰ։͘
  8. 17.

    ª Google Pixel By Victor Stuber www.VictorStuber.com 17 w "OESPJEͰ͸"QQ*OTUBMM

    #BOOFS͕ग़Δ w ৚݅ɿճҎ্ͷΞΫηε͕ ͋Γɺ࠶๚ʹ෼Ҏ্ͷִؒ ͕͋Δ w ճ໨ͷདྷ๚Ͱ͸ग़ͳ͍ ")4"QQ*OTUBMMCBOOFS
  9. 18.

    ª Google Pixel By Victor Stuber www.VictorStuber.com 18 w QJYJWDIBUTUPSZͰ͸


    Πϯετʔϧखॱ͕ݟΒΕΔ
 ՕॴΛ༻ҙ͍ͯ͠Δ w ໌ࣔతʹΞϓϦΠϯετʔϧͷ ҙࢥ͕͋ΔϢʔβʔ༻ QJYJWDIBUTUPSZͷ৔߹
  10. 22.

    ª 22 DIVOLKTͷQSFDBDIF const fileManifest = [ { "url": "build/

    0.8ffe61fe0eafb69265e2.chunk.js", "revision": "0871a6351e2bb4f7fcab7b904ca634b6" }, // // ……… // { "url": "build/ 12.8e85e96102ac9de0a826.chunk.js", "revision": "c95d8d7a1a3d94bbee1b864c578cdd44" }, ]; const workboxSW = new self.WorkboxSW(); workboxSW.precache(fileManifest); w 4FSWJDF8PSLFSΛ࢖ͬͯ
 ΞϓϦશମͰඞཁͳ DIVOLKTϑΝΠϧΛޙಡ Έͯ͠ɺΩϟογϡ͢ΔΑ ͏ʹ͍ͯ͠Δ w 4FSWJDF8PSLFSͷੜ੒ʹ͸ 8PSLCPYΛ࢖͍ͬͯΔ
  11. 25.

    w QJYJWDIBUTUPSZ͸ΦϑϥΠϯରԠͷΈෆ࠾༻ w "1*ͱ௨৴Ͱ͖ͳ͍ͱՁ஋͕ൃشͰ͖ͳ͍αʔϏε w ͓ؾʹೖΓͷετʔϦʔΛಡΊΔͱ͔͸͋Γ͔΋ w ΦϑϥΠϯதͷૢ࡞ΛΦϯϥΠϯ෮ؼ࣌ʹ࠶ࢼߦ΋ٕज़తʹ͸Ͱ͖Δ w ͦ΋ͦ΋೔ຊ͸͋·Γ௨৴؀ڥͰࠔΒͳ͍ʜ

    w DIVOLKT͸Ωϟογϡ͍ͯ͠Δ w -B[ZMPBEରԠ͢ΔͱɺσϓϩΠલޙͰҧ͏Ϗϧυͷ DIVOLKTΛಡ Έࠐ΋͏ͱͯ͠མͪΔ͜ͱ͕͋Δ w ΩϟογϡΛ࢖ͬͯɺҰճͷىಈதͰ͸ಉ͡ϏϧυͷKTͷΈΛ࢖͏ QJYJWDIBUTUPSZͷ৔߹ 25
  12. 33.

    ΞʔΩςΫνϟ w "1*4FSWFS3BJMTPOIFSPLV w )PTUJOH4FSWFS w 'SPOUFOE'JSFCBTFIPTUJOH w 6TFS"TTFUT"844 PSJHJO

    *NBHFqVY DBDIF ը૾  w 'SPOUFOE"OHVMBS *POJD  w 1VTIOPUJpDBUJPO0OFTJHOBM 33
  13. 34.
  14. 35.

    ª Google Pixel By Victor Stuber www.VictorStuber.com *POJD 35 w

    8FCٕज़ͰJ04 "OESPJE
 ΞϓϦΛ࡞ΔͨΊͷ
 ϑϨʔϜϫʔΫ 044 .*5  w 6*ίϯϙʔωϯτͷ
 ݟӫ͕͑ωΠςΟϒʹ͍ۙ w $PSEPWBͰΞϓϦʹͯ͠
 ετΞʹฒ΂Δͷ͕ओྲྀ w QJYJWDIBUTUPSZͰ͸ෆ࠾༻
  15. 38.
  16. 40.

    ª w ੩తϑΝΠϧͷϗεςΟϯά ʹ࢖༻ w DMJͰσϓϩΠͰ͖Δ w KTPOͰIFBEFS΍SFXSJUFϧʔ ϧͷΧελϚΠζ w

    ϑϩϯτΤϯυΤϯδχΞ Ͱ΋Θ͔Γ΍͍͢ w pSFCBTFGVODUJPOTͱγʔϜ Ϩεʹܨ͛ΒΕΔ 40 'JSFCBTFIPTUJOH { "hosting": { "public": "www", "rewrites": [ { "source": "!/api/**", "function": "insertOgp" } ], "headers": [ { "source": "build/*.@(js| css)", "headers": [ { "key": "Cache-Control", "value": "public, s- maxage=5184000" } ] }, …
  17. 41.

    ª w αʔόʔଆͰඞཁͳ
 ͍ܰλεΫΛߦ͏ w 0(1ຒΊࠐΈ w 0(1ը૾ͷੜ੒ • SSRͰ͖ͳ͍͔ΒͶ…

    41 'JSFCBTFGVODUJPOT /** HTML ΛϨϯμϦϯάͯ͠ฦ͢ */ export const insertOgp = functions.https.onRequest( async (req, res) => { let data: TemplateData; try { data = await routing(req); } catch { data = defaultData(req); } const html = renderTemplate(data); res.send(html); } );
  18. 42.

    CI

  19. 43.

    ػೳ௥Ճϑϩʔ w ϐΫγϒͰ͸৽ػೳ௥Ճ͸ҎԼͷϑϩʔ͕ଟ͍ w ࣮૷ w 1VMM3FRVFTU 13 ࡞੒ w

    ϨϏϡʔɾमਖ਼ w ࣮૷ऀ͕Ϛʔδ w ࣮૷ऀ͕σϓϩΠ w ೔਺ճσϓϩΠ͢Δ 43
  20. 46.

    ຖ೔ΞϓϦΛ৮Δ w ϦϦʔεީิ൛Λຖ೔Ϗϧυ w ேձޙʹνʔϜͷΈΜͳͰϫΠϫΠࢼ͢ w J04 18"྆ํ w ΈΜͳͰΫδ

    ෺ཧ Λͻ͍ͯͲΕΛࢼ͔ܾ͢ΊΔ w ʮยํ͚ͩݟΔʯ͜ͱʹͳΒͳ͍Α͏ʹ w ࣮૷ࠩҟʹؾ͚ͮΔ w ΫδΛҾ͘ͷ͸ָ͍͠ w (P൑அ͕ग़ͨΒϦϦʔε 46