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

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

1. ΦϑϥΠϯ8FCΞϓϦͷ࢓૊Έ ͓ͷ͏͑
   *POJD
   .FFUVQ
   /BHPZB
   
   ೥݄೔ ͜ͷεϥΠυͷ63-
   IUUQCJUMZ*4Z1
2. ࣗݾ঺հ w ඌ্
   ༸հ
   :PTVLF
   0OPVF
   w ೔ຊେֶ
   จཧֶ෦
   ৘ใՊֶՊ
   ॿڭ
   
   w ՄࢹԽɺ࠷దԽɺΞϧΰϦζϜͷݚڀ
   w *POJDΞϯν
   w ϚΠϒʔϜ
   w -JHIUIPVTFͰຬ఺Λ໨ࢦ͢
3. 8FCαΠτ͸
 ωοτ͕ͳͯ͘΋
 ݟΕΔ࣌୅΁
4. ΦϑϥΠϯ8FCΞϓϦ w ωοτ͕஗͍ɺෆ௨ͳ৔ॴͰ΋࢖͑Δ8FCΞϓϦ΁
   w ஍Լɺτϯωϧͷதɺաૄ஍ɺൃల్্ࠃɺӉ஦ɺʜ
   w 1SPHSFTTJWF
   8FC
   "QQT
   18" ͷཁ݅ͷҰͭ
   w 18"
   $IFDLMJTU
 IUUQTEFWFMPQFSTHPPHMFDPNXFCQSPHSFTTJWFXFCBQQTDIFDLMJTU
   w -JHIUIPVTF
 IUUQTDISPNFHPPHMFDPNXFCTUPSFEFUBJMMJHIUIPVTFCMJQNEDPOMLQJOFGFIONKBNNGKQNQCKL
   w ࡞ͬͨ
   w IUUQTFHSJEKQ
5. ΦϑϥΠϯ8FCΞϓϦΛࢧ͑Δٕज़ w ϒϥ΢βετϨʔδ
   w 8FC
   4UPSBHF
   TFTTJPO4UPSBHF
   
   MPDBM4UPSBHF
   w *OEFYFE%#
   w ΦϑϥΠϯΩϟογϡ
   w 4FSWJDF
   8PSLFS
   
   $BDIF
   "1*
   w ͦͷଞ
   w /BWJHBUPS0O-JOF
   w #BDLHSPVOE4ZOD
6. ΦϑϥΠϯ8FCΞϓϦΛࢧ͑Δٕज़ w ϒϥ΢βετϨʔδ
   w 8FC
   4UPSBHF
   TFTTJPO4UPSBHF
   
   MPDBM4UPSBHF
   w *OEFYFE%#
   w ΦϑϥΠϯΩϟογϡ
   w 4FSWJDF
   8PSLFS
   
   $BDIF
   "1*
   w ͦͷଞ
   w /BWJHBUPS0O-JOF
   w #BDLHSPVOE4ZOD
7. "QQ
   4IFMMΞʔΩςΫνϟ΁ͷస׵ 8FCϖʔδ
 )5.-$44+4 αʔόʔαΠυ ΫϥΠΞϯταΠυ %# ίϯςϯπ )5.-$44+4 Ωϟογϡ ैདྷͷ8FCΞϓϦ "QQ
   4IFMM 5FNQMBUF 8FCϖʔδ Precache Runtime Cache
8. 4FSWJDF
   8PSLFS w ωοτϫʔΫϦΫΤετͷϑοΫॲཧ
   w ΦϑϥΠϯΩϟογϡ
   w 1SFDBDIF
   
   3VOUJNF
   $BDIF
   w ϓογϡ௨஌
   w #BDLHSPVOE4ZOD
   w ʜ
9. 4FSWJDF
   8PSLFSʹΑΔΩϟογϡ ίϯςϯπ )5.-$44+4 Ωϟογϡ 8FCϖʔδ Precache Runtime Cache Ωϟογϡ w 1SFDBDIF
   w 8FCΞϓϦʹඞཁͳϑΝΠϧΛ
 4FSWJDF
   8PSLFSొ࿥࣌ʹΩϟογϡ
   w 3VOUJNF
   $BDIF
   w ίϯςϯπɺը૾౳ΛඞཁʹԠͯ͡Ωϟογϡ
10. 4FSWJDF
    8PSLFSΛॻ͘ w ੜ
    w :PVS
    'JSTU
    1SPHSFTTJWF
    8FC
    "QQ
 IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTDPEFMBCTZPVSpSTUQXBQQ
    w TXQSFBDBDIF
    
    TXUPPMT
    w 8FCΞϓϦͷΦϑϥΠϯԽʹඞཁͳॲཧͷఏڙ
    w 8PSLCPY
    w TXQSFDBDIF
    
    TXUPPMTΛΑΓ࢖͍΍͘͢ߴػೳʹ
11. 8PSLCPY IUUQTEFWFMPQFSTHPPHMFDPNXFCUPPMTXPSLCPY
12. 4FSWJDF
    8PSLFSͷੜ੒ w XPSLCPYDMJ
    w XPSLCPY
    ίϚϯυ
    w XPSLCPYCVJME
    w /PEFKT
    
    HVMQ
    ͔Βར༻
    w XPSLCPYXFCQBDLQMVHJO
    w XFCQBDLϓϥάΠϯ
    w XBUDIɺ8FCQBDL%FW4FSWFSରԠ
13. 4FSWJDF
    8PSLFSͷੜ੒ w XPSLCPYDMJ
    w XPSLCPY
    ίϚϯυ
    w XPSLCPYCVJME
    w /PEFKT
    
    HVMQ
    ͔Βར༻
    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. 4FSWJDF
    8PSLFSͷొ࿥ if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') .then((registration) => { }).catch(() => { }) }
16. ·ͱΊ w 8FCΞϓϦ͸ΦϑϥΠϯͰ΋ಈ࣌͘୅
    w ͜Ε·Ͱͷ8FCͷৗࣝɺΞϓϦͷৗࣝΛݟ௚ͦ͏
    w *POJD͚͕ͩ18"ͷબ୒ࢶͰ͸ͳ͍
    w 8PSLCPY͸͍͍ͧ