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

ただしく学ぼうPWA

 ただしく学ぼうPWA

ikasoumen

March 29, 2018
Tweet

More Decks by ikasoumen

Other Decks in Technology

Transcript

  1. ª 12 ྫ // sw.js self.addEventListener('install', (event) => { //

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

    { // ొ࿥੒ޭ࣌ͷॲཧ }).catch(function(err) { // ొ࿥ࣦഊ࣌ͷॲཧ }); } w +BWB4DSJQUଆͰӈͷॲཧΛ ݺΜͰɺ4FSWJDF8PSLFSΛ 8FCαΠτʹΠϯετʔϧ ͢Δ
  3. w QVTI$ISPNF 'JSFGPYPOMZ w ֎෦͔ΒϓογϡϝοηʔδΛड͚ͨ࣌ʹൃՐ w TZOD 0OFP⒎#BDLHSPVOETZOD $ISPNFPOMZ w

    όοΫάϥ΢ϯυͰͳΜΒ͔ͷॲཧΛߦ͏ΠϕϯτΛొ࿥Ͱ͖Δ w ྫ͑͹Կ͔ͷૹ৴͕௨৴؀ڥ͕ѱࣦͯ͘ഊͨ͠ͷͰɺޙ͔ΒόοΫάϥ ΢ϯυͰϦτϥΠ͢Δ w TZOD 1FSJPEJD#BDLHSPVOETZOD JO%FTJHO w ॲཧΛొ࿥ͯ͠ఆظతʹ࣮ߦ͢Δɻ w ྫ͑͹ఆظతͳهࣄ΍ϝʔϧͷߋ৽νΣοΫ௨஌ w ଞʹ΋HFPGFODJOHͱ͔͍Ζ͍ΖఏҊ͞Ε͍ͯΔ ͦͷଞͷΠϕϯτ 19
  4. ª 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
  5. 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
  6. w 4FSWJDF8PSLFS❌ w ࣍ͷόʔδϣϯͰདྷΔͧʂ w 8FC"QQ.BOJGFTU❌ w ࣍ͷόʔδϣϯͰདྷΔͧʂ w 1VTI"1*❌

    w ͪͳΈʹEFTLUPQͷTBGBSJͰϓογϡ௨஌͕ૹΕΔ΍ͭ͸ "QQMF1VTI/PUJpDBUJPOTFSWJDFΛ࢖ͬͨผ෺Ͱ͢ w /PUJpDBUJPO"1*⭕ 4BGBSJ NBDJ04 27
  7. ª 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ͷߋ৽αΠΫ ϧ͕ҧ͏ͷͰͨ·ʹ͜ͷઓུ ͸ࣦഊ͢Δ͕ɺ͍ͩͿϚγ