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

ただしく学ぼうPWA

 ただしく学ぼうPWA

136cec31e295d3ac8fa9d14c944250c5?s=128

ikasoumen

March 29, 2018
Tweet

Transcript

  1. ֶͨͩ͘͠΅͏18" ikasoumen 2018/03/29 ෱ԬPWAษڧձ #01

  2. w JLBTPVNFO w UXJUUFS!@JLBTPVNFO w ϐΫγϒ෱ԬΦϑΟε w ͓ֆ͔͖ͱ8FCٕज़͕޷͖ͳΤϯδχΞͰ͢ ࣗݾ঺հ 2

  3. Google Pixel By Victor Stuber www.VictorStuber.com × PWA (C)KAGEROU PROJECTʗ1st

    PLACEʗEDWORD RECORDSʗpixiv
  4. w ʮωΟςΟϒΞϓϦ͕ஔ͖׵ΘΔ͔΋ʜʯ w ʮͳΜ͔ΦϑϥΠϯͰ΋࢖͑Δͬͯฉ͖·ͨ͠ʂʯ w ʮ͋ΕͰ͠ΐɺϗʔϜը໘ʹ௥ՃͰ͖Δ΍ͭͰ͠ΐʁʯ w ʮ 6*͕ͻͲ͍͔Β 18"͕དྷΔͬͯݴ͍ͬͯΔΤϯδχΞ

    ͸ࠓ͙ࣙ͢ΊΖʯ
 18"ͱ͸࣮ࡍͲ͏͍͏΋ͷͳͷ͔ɺ
 ೝ͕ࣝ;Θͬͱ͍ͯ͠Δ 18"ͬͯͪΌΜͱ஌ͬͯΔʁ 4
  5. w 18"ͷ࡞ΓํͱɺͰ͖Δ͜ͱΛͪΌΜͱ஌Ζ͏ w ֤ϒϥ΢βͷಈ޲ w ࣮ࡍʹ͸·ͬͨ͜ͱ ࠓ೔࿩͢͜ͱ 5

  6. 18"1SPHSFTTJWF8FC"QQ 6 ϓϩάϨογϒɾΤϯϋϯεϝϯτ ϓϩάϨογϒΤϯϋϯεϝϯτ͸ɺ֩ͱͳΔίϯςϯπΛ࠷ ॏཁࢹ͢Δ΢ΣϒσβΠϯઓུͰ͋Δɻ ͜ͷઓུͰ͸ɺΤϯυϢʔβʔͷϒϥ΢βʔ΍Πϯλʔωοτ ઀ଓʹ߹ΘͤͯɺϓϨθϯςʔγϣϯ໘΍ػೳ໘Ͱඍົʹҟͳ Δ಺༰΍ٕज़తʹࠔ೉ͳ಺༰Λίϯςϯπʹ઴࣍௥Ճ͍ͯ͘͠ɻ w IUUQTKBXJLJQFEJBPSHXJLJϓϩάϨογϒΤϯϋϯεϝϯτ

  7. w ཁ͢Δʹ w ݹ͍ϒϥ΢βͰ΋جຊͱͳΔίϯςϯπΛݟΒΕΔ w ৽͍͠ϒϥ΢βͰ͋Ε͹ΑΓྑ͍ମݧ͕ಘΒΕΔ w طଘͷ8FCαΠταʔϏεΛஔ͖׵͑Δ·ͬͨ͘৽͍͠ Կ͔ɺͱ͍͏Θ͚Ͱ͸ͳ͍ 18"1SPHSFTTJWF8FC"QQ

    7
  8. w ʮ3FBDUͱ͔CBCFMͱ͔࢖Θͳ͍ͱಋೖͰ͖ͳ͍ΜͰ͠ΐ ͏ʁʯ w ʮ࠷ۙͷ+BWB4DSJQUࣄ৘͸Θ͔ΒΜʜɻʯ w ͦΜͳ͜ͱͳ͍Αʂ w ΋ͪΖΜ࠷৽ͷ+BWB4DSJQUͰͷ։ൃελΠϧ͕ಋೖ͞Εͯ Δͱ։ൃʹศརͳ෦෼͸͋Δ

    w Ͱ΋)5.-Ͱͪΐͬͱ֎෦ϑΝΠϧΛಡΈࠐΉͱ͜Ζ͔Β ಋೖͰ͖Δ Α͋͘Γͦ͏ͳ18"ͷΠϝʔδ 8
  9. 18"ͷ࡞Γํ

  10. w ͋ͳͨͷ8FCαΠτΛ18"Խ͢ΔେࣄͳϝϯόʔͰ͢  4FSWJDF8PSLFS  8FC"QQ.BOJGFTU ొ৔ਓ෺ 10

  11. w ௨ৗͷ+BWB4DSJQUͱ͸ҟͳΔϥΠϑαΠΫϧͰಈ࡞͢Δε ΫϦϓτ w 8FCαΠτʹΞΫηε͞ΕΔλΠϛϯάͰΠϯετʔϧ ͞ΕΔ w 8FCαΠτʹΞΫηεதͰͳͯ͘΋࣮ߦͰ͖Δ w ఆظతʹ4FSWJTF8PSLFSࣗମͷߋ৽͕νΣοΫ͞Εɺߋ

    ৽͕͋Ε͹Ξοϓσʔτ͞ΕΔ ొ৔ਓ෺4FSWJDF8PSLFS 11
  12. ª 12 ྫ // sw.js self.addEventListener('install', (event) => { //

    install࣌ʹߦΘΕΔॲཧ… }); self.addEventListener('fetch', (event) => { // fetch࣌ʹߦΘΕΔॲཧ… }); w 4FSWJDF8PSLFSࣗମͷϥΠ ϑαΠΫϧʹ߹Θͤͯɺ
 Πϕϯτ͕ఆٛ͞Ε͍ͯΔ
  13. ª 13 Πϯετʔϧ if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') .then(function(registration)

    { // ొ࿥੒ޭ࣌ͷॲཧ }).catch(function(err) { // ొ࿥ࣦഊ࣌ͷॲཧ }); } w +BWB4DSJQUଆͰӈͷॲཧΛ ݺΜͰɺ4FSWJDF8PSLFSΛ 8FCαΠτʹΠϯετʔϧ ͢Δ
  14. w 4FSWJDF8PSLFSεΫϦϓτ͕ɺΠϯετʔϧ͍ͨ͠
 8FCαΠτͱಉ͡υϝΠϯͰఏڙ͞Ε͍ͯΔ w )5514ͰαΠτ͕ఏڙ͞Ε͍ͯΔ 4FSWJDF8PSLFSͷ੍໿ 14

  15. w 4FSWJDF8PSLFSΛΠϯετʔϧͨ͠8FCαΠτʹ
 ࠶౓ΞΫηε͢ΔͳͲͷλΠϛϯάͰɺ4FSWJDF8PSLFS͕ ߋ৽͞Ε͍ͯͳ͍͔όοΫάϥ΢ϯυͰνΣοΫ͞ΕΔɻ w ࠷৽൛͕͋ͬͨ৔߹ʹ͸ɺجຊతʹ࣍ͷΞΫηε͔Βͦͷ 4FSWJDF8PSLFSΛ࢖͏ɻ͙͢ʹ࢖͏͜ͱ΋Ͱ͖Δɻ 4FSWJTF8PSLFSͷΞοϓσʔτ 15

  16. w JOTUBMM w 4FSWJDF8PSLFS͕Πϯετʔϧ͞ΕΔͱൃՐ w ΦϑϥΠϯରԠʹඞཁͳΞηοτΛΩϟογϡ͢Δࡍʹ Α͘࢖͏ w IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMT QSJNFSTTFSWJDFXPSLFST

    IMKBTFSWJDF@XPSLFS@ ϥΠϑαΠΫϧΠϕϯτJOTUBMM 16
  17. w BDUJWBUF w 4FSWJDF8PSLFS͕ߋ৽͞Εɺ༗ޮʹͳΔͱൃՐ w ҎલΠϯετʔϧͨ͠ΩϟογϡΛ࡟আ͢ΔࡍʹΑ͘࢖ ͏ w IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMT QSJNFSTTFSWJDFXPSLFST

    IMKBVQEBUFBTFSWJDF XPSLFS ϥΠϑαΠΫϧΠϕϯτBDUJWBUF 17
  18. w GFUDI w Πϯετʔϧ͞Εͨ8FCαΠτ͕ߦ͏શͯͷϦΫΤετʹ ରͯ͠ൃՐ w ֎෦΁ͷϦΫΤετͱϨεϙϯεʹԿ͔ॲཧΛ͔͚ΒΕΔ w ಛఆ63-ͷϦΫΤετͱϨεϙϯεΛΩϟογϡ͢Δࡍʹ Α͘࢖͏

    w IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMT QSJNFSTTFSWJDFXPSLFST IMKB@ ϥΠϑαΠΫϧΠϕϯτGFUDI 18
  19. w QVTI$ISPNF 'JSFGPYPOMZ w ֎෦͔ΒϓογϡϝοηʔδΛड͚ͨ࣌ʹൃՐ w TZOD 0OFP⒎#BDLHSPVOETZOD $ISPNFPOMZ w

    όοΫάϥ΢ϯυͰͳΜΒ͔ͷॲཧΛߦ͏ΠϕϯτΛొ࿥Ͱ͖Δ w ྫ͑͹Կ͔ͷૹ৴͕௨৴؀ڥ͕ѱࣦͯ͘ഊͨ͠ͷͰɺޙ͔ΒόοΫάϥ ΢ϯυͰϦτϥΠ͢Δ w TZOD 1FSJPEJD#BDLHSPVOETZOD JO%FTJHO w ॲཧΛొ࿥ͯ͠ఆظతʹ࣮ߦ͢Δɻ w ྫ͑͹ఆظతͳهࣄ΍ϝʔϧͷߋ৽νΣοΫ௨஌ w ଞʹ΋HFPGFODJOHͱ͔͍Ζ͍ΖఏҊ͞Ε͍ͯΔ ͦͷଞͷΠϕϯτ 19
  20. w 8FCαΠτΛΞϓϦέʔγϣϯͱͯ͠ѻ͏࣌ͷઃఆΛهड़ Ͱ͖ΔɺKTPOܗࣜͷϑΝΠϧ ొ৔ਓ෺8FC"QQ.BOJGFTU 20

  21. ª 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
  22. ͜ΕͰ18"ʹͳΓ·ͨ͠ʂ

  23.  4FSWJDF8PSLFSΛ༻ҙͯ͠+4͔ΒಡΈࠐΉ  8FC"QQ.BOJGFTUΛ༻ҙͯ͠IUNM͔ΒಡΈࠐΉ Ͷɺ؆୯Ͱ͠ΐ͏ʁ ·ͱΊΔͱ 23

  24. ओཁϒϥ΢βͷ࣮૷ঢ়گͱ
 ಈ޲ ೥݄൛

  25. 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
  26. w 4FSWJDF8PSLFS⭕ w 8FC"QQ.BOJGFTU❌ w 'JSFGPY04͕ੜ͖͍ͯΕ͹ରԠ͞ΕͨΜͩΖ͏͔ w 1VTI"1*⭕ w /PUJpDBUJPO"1*⭕

    'JSF'PY 26
  27. w 4FSWJDF8PSLFS❌ w ࣍ͷόʔδϣϯͰདྷΔͧʂ w 8FC"QQ.BOJGFTU❌ w ࣍ͷόʔδϣϯͰདྷΔͧʂ w 1VTI"1*❌

    w ͪͳΈʹEFTLUPQͷTBGBSJͰϓογϡ௨஌͕ૹΕΔ΍ͭ͸ "QQMF1VTI/PUJpDBUJPOTFSWJDFΛ࢖ͬͨผ෺Ͱ͢ w /PUJpDBUJPO"1*⭕ 4BGBSJ NBDJ04 27
  28. w 4FSWJDF8PSLFS❌ w ࣍ͷόʔδϣϯͰདྷΔͧʂ w 8FC"QQ.BOJGFTU❌ w কདྷతʹ8JOEPXT"QQ4UPSFʹฒͿΑ͏ʹ͢ΔΒ͍͠ w 1VTI"1*❌

    w ࣍ͷόʔδϣϯͰདྷΔͧʂ w /PUJpDBUJPO"1*⭕ &EHF 28
  29. ࣮ࡍʹӡ༻ͯ͠Δ͜ͱ ٧·ͬͨ͜ͱ

  30. w QJYJWDIBUTUPSZ͸+BWB4DSJQUͷϑΝΠϧΛ෼ׂͯ͠഑৴ͯ͠ ͍Δ w NBJOKTͱɺ࠷ॳͷը໘ʹඞཁͳ෼Ҏ֎͸ɺը໘ભҠͨ࣌͠ ʹಡΈࠐΉ w σϓϩΠ͢Δͱ෼ׂϑΝΠϧ͕ߋ৽͞Ε໊ͯલ͕มΘΔ w ΞϓϦ͕ੜ͖͍ͯΔؒɺNBJOKT͕Ϧϩʔυ͞Εͳ͍ͷͰɺ෼

    ׂϑΝΠϧ͕ࢀরͰ͖ͳ͘ͳΔ w 18"͸ಛʹੜଘظ͕ؒ௕͍ͷͰɺٱ͠ͿΓʹΞϓϦΛ։͘ͱ Α͘ࢭ·ͬͯͨ 18"͸ੜଘ͕࣌ؒ௕͍ 30
  31. ª 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ͷߋ৽αΠΫ ϧ͕ҧ͏ͷͰͨ·ʹ͜ͷઓུ ͸ࣦഊ͢Δ͕ɺ͍ͩͿϚγ
  32. w ࣍ճىಈ࣌͸࠷ޙʹډͨ63-͔ΒΞϓϦΛ࠶։͠Α͏ͱ ͢Δ w Πϯετʔϧͯ͠ͳ͍ͱ౸ୡͰ͖ͳ͍63-͸ϦϥΠτ͠ ͳ͍खൈ͖Λͯͨ͠Βɺී௨ʹʹͳͬͨ w ͪΌΜͱ41"ʹ͠·͠ΐ͏ɻQJYJWDIBUTUPSZ͸'JSFCBTF )PTUJOHʹϦϥΠτͯ͠΋Β͍ͬͯ·͢ɻ "OESPJEʹΠϯετʔϧͨ͠18"͕Ωϧ͞ΕΔͱʜ

    32
  33. w ϦϦʔε౰ॳɺ18"൛͸"OESPJEʹΠϯετʔϧ͠ͳ͍ ͱ࢖͑ͳ͔ͬͨ w ʮ1$Ͱ΋ॻ͖͍ͨʂʯͱ͍͏ϥΠλʔ͞Μ͔Βͷ੠͕ɻ w ָউͩͱࢥ͕ͬͯͨɺࠓ·ͰϢʔβʔʹ63-Λݟ͍ͤͯ ͳ͔ͬͨฐ֐͕ʜ w ࠓ·Ͱ͋Γ͑ͳ͔ͬͨը໘ભҠͷରԠ

    w 6*ϑϨʔϜϫʔΫ͕૊Έཱ͍ͯͯͨมͳ63-Λഉআ w ݟੵ΋Γͱൺ΂͔ͯͳΓ΍Δ͜ͱ͕͋ͬͨ 1$൛ରԠʹ͍ͭͯ 33
  34. ·ͱΊ

  35. w ΦϑϥΠϯରԠͯ͠18"Խ͢Δ͘Β͍ͳΒ
 ͦΜͳʹ೉͘͠ͳ͍ɻ w ֤ϒϥ΢β͕͔ͳΓαϙʔτΛ࢝Ί͍ͯΔɻ w ΈΜͳ΋ͥͻࢼͯ͠ΈΑ͏ʂ ࠓ೔ͷ·ͱΊ 35

  36. ͓ΘΓ