Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
ただしく学ぼうPWA
ikasoumen
March 29, 2018
Technology
2
500
ただしく学ぼうPWA
ikasoumen
March 29, 2018
Tweet
Share
More Decks by ikasoumen
See All by ikasoumen
ikasoumen
0
210
ikasoumen
5
4.6k
ikasoumen
0
74
ikasoumen
0
710
Other Decks in Technology
See All in Technology
am7cinnamon
2
2.7k
yuuturn
1
130
saoritakita
0
340
stakaya
4
1.5k
shirayanagiryuji
1
400
con_mame
4
2k
hsano
0
120
nkjzm
1
830
asaju7142501
0
260
masakick
0
120
kanaugust
PRO
0
160
iqbocchi
0
530
Featured
See All Featured
kastner
54
1.9k
marktimemedia
6
330
mza
80
4.1k
holman
288
130k
addyosmani
1348
190k
hannesfritz
27
930
gr2m
83
11k
carmenhchung
26
1.3k
dougneiner
119
7.8k
garrettdimon
287
110k
robhawkes
52
2.8k
sachag
267
17k
Transcript
ֶͨͩ͘͠΅͏18" ikasoumen 2018/03/29 ԬPWAษڧձ #01
w JLBTPVNFO w UXJUUFS!@JLBTPVNFO w ϐΫγϒԬΦϑΟε w ͓ֆ͔͖ͱ8FCٕज़͕͖ͳΤϯδχΞͰ͢ ࣗݾհ 2
Google Pixel By Victor Stuber www.VictorStuber.com × PWA (C)KAGEROU PROJECTʗ1st
PLACEʗEDWORD RECORDSʗpixiv
w ʮωΟςΟϒΞϓϦ͕ஔ͖ΘΔ͔ʜʯ w ʮͳΜ͔ΦϑϥΠϯͰ͑Δͬͯฉ͖·ͨ͠ʂʯ w ʮ͋ΕͰ͠ΐɺϗʔϜը໘ʹՃͰ͖ΔͭͰ͠ΐʁʯ w ʮ 6*͕ͻͲ͍͔Β 18"͕དྷΔͬͯݴ͍ͬͯΔΤϯδχΞ
ࠓ͙ࣙ͢ΊΖʯ 18"ͱ࣮ࡍͲ͏͍͏ͷͳͷ͔ɺ ೝ͕ࣝ;Θͬͱ͍ͯ͠Δ 18"ͬͯͪΌΜͱͬͯΔʁ 4
w 18"ͷ࡞ΓํͱɺͰ͖Δ͜ͱΛͪΌΜͱΖ͏ w ֤ϒϥβͷಈ w ࣮ࡍʹ·ͬͨ͜ͱ ࠓ͢͜ͱ 5
18"1SPHSFTTJWF8FC"QQ 6 ϓϩάϨογϒɾΤϯϋϯεϝϯτ ϓϩάϨογϒΤϯϋϯεϝϯτɺ֩ͱͳΔίϯςϯπΛ࠷ ॏཁࢹ͢ΔΣϒσβΠϯઓུͰ͋Δɻ ͜ͷઓུͰɺΤϯυϢʔβʔͷϒϥβʔΠϯλʔωοτ ଓʹ߹ΘͤͯɺϓϨθϯςʔγϣϯ໘ػೳ໘Ͱඍົʹҟͳ Δ༰ٕज़తʹࠔͳ༰Λίϯςϯπʹ࣍Ճ͍ͯ͘͠ɻ w IUUQTKBXJLJQFEJBPSHXJLJϓϩάϨογϒΤϯϋϯεϝϯτ
w ཁ͢Δʹ w ݹ͍ϒϥβͰجຊͱͳΔίϯςϯπΛݟΒΕΔ w ৽͍͠ϒϥβͰ͋ΕΑΓྑ͍ମݧ͕ಘΒΕΔ w طଘͷ8FCαΠταʔϏεΛஔ͖͑Δ·ͬͨ͘৽͍͠ Կ͔ɺͱ͍͏Θ͚Ͱͳ͍ 18"1SPHSFTTJWF8FC"QQ
7
w ʮ3FBDUͱ͔CBCFMͱ͔Θͳ͍ͱಋೖͰ͖ͳ͍ΜͰ͠ΐ ͏ʁʯ w ʮ࠷ۙͷ+BWB4DSJQUࣄΘ͔ΒΜʜɻʯ w ͦΜͳ͜ͱͳ͍Αʂ w ͪΖΜ࠷৽ͷ+BWB4DSJQUͰͷ։ൃελΠϧ͕ಋೖ͞Εͯ Δͱ։ൃʹศརͳ෦͋Δ
w Ͱ)5.-Ͱͪΐͬͱ֎෦ϑΝΠϧΛಡΈࠐΉͱ͜Ζ͔Β ಋೖͰ͖Δ Α͋͘Γͦ͏ͳ18"ͷΠϝʔδ 8
18"ͷ࡞Γํ
w ͋ͳͨͷ8FCαΠτΛ18"Խ͢ΔେࣄͳϝϯόʔͰ͢ 4FSWJDF8PSLFS 8FC"QQ.BOJGFTU ొਓ 10
w ௨ৗͷ+BWB4DSJQUͱҟͳΔϥΠϑαΠΫϧͰಈ࡞͢Δε ΫϦϓτ w 8FCαΠτʹΞΫηε͞ΕΔλΠϛϯάͰΠϯετʔϧ ͞ΕΔ w 8FCαΠτʹΞΫηεதͰͳ࣮ͯ͘ߦͰ͖Δ w ఆظతʹ4FSWJTF8PSLFSࣗମͷߋ৽͕νΣοΫ͞Εɺߋ
৽͕͋ΕΞοϓσʔτ͞ΕΔ ొਓ4FSWJDF8PSLFS 11
ª 12 ྫ // sw.js self.addEventListener('install', (event) => { //
install࣌ʹߦΘΕΔॲཧ… }); self.addEventListener('fetch', (event) => { // fetch࣌ʹߦΘΕΔॲཧ… }); w 4FSWJDF8PSLFSࣗମͷϥΠ ϑαΠΫϧʹ߹Θͤͯɺ Πϕϯτ͕ఆٛ͞Ε͍ͯΔ
ª 13 Πϯετʔϧ if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') .then(function(registration)
{ // ొޭ࣌ͷॲཧ }).catch(function(err) { // ొࣦഊ࣌ͷॲཧ }); } w +BWB4DSJQUଆͰӈͷॲཧΛ ݺΜͰɺ4FSWJDF8PSLFSΛ 8FCαΠτʹΠϯετʔϧ ͢Δ
w 4FSWJDF8PSLFSεΫϦϓτ͕ɺΠϯετʔϧ͍ͨ͠ 8FCαΠτͱಉ͡υϝΠϯͰఏڙ͞Ε͍ͯΔ w )5514ͰαΠτ͕ఏڙ͞Ε͍ͯΔ 4FSWJDF8PSLFSͷ੍ 14
w 4FSWJDF8PSLFSΛΠϯετʔϧͨ͠8FCαΠτʹ ࠶ΞΫηε͢ΔͳͲͷλΠϛϯάͰɺ4FSWJDF8PSLFS͕ ߋ৽͞Ε͍ͯͳ͍͔όοΫάϥϯυͰνΣοΫ͞ΕΔɻ w ࠷৽൛͕͋ͬͨ߹ʹɺجຊతʹ࣍ͷΞΫηε͔Βͦͷ 4FSWJDF8PSLFSΛ͏ɻ͙͢ʹ͏͜ͱͰ͖Δɻ 4FSWJTF8PSLFSͷΞοϓσʔτ 15
w JOTUBMM w 4FSWJDF8PSLFS͕Πϯετʔϧ͞ΕΔͱൃՐ w ΦϑϥΠϯରԠʹඞཁͳΞηοτΛΩϟογϡ͢Δࡍʹ Α͘͏ w IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMT QSJNFSTTFSWJDFXPSLFST
IMKBTFSWJDF@XPSLFS@ ϥΠϑαΠΫϧΠϕϯτJOTUBMM 16
w BDUJWBUF w 4FSWJDF8PSLFS͕ߋ৽͞Εɺ༗ޮʹͳΔͱൃՐ w ҎલΠϯετʔϧͨ͠ΩϟογϡΛআ͢ΔࡍʹΑ͘ ͏ w IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMT QSJNFSTTFSWJDFXPSLFST
IMKBVQEBUFBTFSWJDF XPSLFS ϥΠϑαΠΫϧΠϕϯτBDUJWBUF 17
w GFUDI w Πϯετʔϧ͞Εͨ8FCαΠτ͕ߦ͏શͯͷϦΫΤετʹ ରͯ͠ൃՐ w ֎෦ͷϦΫΤετͱϨεϙϯεʹԿ͔ॲཧΛ͔͚ΒΕΔ w ಛఆ63-ͷϦΫΤετͱϨεϙϯεΛΩϟογϡ͢Δࡍʹ Α͘͏
w IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMT QSJNFSTTFSWJDFXPSLFST IMKB@ ϥΠϑαΠΫϧΠϕϯτGFUDI 18
w QVTI$ISPNF 'JSFGPYPOMZ w ֎෦͔ΒϓογϡϝοηʔδΛड͚ͨ࣌ʹൃՐ w TZOD 0OFP⒎#BDLHSPVOETZOD $ISPNFPOMZ w
όοΫάϥϯυͰͳΜΒ͔ͷॲཧΛߦ͏ΠϕϯτΛొͰ͖Δ w ྫ͑Կ͔ͷૹ৴͕௨৴ڥ͕ѱࣦͯ͘ഊͨ͠ͷͰɺޙ͔ΒόοΫάϥ ϯυͰϦτϥΠ͢Δ w TZOD 1FSJPEJD#BDLHSPVOETZOD JO%FTJHO w ॲཧΛొͯ͠ఆظతʹ࣮ߦ͢Δɻ w ྫ͑ఆظతͳهࣄϝʔϧͷߋ৽νΣοΫ௨ w ଞʹHFPGFODJOHͱ͔͍Ζ͍ΖఏҊ͞Ε͍ͯΔ ͦͷଞͷΠϕϯτ 19
w 8FCαΠτΛΞϓϦέʔγϣϯͱͯ͠ѻ͏࣌ͷઃఆΛهड़ Ͱ͖ΔɺKTPOܗࣜͷϑΝΠϧ ొਓ8FC"QQ.BOJGFTU 20
ª 21 ྫ //manifest.json { "name": "pixiv chatstory", "short_name": "chatstory",
"start_url": ".", "display": "standalone", "orientation": "portrait", "icons": [{ "src": "assets/imgs/logo.png", "sizes": "512x512", "type": "image/png" }], "background_color": "#FFFFFF", "theme_color": "#FFFFFF" } w lEJTQMBZzϓϩύςΟͰϒϥ βͷϔομʔΛඇදࣔʹ ͢ΔʜͳͲͷઃఆΛ͢Δɻ w ͋ͱIUNMଆͰ NBOJGFTUKTPOΛಡΈࠐΉ w MJOLSFMNBOJGFTU ISFGNBOJGFTUKTPO
͜ΕͰ18"ʹͳΓ·ͨ͠ʂ
4FSWJDF8PSLFSΛ༻ҙͯ͠+4͔ΒಡΈࠐΉ 8FC"QQ.BOJGFTUΛ༻ҙͯ͠IUNM͔ΒಡΈࠐΉ Ͷɺ؆୯Ͱ͠ΐ͏ʁ ·ͱΊΔͱ 23
ओཁϒϥβͷ࣮ঢ়گͱ ಈ ݄൛
w 4FSWJDF8PSLFS⭕ w EFTLUPQͰNPCJMFͰ͑Δɻ w 0OF0⒎#BDLHSPVOE4ZOD͕།Ұ͑Δɻ w 8FC"QQ.BOJGFTU⭕ w "OESPJEͷϗʔϜը໘ʹΠϯετʔϧͰ͖Δɻ
w ·ͰʹEFTLUPQͰ18"ΛΠϯετʔϧͰ͖ΔΑ͏ʹ͢ ΔΒ͍͠ɻ w 1VTI"1*⭕ w /PUJpDBUJPO"1*⭕ $ISPNF 25
w 4FSWJDF8PSLFS⭕ w 8FC"QQ.BOJGFTU❌ w 'JSFGPY04͕ੜ͖͍ͯΕରԠ͞ΕͨΜͩΖ͏͔ w 1VTI"1*⭕ w /PUJpDBUJPO"1*⭕
'JSF'PY 26
w 4FSWJDF8PSLFS❌ w ࣍ͷόʔδϣϯͰདྷΔͧʂ w 8FC"QQ.BOJGFTU❌ w ࣍ͷόʔδϣϯͰདྷΔͧʂ w 1VTI"1*❌
w ͪͳΈʹEFTLUPQͷTBGBSJͰϓογϡ௨͕ૹΕΔͭ "QQMF1VTI/PUJpDBUJPOTFSWJDFΛͬͨผͰ͢ w /PUJpDBUJPO"1*⭕ 4BGBSJ NBDJ04 27
w 4FSWJDF8PSLFS❌ w ࣍ͷόʔδϣϯͰདྷΔͧʂ w 8FC"QQ.BOJGFTU❌ w কདྷతʹ8JOEPXT"QQ4UPSFʹฒͿΑ͏ʹ͢ΔΒ͍͠ w 1VTI"1*❌
w ࣍ͷόʔδϣϯͰདྷΔͧʂ w /PUJpDBUJPO"1*⭕ &EHF 28
࣮ࡍʹӡ༻ͯ͠Δ͜ͱ ٧·ͬͨ͜ͱ
w QJYJWDIBUTUPSZ+BWB4DSJQUͷϑΝΠϧΛׂͯ͠৴ͯ͠ ͍Δ w NBJOKTͱɺ࠷ॳͷը໘ʹඞཁͳҎ֎ɺը໘ભҠͨ࣌͠ ʹಡΈࠐΉ w σϓϩΠ͢ΔͱׂϑΝΠϧ͕ߋ৽͞Ε໊ͯલ͕มΘΔ w ΞϓϦ͕ੜ͖͍ͯΔؒɺNBJOKT͕Ϧϩʔυ͞Εͳ͍ͷͰɺ
ׂϑΝΠϧ͕ࢀরͰ͖ͳ͘ͳΔ w 18"ಛʹੜଘظ͕͍ؒͷͰɺٱ͠ͿΓʹΞϓϦΛ։͘ͱ Α͘ࢭ·ͬͯͨ 18"ੜଘ͕͍࣌ؒ 30
ª 31 8PSLCPY 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 XFCQBDLΛ௨ͯ͠4FSWJDF 8PSLFSͷKTϑΝΠϧΛࣗಈ ੜͰ͖Δ w ׂͨ͠KTϑΝΠϧΛJOTUBMM ࣌ʹΩϟογϡ͢ΔΑ͏ʹ͠ ͨ w NBJOKTͷߋ৽αΠΫϧͱ 4FSWJDF8PSLFSͷߋ৽αΠΫ ϧ͕ҧ͏ͷͰͨ·ʹ͜ͷઓུ ࣦഊ͢Δ͕ɺ͍ͩͿϚγ
w ࣍ճىಈ࣌࠷ޙʹډͨ63-͔ΒΞϓϦΛ࠶։͠Α͏ͱ ͢Δ w Πϯετʔϧͯ͠ͳ͍ͱ౸ୡͰ͖ͳ͍63-ϦϥΠτ͠ ͳ͍खൈ͖Λͯͨ͠Βɺී௨ʹʹͳͬͨ w ͪΌΜͱ41"ʹ͠·͠ΐ͏ɻQJYJWDIBUTUPSZ'JSFCBTF )PTUJOHʹϦϥΠτͯ͠Β͍ͬͯ·͢ɻ "OESPJEʹΠϯετʔϧͨ͠18"͕Ωϧ͞ΕΔͱʜ
32
w ϦϦʔεॳɺ18"൛"OESPJEʹΠϯετʔϧ͠ͳ͍ ͱ͑ͳ͔ͬͨ w ʮ1$Ͱॻ͖͍ͨʂʯͱ͍͏ϥΠλʔ͞Μ͔Βͷ͕ɻ w ָউͩͱࢥ͕ͬͯͨɺࠓ·ͰϢʔβʔʹ63-Λݟ͍ͤͯ ͳ͔ͬͨฐ͕ʜ w ࠓ·Ͱ͋Γ͑ͳ͔ͬͨը໘ભҠͷରԠ
w 6*ϑϨʔϜϫʔΫ͕Έཱ͍ͯͯͨมͳ63-Λഉআ w ݟੵΓͱൺ͔ͯͳΓΔ͜ͱ͕͋ͬͨ 1$൛ରԠʹ͍ͭͯ 33
·ͱΊ
w ΦϑϥΠϯରԠͯ͠18"Խ͢Δ͘Β͍ͳΒ ͦΜͳʹ͘͠ͳ͍ɻ w ֤ϒϥβ͕͔ͳΓαϙʔτΛ࢝Ί͍ͯΔɻ w ΈΜͳͥͻࢼͯ͠ΈΑ͏ʂ ࠓͷ·ͱΊ 35
͓ΘΓ