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

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

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

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

ª ൃදࢿྉ 4 ϐΫγϒגࣜձࣾ w 8FCαʔϏε։ൃɾӡӦ w QJYJW w #005)
w QJYJW'"/#09 w ͳͲ w 8FCͰ׆༂͢Δ  ΫϦΤΠλʔͷ૑࡞׆ಈࢧԉ w ΄΅ࣗࣾαʔϏε

ൃදࢿྉ 5

ª ൃදࢿྉ 6 ෱ԬΦϑΟε w ೥݄͔Βຊ֨࢝ಈ w ਖ਼ࣾһ਺໊ w ΞϧόΠτ໊
w QJYJWDIBUTUPSZΛ  ࡞ͬͯ·͢

ª ൃදࢿྉ 7 ෱Ԭ͸͍͍ͧ w த৺஍͔Βۭߓ·Ͱ෼ w Ո௞͍҆ w ͝൧ඒຯ͍͠
w 8FCܥاۀͷਐग़͕੝Μ w Ұॹʹ෱ԬͰಇ͘஥ؒΛ  ืू͍ͯ͠·͢ʂʂ

Google Pixel By Victor Stuber www.VictorStuber.com QJYJWDIBUTUPSZ

ª Google Pixel By Victor Stuber www.VictorStuber.com 9 w νϟοτܗࣜͷ 
খઆΛ౤ߘͰ͖ΔαʔϏε w J04ʜ/BUJWF 4XJGU w "OESPJE 1$ʜ18" w 18"͸ϐΫγϒͰ΋ॳɻ  ͔ͳΓख୳Γ w ࠓ೔͸18"൛ͷ஌ݟΛ  ࿩͠·͢ QJYJWDIBUTUPSZ

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

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

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

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

A2HS  (Add To Home Screen)

ª Google Pixel By Victor Stuber www.VictorStuber.com 15 w ʮϗʔϜը໘ʹ௥Ճʯ
w 18"ʹ͓͚Δ  ʮΞϓϦͷΠϯετʔϧʯ w "QQ*OTUBMMCBOOFSʹΑΔ  Πϯετʔϧૌٻ "OESPJE $ISPNF ")4

ª Google Pixel By Victor Stuber www.VictorStuber.com 16 w ผΞϓϦ͔ΒαʔϏεͷ63-Λ
౿Ήͱ18"Ͱ։͔͘બ΂Δ  "OESPJE w "OESPJEͰ͸ΞϓϦѻ͍ w ಺෦తʹ΋ʮϗʔϜը໘ʹ௥ Ճʯͨ͠ͱ͖ʹBQLΛੜ੒ ͍ͯ͠Δ ")4ΞϓϦͰ։͘

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

ª Google Pixel By Victor Stuber www.VictorStuber.com 18 w QJYJWDIBUTUPSZͰ͸ 
Πϯετʔϧखॱ͕ݟΒΕΔ  ՕॴΛ༻ҙ͍ͯ͠Δ w ໌ࣔతʹΞϓϦΠϯετʔϧͷ ҙࢥ͕͋ΔϢʔβʔ༻ QJYJWDIBUTUPSZͷ৔߹

JS ͷ Lazy Load ͱ Cache

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

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

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

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

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

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

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

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

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

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

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

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

೔ʑͷϦϦʔεΛ  ࢧ͑Δٕज़

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

ª Google Pixel By Victor Stuber www.VictorStuber.com *POJD 35 w
8FCٕज़ͰJ04 "OESPJE  ΞϓϦΛ࡞ΔͨΊͷ  ϑϨʔϜϫʔΫ 044 .*5 w 6*ίϯϙʔωϯτͷ  ݟӫ͕͑ωΠςΟϒʹ͍ۙ w $PSEPWBͰΞϓϦʹͯ͠  ετΞʹฒ΂Δͷ͕ओྲྀ w QJYJWDIBUTUPSZͰ͸ෆ࠾༻

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

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

Hosting

ª w 18"൛͸J04൛ͱಉ༷ʹ  ΫϥΠΞϯτΞϓϦͷͭ  ͱͯ͠ఏڙ w 3BJMT͸"1*ʹઐ೦  )5.-Λฦ͞ͳ͍ w QJYJW4LFUDIͱࣅͨࢥ૝
w ੩తϑΝΠϧΛαʔόʔʹ  ஔ͚ͩ͘ 39 #VJMEͱIPTUJOH QJYJW4LFUDIͷߏ੒

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

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

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

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

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

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

೔ʑͷϦϦʔεΛ  ࢧ͑Δٕज़

w 18"ͷڧΈ w ΠϯετʔϧɾΞοϓσʔτΛҙࣝ͠ͳ͍Ͱ࢖͑Δ w ΦϑϥΠϯରԠɾϓογϡ௨஌ͳͲ  ωΠςΟϒΞϓϦతػೳ͕࢖͑Δ w ೔ʑͷϦϦʔεΛΑΓྑ͍΋ͷʹ w
41"ͷٕज़͸ࣗಈԽɾεέʔϧ͠΍͍͢ w ໘౗ͳ࡞ۀ͸ػցʹ೚ͤͨΓɺΈΜͳͰָ͠Ή ·ͱΊ 48

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

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

More Decks by ikasoumen

Other Decks in Technology

Featured

Transcript

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

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