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

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

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

ikasoumen

July 08, 2018
Tweet

More Decks by ikasoumen

Other Decks in Technology

Transcript

  1. QJYJWDIBUTUPSZͷ

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

    ikasoumen

    View Slide

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

    View Slide

  3. ª
    ൃදࢿྉ
    3
    ࣗݾ঺հ
    w JLBTPVNFO
    w UXJUUFS!@JLBTPVNFO
    w HJUIVCJLBTPVNFO
    w ϐΫγϒ෱ԬΦϑΟε
    w ৽ଔೖࣾ೥໨
    w 8FCٕज़͕޷͖ͳΤϯδχ
    Ξ

    View Slide

  4. ª
    ൃදࢿྉ
    4
    ϐΫγϒגࣜձࣾ
    w 8FCαʔϏε։ൃɾӡӦ
    w QJYJW
    w #005)
    w QJYJW'"/#09
    w ͳͲ
    w 8FCͰ׆༂͢Δ

    ΫϦΤΠλʔͷ૑࡞׆ಈࢧԉ
    w ΄΅ࣗࣾαʔϏε

    View Slide

  5. ൃදࢿྉ
    5

    View Slide

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

    ࡞ͬͯ·͢

    View Slide

  7. ª
    ൃදࢿྉ
    7
    ෱Ԭ͸͍͍ͧ
    w த৺஍͔Βۭߓ·Ͱ෼
    w Ո௞͍҆
    w ͝൧ඒຯ͍͠
    w 8FCܥاۀͷਐग़͕੝Μ
    w Ұॹʹ෱ԬͰಇ͘஥ؒΛ

    ืू͍ͯ͠·͢ʂʂ

    View Slide

  8. Google Pixel
    By Victor Stuber
    www.VictorStuber.com
    QJYJWDIBUTUPSZ

    View Slide

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

    খઆΛ౤ߘͰ͖ΔαʔϏε
    w J04ʜ/BUJWF 4XJGU

    w "OESPJE 1$ʜ18"
    w 18"͸ϐΫγϒͰ΋ॳɻ

    ͔ͳΓख୳Γ
    w ࠓ೔͸18"൛ͷ஌ݟΛ

    ࿩͠·͢
    QJYJWDIBUTUPSZ

    View Slide

  10. w 18"ͷڧΈͱQJYJWDIBUTUPSZʹ͓͚ΔऔΓ૊Έ
    w ೔ʑͷϦϦʔεΛࢧ͑Δٕज़
    ࠓ೔࿩͢͜ͱ
    10

    View Slide

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

    View Slide

  12. 18"ͷڧΈͱ

    QJYJWDIBUTUPSZͷऔΓ૊Έ

    View Slide

  13. w ҎԼͷΑ͏ͳಛ௃Λ࣋ͬͨ8FCΞϓϦ
    w ϗʔϜը໘͔ΒΞΫηε
    w ϓογϡ௨஌͕ར༻Մೳ
    w ΦϑϥΠϯͰ΋࢖͑Δ
    w ͳͲ
    w ετΞ͔ΒΠϯετʔϧͰ͸ͳ͘ɺ8FC͔ΒΞΫηε͢Δ
    w ωΟςΟϒΞϓϦͰͳ͍ͱ೉͔ͬͨ͠ػೳͷ࣮ݱ
    w ৄ͍͠࡞Γํ͸(PPHMF%FWFMPQFSTͰʂ
    18" 1SPHSFTTJWF8FC"QQ

    13

    View Slide

  14. A2HS

    (Add To Home Screen)

    View Slide

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

    ʮΞϓϦͷΠϯετʔϧʯ
    w "QQ*OTUBMMCBOOFSʹΑΔ

    Πϯετʔϧૌٻ "OESPJE
    $ISPNF

    ")4

    View Slide

  16. ª
    Google Pixel
    By Victor Stuber
    www.VictorStuber.com
    16
    w ผΞϓϦ͔ΒαʔϏεͷ63-Λ
    ౿Ήͱ18"Ͱ։͔͘બ΂Δ

    "OESPJE

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

    View Slide

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

    View Slide

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

    Πϯετʔϧखॱ͕ݟΒΕΔ

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

    View Slide

  19. JS ͷ Lazy Load ͱ Cache

    View Slide

  20. w 18"Ͱ༻͍ΒΕΔ4FSWJDF8PSLFSΛ࢖͏ͱɺ

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

    ΛΩϟογϡ͢ΔͱΦϑϥΠϯରԠͰ͖Δ
    4FSWJDF8PSLFSʹΑΔ$BDIJOH
    20

    View Slide

  21. w +BWB4DSJQUͷϑΝΠϧ͸෼ׂͯ͠഑৴Ͱ͖Δ
    w ࠷ॳͷը໘Ͱ͸ɺඞཁͳ෼ͷDIVOLKTϑΝΠϧͷΈΛ
    ಡΈ͜Ή
    w αʔϏεʹॳΊͯΞΫηεͨ࣌͠ɺαʔϏεશମͷίʔ
    υΛಡΈࠐ·ͳͯ͘ྑ͍
    w ૉૣ͘࢖͍࢝ΊΒΕΔ
    +4ͷ-B[Z-PBE
    21

    View Slide

  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Λ࢖͍ͬͯΔ

    View Slide

  23. w 4FSWJDF8PSLFS͸αΠτʹΞΫηεͯ͠ډͳͯ͘΋ߋ৽
    νΣοΫ͕૸Δ
    w ࠷௕Iʹճ
    w DIVOLKTͷߋ৽͕͋ͬͨ৔߹ɺ4FSWJDF8PSLFS΋ߋ৽
    ͢Ε͹QSFDBDIFΛ࠶౓૸ΒͤΔ͜ͱ͕Ͱ͖Δ
    4FSWJDF8PSLFSͷࣗಈߋ৽
    23

    View Slide

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

    ୹͘Ͱ͖Δ
    ͭ·Γɺ18"ͳΒ͜͏Ͱ͖Δ
    24

    View Slide

  25. w QJYJWDIBUTUPSZ͸ΦϑϥΠϯରԠͷΈෆ࠾༻
    w "1*ͱ௨৴Ͱ͖ͳ͍ͱՁ஋͕ൃشͰ͖ͳ͍αʔϏε
    w ͓ؾʹೖΓͷετʔϦʔΛಡΊΔͱ͔͸͋Γ͔΋
    w ΦϑϥΠϯதͷૢ࡞ΛΦϯϥΠϯ෮ؼ࣌ʹ࠶ࢼߦ΋ٕज़తʹ͸Ͱ͖Δ
    w ͦ΋ͦ΋೔ຊ͸͋·Γ௨৴؀ڥͰࠔΒͳ͍ʜ
    w DIVOLKT͸Ωϟογϡ͍ͯ͠Δ
    w -B[ZMPBEରԠ͢ΔͱɺσϓϩΠલޙͰҧ͏ϏϧυͷDIVOLKTΛಡ
    Έࠐ΋͏ͱͯ͠མͪΔ͜ͱ͕͋Δ
    w ΩϟογϡΛ࢖ͬͯɺҰճͷىಈதͰ͸ಉ͡ϏϧυͷKTͷΈΛ࢖͏
    QJYJWDIBUTUPSZͷ৔߹
    25

    View Slide

  26. ϚϧνϓϥοτϑΥʔϜରԠ

    View Slide

  27. w QJYJWDIBUTUPSZͷ৔߹ɺରԠ04ϒϥ΢β͸

    ஈ֊తʹ૿΍ͨ͠
    w ౰ॳ͸"OESPJE$ISPNFΛϝΠϯʹରԠ͍ͯͨ͠
    w ")4͢ΔͱJ04൛ͱಉ͡ϑϧػೳ͕࢖͑Δ
    w ετʔϦʔͷΤσΟλͱ͔Ͷ
    w ͦΕҎ֎Ͱ͸7JFXFSͷΈ
    w ରԠϒϥ΢βΛߜΔ͜ͱͰૣ͘։ൃͰ͖ͨ
    ϚϧνϓϥοτϑΥʔϜରԠ
    27

    View Slide

  28. w ϓϩμΫτͷঢ়ଶʹ߹Θͤͯॱ֦࣍େͨ͠
    w 1$DISPNFରԠ
    w ")4ΛඞਢͰͳ͘͢
    w 4BGBSJ'JSFGPY&EHFରԠ
    w ߜͬͨλʔήοτ޲͚ʹૣ͘࡞ͬͯɺ͋ͱͰରԠΛ֦େ
    ஈ֊త֦େ
    28

    View Slide

  29. 18"ͷڧΈͱ

    QJYJWDIBUTUPSZͷऔΓ૊Έ

    View Slide

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

    View Slide

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

    View Slide

  32. ೔ʑͷϦϦʔεΛ

    ࢧ͑Δٕज़

    View Slide

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

    w 'SPOUFOE"OHVMBS *POJD

    w 1VTIOPUJpDBUJPO0OFTJHOBM
    33

    View Slide

  34. Ionic

    View Slide

  35. ª
    Google Pixel
    By Victor Stuber
    www.VictorStuber.com
    *POJD
    35
    w 8FCٕज़ͰJ04 "OESPJE

    ΞϓϦΛ࡞ΔͨΊͷ

    ϑϨʔϜϫʔΫ 044 .*5

    w 6*ίϯϙʔωϯτͷ

    ݟӫ͕͑ωΠςΟϒʹ͍ۙ
    w $PSEPWBͰΞϓϦʹͯ͠

    ετΞʹฒ΂Δͷ͕ओྲྀ
    w QJYJWDIBUTUPSZͰ͸ෆ࠾༻

    View Slide

  36. $PSEPWBෆ࠾༻ʁ
    36
    w QJYJWDIBUTUPSZ͸ϒϥ΢β"1*͚ͩͰࣄ଍ΓΔ
    w ಛʹ"OESPJEDISPNFલఏͰ͋Ε͹
    w ϓογϡ௨஌
    w ΞϓϦͱͯ͠ͷΠϯετʔϧ
    w ґଘ͕গͳͯ͘ࡁΉͳΒͦͷํ͕ྑ͍ͱ͍͏ελϯε

    View Slide

  37. *POJD18"
    37
    w *POJD͸ͷ్த͔Β18"ରԠ͕͞Εͨ
    w $PSEPWBΛ֎͢ͷ΋ެࣜͷ௨Γʹ΍͍ͬͯΔ
    w ҰํͰ8FCͷੈքʹରԠ͖͠Εͯͳ͍ͱ͜Ζ΋͋Δ
    w ௨ৗͷ"OHVMBSͷ͓࡞๏Ͱ͸443Ͱ͖ͳ͍
    w ͨ·ʹόάͬͯΔʜ
    w *POJD ։ൃத
    Ͱ΋Ζ΋Ζྑ͘ͳΔ

    View Slide

  38. Hosting

    View Slide

  39. ª
    w 18"൛͸J04൛ͱಉ༷ʹ

    ΫϥΠΞϯτΞϓϦͷͭ

    ͱͯ͠ఏڙ
    w 3BJMT͸"1*ʹઐ೦

    )5.-Λฦ͞ͳ͍
    w QJYJW4LFUDIͱࣅͨࢥ૝
    w ੩తϑΝΠϧΛαʔόʔʹ

    ஔ͚ͩ͘
    39
    #VJMEͱIPTUJOH QJYJW4LFUDIͷߏ੒

    View Slide

  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"
    }
    ]
    },

    View Slide

  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);
    }
    );

    View Slide

  42. CI

    View Slide

  43. ػೳ௥Ճϑϩʔ
    w ϐΫγϒͰ͸৽ػೳ௥Ճ͸ҎԼͷϑϩʔ͕ଟ͍
    w ࣮૷
    w 1VMM3FRVFTU 13
    ࡞੒
    w ϨϏϡʔɾमਖ਼
    w ࣮૷ऀ͕Ϛʔδ
    w ࣮૷ऀ͕σϓϩΠ
    w ೔਺ճσϓϩΠ͢Δ
    43

    View Slide

  44. όά͸࠷ѱͷମݧ
    w 13Λ੎͍Α͘σϓϩΠͨ݁͠Ռɺ݁ߏόάΛੜΜͰ͍ͨ
    w ͲΜͳʹૉ੖Β͍͠αʔϏεͰ΋Ѫ͕ྫྷΊΔ
    w ৽͍͠αʔϏεͩͱϢʔβʔ͔Βͷใࠂ΋গͳ͍
    w 18"͸Ϋϥογϡͤͣ੩͔ʹࢭ·Δ
    w Ϣʔβʔ͸ࢭ·ͬͨͷ͔ؾ͚ͮͳ͍
    w Τϥʔऩू͸͍ͯ͠Δ͕ɺ·ͣ๷͙
    44

    View Slide

  45. ª
    w (JUIVCͰ13Λ࡞ΔͱࣗಈͰ

    ΞϓϦੜ੒
    w 13ຖͷυϝΠϯʹΞΫηε
    ͢Δ͚ͩͰಈ࡞֬ೝ͕Ͱ͖Δ
    w खݩʹQVMMͯ͠CVJME͠ͳ͘
    ͍͍ͯͷͰָ
    w IFSPLV͸੩తϑΝΠϧΛஔ
    ͚ͩ͘
    45
    IFSPLV3FWJFX"QQT

    View Slide

  46. ຖ೔ΞϓϦΛ৮Δ
    w ϦϦʔεީิ൛Λຖ೔Ϗϧυ
    w ேձޙʹνʔϜͷΈΜͳͰϫΠϫΠࢼ͢
    w J04 18"྆ํ
    w ΈΜͳͰΫδ ෺ཧ
    Λͻ͍ͯͲΕΛࢼ͔ܾ͢ΊΔ
    w ʮยํ͚ͩݟΔʯ͜ͱʹͳΒͳ͍Α͏ʹ
    w ࣮૷ࠩҟʹؾ͚ͮΔ
    w ΫδΛҾ͘ͷ͸ָ͍͠
    w (P൑அ͕ग़ͨΒϦϦʔε
    46

    View Slide

  47. ೔ʑͷϦϦʔεΛ

    ࢧ͑Δٕज़

    View Slide

  48. w 18"ͷڧΈ
    w ΠϯετʔϧɾΞοϓσʔτΛҙࣝ͠ͳ͍Ͱ࢖͑Δ
    w ΦϑϥΠϯରԠɾϓογϡ௨஌ͳͲ

    ωΠςΟϒΞϓϦతػೳ͕࢖͑Δ
    w ೔ʑͷϦϦʔεΛΑΓྑ͍΋ͷʹ
    w 41"ͷٕज़͸ࣗಈԽɾεέʔϧ͠΍͍͢
    w ໘౗ͳ࡞ۀ͸ػցʹ೚ͤͨΓɺΈΜͳͰָ͠Ή
    ·ͱΊ
    48

    View Slide