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

Transcript

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͸͍͍ͧ