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

オフラインWebアプリの仕組み

 オフラインWebアプリの仕組み

Ionic Meetup Nagoya #1のLT発表資料です。

0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=128

Yosuke Onoue

April 14, 2018
Tweet

Transcript

  1. ΦϑϥΠϯ8FCΞϓϦͷ࢓૊Έ ͓ͷ͏͑ *POJD.FFUVQ/BHPZB ೥݄೔ ͜ͷεϥΠυͷ63- IUUQCJUMZ*4Z1

  2. ࣗݾ঺հ w ඌ্༸հ :PTVLF0OPVF  w ೔ຊେֶจཧֶ෦৘ใՊֶՊॿڭ w ՄࢹԽɺ࠷దԽɺΞϧΰϦζϜͷݚڀ w

    *POJDΞϯν w ϚΠϒʔϜ w -JHIUIPVTFͰຬ఺Λ໨ࢦ͢
  3. 8FCαΠτ͸
 ωοτ͕ͳͯ͘΋
 ݟΕΔ࣌୅΁

  4. ΦϑϥΠϯ8FCΞϓϦ w ωοτ͕஗͍ɺෆ௨ͳ৔ॴͰ΋࢖͑Δ8FCΞϓϦ΁ w ஍Լɺτϯωϧͷதɺաૄ஍ɺൃల్্ࠃɺӉ஦ɺʜ w 1SPHSFTTJWF8FC"QQT 18" ͷཁ݅ͷҰͭ w

    18"$IFDLMJTU
 IUUQTEFWFMPQFSTHPPHMFDPNXFCQSPHSFTTJWFXFCBQQTDIFDLMJTU  w -JHIUIPVTF
 IUUQTDISPNFHPPHMFDPNXFCTUPSFEFUBJMMJHIUIPVTFCMJQNEDPOMLQJOFGFIONKBNNGKQNQCKL  w ࡞ͬͨ w IUUQTFHSJEKQ
  5. ΦϑϥΠϯ8FCΞϓϦΛࢧ͑Δٕज़ w ϒϥ΢βετϨʔδ w 8FC4UPSBHF TFTTJPO4UPSBHFMPDBM4UPSBHF  w *OEFYFE%# w

    ΦϑϥΠϯΩϟογϡ w 4FSWJDF8PSLFS $BDIF"1* w ͦͷଞ w /BWJHBUPS0O-JOF w #BDLHSPVOE4ZOD
  6. ΦϑϥΠϯ8FCΞϓϦΛࢧ͑Δٕज़ w ϒϥ΢βετϨʔδ w 8FC4UPSBHF TFTTJPO4UPSBHFMPDBM4UPSBHF  w *OEFYFE%# w

    ΦϑϥΠϯΩϟογϡ w 4FSWJDF8PSLFS $BDIF"1* w ͦͷଞ w /BWJHBUPS0O-JOF w #BDLHSPVOE4ZOD
  7. "QQ4IFMMΞʔΩςΫνϟ΁ͷస׵ 8FCϖʔδ
 )5.-$44+4 αʔόʔαΠυ ΫϥΠΞϯταΠυ %# ίϯςϯπ )5.-$44+4 Ωϟογϡ ैདྷͷ8FCΞϓϦ

    "QQ4IFMM 5FNQMBUF 8FCϖʔδ Precache Runtime Cache
  8. 4FSWJDF8PSLFS w ωοτϫʔΫϦΫΤετͷϑοΫॲཧ w ΦϑϥΠϯΩϟογϡ w 1SFDBDIF3VOUJNF$BDIF w ϓογϡ௨஌ w

    #BDLHSPVOE4ZOD w ʜ
  9. 4FSWJDF8PSLFSʹΑΔΩϟογϡ ίϯςϯπ )5.-$44+4 Ωϟογϡ 8FCϖʔδ Precache Runtime Cache Ωϟογϡ w

    1SFDBDIF w 8FCΞϓϦʹඞཁͳϑΝΠϧΛ
 4FSWJDF8PSLFSొ࿥࣌ʹΩϟογϡ w 3VOUJNF$BDIF w ίϯςϯπɺը૾౳ΛඞཁʹԠͯ͡Ωϟογϡ
  10. 4FSWJDF8PSLFSΛॻ͘ w ੜ w :PVS'JSTU1SPHSFTTJWF8FC"QQ
 IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTDPEFMBCTZPVSpSTUQXBQQ  w TXQSFBDBDIFTXUPPMT w

    8FCΞϓϦͷΦϑϥΠϯԽʹඞཁͳॲཧͷఏڙ w 8PSLCPY w TXQSFDBDIFTXUPPMTΛΑΓ࢖͍΍͘͢ߴػೳʹ
  11. 8PSLCPY IUUQTEFWFMPQFSTHPPHMFDPNXFCUPPMTXPSLCPY

  12. 4FSWJDF8PSLFSͷੜ੒ w XPSLCPYDMJ w XPSLCPYίϚϯυ w XPSLCPYCVJME w /PEFKTHVMQ͔Βར༻ w

    XPSLCPYXFCQBDLQMVHJO w XFCQBDLϓϥάΠϯ w XBUDIɺ8FCQBDL%FW4FSWFSରԠ
  13. 4FSWJDF8PSLFSͷੜ੒ w XPSLCPYDMJ w XPSLCPYίϚϯυ w XPSLCPYCVJME w /PEFKTHVMQ͔Βར༻ w

    XPSLCPYXFCQBDLQMVHJO w XFCQBDLϓϥάΠϯ w XBUDIɺ8FCQBDL%FW4FSWFSରԠ
  14. XPSLCPYXFCQBDLQMVHJO const WorkboxPlugin = require('workbox-webpack-plugin') module.exports = { plugins: [

    new WorkboxPlugin.GenerateSW({ swDest: 'sw.js', globDirectory: './public', globPatterns: [ '*.{html,css,js}' ], globIgnores: [ '_redirects', 'bundle.js', 'sw.js' ], navigateFallback: '/index.html' }) ] }
  15. 4FSWJDF8PSLFSͷొ࿥ if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') .then((registration) => {

    }).catch(() => { }) }
  16. ·ͱΊ w 8FCΞϓϦ͸ΦϑϥΠϯͰ΋ಈ࣌͘୅ w ͜Ε·Ͱͷ8FCͷৗࣝɺΞϓϦͷৗࣝΛݟ௚ͦ͏ w *POJD͚͕ͩ18"ͷબ୒ࢶͰ͸ͳ͍ w 8PSLCPY͸͍͍ͧ