Using a service worker with streamed partial HTML contents

const cacheName = "v1";
const requiredFilesPaths = [
	"partials/_header.html",
	"partials/_footer.html",
	"partials/_offline.html"
];

/**
 * Handle the service worker's `install` event. Caches required files.
 * @param {ExtendableEvent} installEvent 
 */
async function onInstall( installEvent ) {
	try {
		const cache = await caches.open( cacheName );
		installEvent.waitUntil( cache.addAll( requiredFilesPaths ) );
	} catch { }
}

self.addEventListener( "install", onInstall );

( 
/**
 * Register the service worker.
 * @param {Navigator} navigator 
 * @param {String}	serviceWorkerLabel 
 * @param {Object}	console 
 */
function registerServiceWorker( navigator, serviceWorkerLabel, console ) {
		
	if ( 
		   !( serviceWorkerLabel in navigator ) 
		|| !( navigator[ serviceWorkerLabel ] instanceof ServiceWorkerContainer )
		|| ( typeof navigator[ serviceWorkerLabel ].register !== "function" )
	) { 
		console.info( "Service worker cannot be registered" );
		return; 
	}

	/**
	 * Handle the service worker's registration.
	 * @param {ServiceWorkerRegistration} registration
	 */
	function afterServiceWorkerRegisters( registration ) { 
		console.log( "Service worker registered with scope " + registration.scope ); 
	}

	/**
	 * Handle an error in the service worker's registration.
	 * @param {TypeError} error 
	 */
	function catchServiceWorkerRegisterError( error ) {
		console.warn( "Error registering service worker:" );
		console.warn( error.message );
	}

	navigator[ serviceWorkerLabel ].register( "./sw.js" )
		.then( afterServiceWorkerRegisters )
		.catch( catchServiceWorkerRegisterError )
	;

} 

)( navigator, "serviceWorker", console );

/** An enumeration of ways of relaying requests */
const RelayType = Object.freeze( {
	"PassThrough": 1,
	"PrioritiseNetwork": 2,
	"PrioritiseCache": 4,
	"Compose": 8
} );

const RelayTypeValues = Object.values( RelayType );
/**
 * Determine if `relayType` is valid and has been used to create `flags`.
 * @param   {Number}  relayType A `RelayType` value.
 * @param   {Number}  [flags=0] An OR result of several `RelayType` values.
 * @returns {Boolean}		   True if `relayType` is valid and has been used
 *							  to create `flags`.
 */
function isRelayTypeFlagged( relayType, flags = 0 ) { 
	return (
		   ( RelayTypeValues.indexOf( relayType ) > -1 )
		&& ( ( relayType & flags ) == relayType )
	);
}

/** Looks for '/partials/', ending with '.html' */
const isHTMLInPartialsPathRE = new RegExp( /\/partials\/.*\.html$/, "i" );
/** Starts with the SW scope and ends with '.html' */
const isHTMLInScopeRE = new RegExp( 
	"^" + self.registration.scope.replace( "/", "\\/" ) + ".*\\.html$", 
	"i" 
);

/**
 * Get a `URL` object from `request`'s URL string.
 * @param   {Request} request
 * @returns {URL}
 */
function getRequestURL( request ) {
	const requestURLString = request.url.endsWith( "/" )
		? request.url + "index.html"
		: request.url
	;
	const requestURL = new URL( requestURLString );
	return requestURL;
}

/**
 * Determine how a request should be handled.
 * @param   {Request} request 
 * @returns {Number}		  A `RelayType` value.
 */
function getRelayType( request ) {

	const destination = request.destination;
	if (
		   ( destination === "style" )
		|| ( destination === "script" )
		|| ( destination === "manifest" )
	) {
		return RelayType.PrioritiseCache;
	}

	const requestURL = getRequestURL( request );
	const requestURLBareString = requestURL.origin + requestURL.pathname;

	if ( isHTMLInPartialsPathRE.test( requestURLBareString ) ) {
		return RelayType.PrioritiseNetwork;
	}

	if (
		   ( request.mode === "navigate" )
		&& ( isHTMLInScopeRE.test( requestURLBareString ) )
	) {
		return RelayType.Compose;
	}

	return RelayType.PassThrough;
	
}

/**
 * Fetch `request`'s response from the network and put it in the cache before
 * returning it.
 * @param   {Request}   request 
 * @returns {Response?}
 */
async function fetchAndCache( request ) {
	if ( !navigator.onLine ) { return; }
	try {
		const response = await fetch( request );
		const cache = await caches.open( cacheName );
		await cache.put( request, response.clone() );
		return response;
	} catch {}
}

/**
 * Try to fetch the requested resource from the network and store it in the
 * cache. If unavailable, fall back to the cached response.
 * @param   {Request}   request 
 * @returns {Response?}
 */
async function fetchResponseAndCacheOrFallback( request ) {
	let response = await fetchAndCache( request );
	if ( response ) { return response; };
	const cache = await caches.open( cacheName );
	response = await cache.match( request );
	return response; 
}

/**
 * Look for a cached response to `request`. When offline, return the result from 
 * querying the cache. When connected, if the resource was not found in the
 * cache, try to fetch it from the network, store it, and return it. Otherwise,
 * return the response after asynchronously calling for an update of the cached 
 * resource.
 * @param   {Request}   request 
 * @returns {Response?}
 */
async function getResponseFromCacheAndUpdate( request ) {
	const cache = await caches.open( cacheName );
	let response = await cache.match( request );
	if ( !navigator.onLine ) { return response; }
	if ( !response ) { 
		response = await fetchAndCache( request ); 
		return response;
	}
	fetchAndCache( request );
	return response;
}

/**
 * Get the URL of a document's partial content.
 * @param   {Request} request
 * @returns {URL}
 */
function getPartialURL( request ) {
	const requestURL = getRequestURL( request );
	const partialURL = new URL( requestURL.href.replace( 
		/(\/[^\/]*\.html)/, 
		"/partials$1"
	) );
	return partialURL;
}

/**
 * Handle the service worker's `fetch` event.
 * @param   {FetchEvent} fetchEvent 
 */
function onFetch( fetchEvent ) {

	const request = fetchEvent.request;
	const relayType = getRelayType( request );

	if ( relayType === RelayType.PassThrough ) { return; }

	if ( relayType === RelayType.PrioritiseNetwork ) {
		fetchEvent.respondWith( fetchResponseAndCacheOrFallback( request ) );
		return;
	}

	if ( relayType === RelayType.PrioritiseCache ) {
		fetchEvent.respondWith( getResponseFromCacheAndUpdate( request ) );
		return;
	}

	if ( relayType === RelayType.Compose ) {
		fetchEvent.respondWith( composeResponseFromPartials( request ) );
		return;
	}

};

self.addEventListener( "fetch", onFetch );

document.title = document.querySelector( "main h1" ).innerText;

( 
/**
 * This code's only use is to conform to Lighthouse's SEO metric criteria.
 */
function( document, querySelectorFn, metaSelector ) {
	const head = document[ querySelectorFn ]( "head" );
	const meta = document[ querySelectorFn ]( metaSelector );
	if ( head[ querySelectorFn ]( metaSelector ) || !meta ) { return; }
	head.appendChild( meta );
} )( document, "querySelector", "meta[name=description]" );