ただしく学ぼうPWA

ֶͨͩ͘͠΅͏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

͓ΘΓ

ただしく学ぼうPWA

ただしく学ぼうPWA

More Decks by ikasoumen

Other Decks in Technology

Featured

Transcript