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

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

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

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

Yosuke Onoue

April 14, 2018
Tweet

More Decks by Yosuke Onoue

Other Decks in Technology

Transcript

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

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

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

    ΦϑϥΠϯΩϟογϡ w 4FSWJDF8PSLFS $BDIF"1* w ͦͷଞ w /BWJHBUPS0O-JOF w #BDLHSPVOE4ZOD
  4. 4FSWJDF8PSLFSʹΑΔΩϟογϡ ίϯςϯπ )5.-$44+4 Ωϟογϡ 8FCϖʔδ Precache Runtime Cache Ωϟογϡ w

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

    8FCΞϓϦͷΦϑϥΠϯԽʹඞཁͳॲཧͷఏڙ w 8PSLCPY w TXQSFDBDIFTXUPPMTΛΑΓ࢖͍΍͘͢ߴػೳʹ
  6. 4FSWJDF8PSLFSͷੜ੒ w XPSLCPYDMJ w XPSLCPYίϚϯυ w XPSLCPYCVJME w /PEFKTHVMQ͔Βར༻ w

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

    XPSLCPYXFCQBDLQMVHJO w XFCQBDLϓϥάΠϯ w XBUDIɺ8FCQBDL%FW4FSWFSରԠ
  8. 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' }) ] }