website-theme/static/serviceworker.js

let version = 'v1::';
let cacheName = 'website';
let offlinePage = '/offline';
let offlineFundamentals = [offlinePage, '/'];
let maxItems = 100;

self.addEventListener('install', function (event) {
	// Cache offline fundamentals
	event.waitUntil(caches.open(version + cacheName).then(function (cache) {
        return cache.addAll(offlineFundamentals);
	}));
});

function trimCache(name, maxItems) {
    caches.open(name).then(function(cache) {
      cache.keys().then(function(keys) {
        if (keys.length > maxItems) {
          cache.delete(keys[0]).then(trimCache(name, maxItems));
        }
      });
    });
}

// Listens for trimCache command which occurs on page load
self.addEventListener('message', event => {
    if (event.data.command == 'trimCache') {
      trimCache(version + cacheName, maxItems);
    }
  });


// If the version changes, invalidate the cache
self.addEventListener('activate', function (event) {
    event.waitUntil(
        caches.keys()
            .then(function (keys) {
                // Remove caches whose name is no longer valid
                return Promise.all(keys
                    .filter(function (key) {
                      return key.indexOf(version) !== 0;
                    })
                    .map(function (key) {
                      return caches.delete(key);
                    })
                );
            })
    );
});

// Listen for request events
self.addEventListener('fetch', function (event) {
	let request = event.request;

    // Always fetch non-GET requests from the network
    if (request.method !== 'GET') {
        event.respondWith(
            fetch(request)
                .catch(function () {
                    return caches.match(offlinePage);
                })
        );
        return;
    }

    let isRequestType = function(name) { return request.headers.get('Accept').includes(name); }

	// Network-first Approach
	event.respondWith(
        // Attepmt to grab the latest copy from the network
		fetch(request).then(function (response) {
			// If successful, create a copy of the response
            // and save it to the cache
			let cacheCopy = response.clone();
			event.waitUntil(caches.open(version + cacheName).then(function (cache) {
				return cache.put(request, cacheCopy);
			}));
			return response;

		}).catch(function (error) {
            // Otherwise, check the cache.
            return caches.match(request).then(function (response) {
                // Show offline page if cache misses for HTML pages.
                if (isRequestType('text/html')) {
                    return response || caches.match(offlinePage);
                }
                return response;
                
            });
		})
	);
});