This service worker basicly pre caches the whole app if it has connection to the backend, with every reload, it requests and stores a fresh index.html into cache. This way if the user has connection, code linked to the html document could be updated and cached just by changing the file names of the linked code. If the file names are the same fro…

sw.js

let cacheObject = {
    name: '1',
    precache: [
        './html/index.html',
        './css/index.css',
        './js/index.js',
        './',
        './robots.txt',
        './manifest.webmanifest',
        './favicon.ico',
        './img/icons/icon-128x128.png',
        './img/icons/icon-144x144.png',
        './img/icons/icon-152x152.png',
        './img/icons/icon-192x192.png',
        './img/icons/icon-384x384.png',
        './img/icons/icon-512x512.png',
        './img/icons/icon-72x72.png',
        './img/icons/icon-96x96.png'
    ]
}

this.addEventListener('install', event => {
    console.log(`install event: ${JSON.stringify(event,null,2)}`)
    self.skipWaiting()
    event.waitUntil(
        caches.open(cacheObject.name).then(cache => {
            return cache.addAll(cacheObject.precache)
        })
    )
})

this.addEventListener('fetch', event => {
    console.log(`fetch event request url: ${event.request.url}`)
    event.respondWith(
        caches.match(event.request).then(cacheResponse => {
            if (event.request.url.indexOf('.html') !== -1 || event.request.url === 'https://www.example.com/') {
                return fetch(event.request.url).then(response => {
                    return caches.open(cacheObject.name).then(cache => {
                        cache.put(event.request, response.clone()).catch(error => {
                            console.log('Could not add to cache!' + error)
                        })
                        return response
                    }).catch(error => {
                        console.log('Could not open cache!' + error)
                    })
                }).catch(error => {
                    if (cacheResponse !== undefined) {
                        return cacheResponse
                    } else {
                        console.log('Resource not found!' + error)
                        // return with must connect to internet reponse to init client
                    }
                })
            } else {
                return cacheResponse || fetch(event.request).then(response => {
                    return caches.open(cacheObject.name).then(cache => {
                        cache.put(event.request, response.clone()).catch(error => {
                            console.log('Could not add to cache!' + error)
                        })
                        return response
                    }).catch(error => {
                        console.log('Could not open cache!' + error)
                    })
                }).catch(error => {
                    console.log('Resource not found!' + error)
                })
            }
        }).catch(error => {
            console.log('Resource not found in the cache!' + error)
        })
    )
})

self.addEventListener('activate', event => {
    console.log(`activate event: ${JSON.stringify(event,null,2)}`)
    event.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames.map(cacheName => {
                    if (cacheObject.name !== cacheName) {
                        console.log('Deleting out of date cache:', cacheName)
                        return caches.delete(cacheName)
                    }
                })
            )
        })
    )
})