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

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

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

136cec31e295d3ac8fa9d14c944250c5?s=128

ikasoumen

July 08, 2018
Tweet

Transcript

  1. QJYJWDIBUTUPSZͷ
 18"ͱͯ͠ͷऔΓ૊Έ 2018/7/8 HTML5 APP CONFERENCE 2018
 ikasoumen

  2. ൃදࢿྉ 2 w ຊ೔ͷൃදࢿྉ͸ͪ͜Β w ͜ͷޙ͠͹Β͘දࣔ͠·͢

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

    w ϐΫγϒ෱ԬΦϑΟε w ৽ଔೖࣾ೥໨ w 8FCٕज़͕޷͖ͳΤϯδχ Ξ
  4. ª ൃදࢿྉ 4 ϐΫγϒגࣜձࣾ w 8FCαʔϏε։ൃɾӡӦ w QJYJW w #005)

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

  6. ª ൃදࢿྉ 6 ෱ԬΦϑΟε w ೥݄͔Βຊ֨࢝ಈ w ਖ਼ࣾһ਺໊ w ΞϧόΠτ໊

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

    w 8FCܥاۀͷਐग़͕੝Μ w Ұॹʹ෱ԬͰಇ͘஥ؒΛ
 ืू͍ͯ͠·͢ʂʂ
  8. Google Pixel By Victor Stuber www.VictorStuber.com QJYJWDIBUTUPSZ

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


    খઆΛ౤ߘͰ͖ΔαʔϏε w J04ʜ/BUJWF 4XJGU  w "OESPJE 1$ʜ18" w 18"͸ϐΫγϒͰ΋ॳɻ
 ͔ͳΓख୳Γ w ࠓ೔͸18"൛ͷ஌ݟΛ
 ࿩͠·͢ QJYJWDIBUTUPSZ
  10. w 18"ͷڧΈͱQJYJWDIBUTUPSZʹ͓͚ΔऔΓ૊Έ w ೔ʑͷϦϦʔεΛࢧ͑Δٕज़ ࠓ೔࿩͢͜ͱ 10

  11. w 18"ͷࡉ͔͍࢓૊Έ w Ͳ͏΍ͬͨΒ18"ʹͳΔͷ͔ ࿩͞ͳ͍͜ͱ 11

  12. 18"ͷڧΈͱ
 QJYJWDIBUTUPSZͷऔΓ૊Έ

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

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

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

    w 18"ʹ͓͚Δ
 ʮΞϓϦͷΠϯετʔϧʯ w "QQ*OTUBMMCBOOFSʹΑΔ
 Πϯετʔϧૌٻ "OESPJE $ISPNF ")4
  16. ª Google Pixel By Victor Stuber www.VictorStuber.com 16 w ผΞϓϦ͔ΒαʔϏεͷ63-Λ

    ౿Ήͱ18"Ͱ։͔͘બ΂Δ
 "OESPJE  w "OESPJEͰ͸ΞϓϦѻ͍ w ಺෦తʹ΋ʮϗʔϜը໘ʹ௥ Ճʯͨ͠ͱ͖ʹBQLΛੜ੒ ͍ͯ͠Δ ")4ΞϓϦͰ։͘
  17. ª Google Pixel By Victor Stuber www.VictorStuber.com 17 w "OESPJEͰ͸"QQ*OTUBMM

    #BOOFS͕ग़Δ w ৚݅ɿճҎ্ͷΞΫηε͕ ͋Γɺ࠶๚ʹ෼Ҏ্ͷִؒ ͕͋Δ w ճ໨ͷདྷ๚Ͱ͸ग़ͳ͍ ")4"QQ*OTUBMMCBOOFS
  18. ª Google Pixel By Victor Stuber www.VictorStuber.com 18 w QJYJWDIBUTUPSZͰ͸


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

  20. w 18"Ͱ༻͍ΒΕΔ4FSWJDF8PSLFSΛ࢖͏ͱɺ
 8FC"QQͷશͯͷϦΫΤετɾϨεϙϯεΛϋϯυϦϯά Ͱ͖Δ w $BDIF"1*Λ࢖ͬͯϨεϙϯεͷΩϟογϡ͕Ͱ͖Δ w ΞϓϦͷಈ࡞ʹඞཁͳϑΝΠϧ IUNMKTDTTJNBHF 


    ΛΩϟογϡ͢ΔͱΦϑϥΠϯରԠͰ͖Δ 4FSWJDF8PSLFSʹΑΔ$BDIJOH 20
  21. w +BWB4DSJQUͷϑΝΠϧ͸෼ׂͯ͠഑৴Ͱ͖Δ w ࠷ॳͷը໘Ͱ͸ɺඞཁͳ෼ͷ DIVOLKTϑΝΠϧͷΈΛ ಡΈ͜Ή w αʔϏεʹॳΊͯΞΫηεͨ࣌͠ɺαʔϏεશମͷίʔ υΛಡΈࠐ·ͳͯ͘ྑ͍ w

    ૉૣ͘࢖͍࢝ΊΒΕΔ +4ͷ-B[Z-PBE 21
  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Λ࢖͍ͬͯΔ
  23. w 4FSWJDF8PSLFS͸αΠτʹΞΫηεͯ͠ډͳͯ͘΋ߋ৽ νΣοΫ͕૸Δ w ࠷௕Iʹճ w DIVOLKTͷߋ৽͕͋ͬͨ৔߹ɺ4FSWJDF8PSLFS΋ߋ৽ ͢Ε͹QSFDBDIFΛ࠶౓૸ΒͤΔ͜ͱ͕Ͱ͖Δ 4FSWJDF8PSLFSͷࣗಈߋ৽ 23

  24. w ॳظϩʔυ͸࠷ॳͷը໘ͷϦιʔεͷΈ w ॳظϩʔυ͕ऴΘΔͱ΄͔ͷϦιʔεΛΩϟογϡ։࢝ w Ωϟογϡ͕ऴΘΔͱΦϑϥΠϯͰ΋࢖͑Δ w ߋ৽͕͋ͬͨΒ࣍ͷΞΫηε࣌ʹϦιʔεΛ%- w ࣍ͷ࣍ͷΞΫηε͸ࣗಈతʹΞοϓσʔτ͞Ε͍ͯΔ

    w ωΠςΟϒΞϓϦͱൺ΂ΔͱΠϯετʔϧ଴ͪΛ
 ୹͘Ͱ͖Δ ͭ·Γɺ18"ͳΒ͜͏Ͱ͖Δ 24
  25. w QJYJWDIBUTUPSZ͸ΦϑϥΠϯରԠͷΈෆ࠾༻ w "1*ͱ௨৴Ͱ͖ͳ͍ͱՁ஋͕ൃشͰ͖ͳ͍αʔϏε w ͓ؾʹೖΓͷετʔϦʔΛಡΊΔͱ͔͸͋Γ͔΋ w ΦϑϥΠϯதͷૢ࡞ΛΦϯϥΠϯ෮ؼ࣌ʹ࠶ࢼߦ΋ٕज़తʹ͸Ͱ͖Δ w ͦ΋ͦ΋೔ຊ͸͋·Γ௨৴؀ڥͰࠔΒͳ͍ʜ

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

  27. w QJYJWDIBUTUPSZͷ৔߹ɺରԠ04ϒϥ΢β͸
 ஈ֊తʹ૿΍ͨ͠ w ౰ॳ͸"OESPJE$ISPNFΛϝΠϯʹରԠ͍ͯͨ͠ w ")4͢ΔͱJ04൛ͱಉ͡ϑϧػೳ͕࢖͑Δ w ετʔϦʔͷΤσΟλͱ͔Ͷ w

    ͦΕҎ֎Ͱ͸7JFXFSͷΈ w ରԠϒϥ΢βΛߜΔ͜ͱͰૣ͘։ൃͰ͖ͨ ϚϧνϓϥοτϑΥʔϜରԠ 27
  28. w ϓϩμΫτͷঢ়ଶʹ߹Θͤͯॱ֦࣍େͨ͠ w 1$DISPNFରԠ w ")4ΛඞਢͰͳ͘͢ w 4BGBSJ'JSFGPY&EHFରԠ w ߜͬͨλʔήοτ޲͚ʹૣ͘࡞ͬͯɺ͋ͱͰରԠΛ֦େ

    ஈ֊త֦େ 28
  29. 18"ͷڧΈͱ
 QJYJWDIBUTUPSZͷऔΓ૊Έ

  30. ͜͜ͰҰ୴࣭໰ͱ͔͋Ε͹

  31. Q. ͳͥPWA? ͳͥ iOS͚ͩωΠςΟϒʁ

  32. ೔ʑͷϦϦʔεΛ
 ࢧ͑Δٕज़

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

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

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

    8FCٕज़ͰJ04 "OESPJE
 ΞϓϦΛ࡞ΔͨΊͷ
 ϑϨʔϜϫʔΫ 044 .*5  w 6*ίϯϙʔωϯτͷ
 ݟӫ͕͑ωΠςΟϒʹ͍ۙ w $PSEPWBͰΞϓϦʹͯ͠
 ετΞʹฒ΂Δͷ͕ओྲྀ w QJYJWDIBUTUPSZͰ͸ෆ࠾༻
  36. $PSEPWBෆ࠾༻ʁ 36 w QJYJWDIBUTUPSZ͸ϒϥ΢β"1*͚ͩͰࣄ଍ΓΔ w ಛʹ"OESPJEDISPNFલఏͰ͋Ε͹ w ϓογϡ௨஌ w ΞϓϦͱͯ͠ͷΠϯετʔϧ

    w ґଘ͕গͳͯ͘ࡁΉͳΒͦͷํ͕ྑ͍ͱ͍͏ελϯε
  37. *POJD18" 37 w *POJD͸ͷ్த͔Β18"ରԠ͕͞Εͨ w $PSEPWBΛ֎͢ͷ΋ެࣜͷ௨Γʹ΍͍ͬͯΔ w ҰํͰ8FCͷੈքʹରԠ͖͠Εͯͳ͍ͱ͜Ζ΋͋Δ w ௨ৗͷ"OHVMBSͷ͓࡞๏Ͱ͸443Ͱ͖ͳ͍

    w ͨ·ʹόάͬͯΔʜ w *POJD ։ൃத Ͱ΋Ζ΋Ζྑ͘ͳΔ
  38. Hosting

  39. ª w 18"൛͸J04൛ͱಉ༷ʹ
 ΫϥΠΞϯτΞϓϦͷͭ
 ͱͯ͠ఏڙ w 3BJMT͸"1*ʹઐ೦
 )5.-Λฦ͞ͳ͍ w QJYJW4LFUDIͱࣅͨࢥ૝

    w ੩తϑΝΠϧΛαʔόʔʹ
 ஔ͚ͩ͘ 39 #VJMEͱIPTUJOH QJYJW4LFUDIͷߏ੒
  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" } ] }, …
  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); } );
  42. CI

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

    ϨϏϡʔɾमਖ਼ w ࣮૷ऀ͕Ϛʔδ w ࣮૷ऀ͕σϓϩΠ w ೔਺ճσϓϩΠ͢Δ 43
  44. όά͸࠷ѱͷମݧ w 13Λ੎͍Α͘σϓϩΠͨ݁͠Ռɺ݁ߏόάΛੜΜͰ͍ͨ w ͲΜͳʹૉ੖Β͍͠αʔϏεͰ΋Ѫ͕ྫྷΊΔ w ৽͍͠αʔϏεͩͱϢʔβʔ͔Βͷใࠂ΋গͳ͍ w 18"͸Ϋϥογϡͤͣ੩͔ʹࢭ·Δ w

    Ϣʔβʔ͸ࢭ·ͬͨͷ͔ؾ͚ͮͳ͍ w Τϥʔऩू͸͍ͯ͠Δ͕ɺ·ͣ๷͙ 44
  45. ª w (JUIVCͰ13Λ࡞ΔͱࣗಈͰ
 ΞϓϦੜ੒ w 13ຖͷυϝΠϯʹΞΫηε ͢Δ͚ͩͰಈ࡞֬ೝ͕Ͱ͖Δ w खݩʹQVMMͯ͠CVJME͠ͳ͘ ͍͍ͯͷͰָ

    w IFSPLV͸੩తϑΝΠϧΛஔ ͚ͩ͘ 45 IFSPLV3FWJFX"QQT
  46. ຖ೔ΞϓϦΛ৮Δ w ϦϦʔεީิ൛Λຖ೔Ϗϧυ w ேձޙʹνʔϜͷΈΜͳͰϫΠϫΠࢼ͢ w J04 18"྆ํ w ΈΜͳͰΫδ

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

  48. w 18"ͷڧΈ w ΠϯετʔϧɾΞοϓσʔτΛҙࣝ͠ͳ͍Ͱ࢖͑Δ w ΦϑϥΠϯରԠɾϓογϡ௨஌ͳͲ
 ωΠςΟϒΞϓϦతػೳ͕࢖͑Δ w ೔ʑͷϦϦʔεΛΑΓྑ͍΋ͷʹ w

    41"ͷٕज़͸ࣗಈԽɾεέʔϧ͠΍͍͢ w ໘౗ͳ࡞ۀ͸ػցʹ೚ͤͨΓɺΈΜͳͰָ͠Ή ·ͱΊ 48