Service Worker Template Example

sw.js

const CACHE_VERSION = 'cache-v1' // increment this when you update the web site
const filesToCache = [
    "./index.html",
    "./path/an/image.png",
    // add more static assets to cache
]


self.addEventListener(
    'install',
    function (event) {

        // start caching assets
        console.log('Installing service worker...')
        event.waitUntil(
            // open a new cache space
            caches.open(CACHE_VERSION)
                .then(function (cache) {
                    return cache.addAll(filesToCache)
                })
        )

    })


self.addEventListener(
    'activate',
    async function (event) {
        event.waitUntil(
            // delete any other cache which is not the current version
            self.caches.keys().then(function (cacheKeys) {
                cacheKeys.forEach(function (cacheKey) {
                    if (cacheKey != CACHE_VERSION) {
                        self.caches.delete(cacheKey)
                    }
                })
                return true
            })
        )
    }
)


self.addEventListener(
    'fetch',
    function (event) {
        event.respondWith(
            // check cache for a response
            caches.match(event.request)
                .then(async function (cachedResponse) {

                    // try to serve with cache first
                    if (cachedResponse) {
                        return cachedResponse
                    }
                    // else try to serve from network
                    try {
                        let freshResponse = await fetch(event.request)
                        if (freshResponse) {
                            return freshResponse
                        }
                    }
                    // show offline page if server is not reachable
                    catch (error) {

                        var offlinePageResponse = new Response(
                            '',
                            {
                                status: 302,
                                statusText: 'Found',
                                headers: {
                                    Location: '/offline.html'
                                }
                            }
                        )
                        return offlinePageResponse
                        
                    }
                })
        )
    }
)


console.log('Service Worker loaded!')