$mol_offline refactor, disable cache on page reload via dev server

build/client/client.js

@@ -10,6 +10,7 @@ function $mol_build_client() {
 
 	socket.onmessage = message => {
 		if( message.data !== '$mol_build_obsolete' ) return
+		postMessage('mol_build_obsolete')
 		location.reload()
 	}
 

offline/install/install.ts

@@ -1,6 +1,6 @@
 namespace $ {
 	try {
-		$mol_offline()
+		new $mol_offline().run()
 	} catch( error ) {
 		console.error( error )
 	}

offline/offline.ts

@@ -1,5 +1,9 @@
 namespace $ {
 
-	export function $mol_offline( ) {}
+	export class $mol_offline {
+		run() {
+			return false
+		}
+	}
 
 }

offline/offline.web.ts

@@ -1,109 +1,188 @@
+/// <reference lib="webworker" />
+
 namespace $ {
-
-	const blacklist = new Set([
-		'//cse.google.com/adsense/search/async-ads.js'
-	])
-
-	/** Installs service worker proxy, which caches all requests and respond from cache on http errors. */
-	export function $mol_offline_web() {
-
-		if( typeof window === 'undefined' ) {
+	export class $mol_offline_web extends $mol_offline {
+		web_js() { return 'web.js' }
+
+		blacklist = new Set([
+			'//cse.google.com/adsense/search/async-ads.js'
+		])
+
+		in_worker() { return typeof window === 'undefined' }
+
+		is_supported() {
+			if( location.protocol !== 'https:' && location.hostname !== 'localhost' ) {
+				console.warn( 'HTTPS or localhost is required for service workers.' )
+				return false
+			}
 
-			self.addEventListener( 'install' , ( event : any )=> {
-				;( self as any ).skipWaiting()
-			} )
-
-			self.addEventListener( 'activate' , ( event : any )=> {
-
-				// caches.delete( '$mol_offline' )
-
-				;( self as any ).clients.claim()
-
-				$$.$mol_log3_done({
-					place: '$mol_offline',
-					message: 'Activated',
-				})
-
-			} )
-
-			self.addEventListener( 'fetch' , ( event : any )=> {
-
-				const request = event.request as Request
-
-				if( blacklist.has( request.url.replace( /^https?:/, '' ) ) ) {
-					return event.respondWith(
-						new Response(
-							null,
-							{
-								status: 418,
-								statusText: 'Blocked'
-							},
-						)
-					)
-				}
-
-				if( request.method !== 'GET' ) return
-				if( !/^https?:/.test( request.url ) ) return
-				if( /\?/.test( request.url ) ) return
-				if( request.cache === 'no-store' ) return
-
-				const fetch_data = () => fetch( request ).then( response => {
-					if (response.status !== 200) return response
-					event.waitUntil(
-						caches.open( '$mol_offline' ).then(
-							cache => cache.put( request , response )
-						)
-					)
-
-					return response.clone()
-				} )
-
-				const fresh = request.cache === 'force-cache' ? null : fetch_data()
-
-				if (fresh) event.waitUntil( fresh )
-
-				event.respondWith(
-					caches.match( request ).then(
-						cached => request.cache === 'no-cache' || request.cache === 'reload'
-							? ( cached
-								? fresh!
-									.then(actual => {
-										if (actual.status === cached.status) return actual
-										throw new Error(
-											`${actual.status}${actual.statusText ? ` ${actual.statusText}` : ''}`,
-											{ cause: actual }
-										)
-									})
-									.catch((err: Error) => {
-										const cloned = cached.clone()
-										const message = `${err.cause instanceof Response ? '' : '500 '}${err.message} $mol_offline fallback to cache`
-										cloned.headers.set( '$mol_offline_remote_status', message )
-										return cloned
-									})
-								: fresh
-							)
-							: ( cached || fresh || fetch_data() )
+			if( ! navigator.serviceWorker ) {
+				console.warn( 'Service Worker is not supported.' )
+				return false
+			}
+
+			return true
+		}
+
+		protected _registration = null as null | Promise<ServiceWorkerRegistration>
+
+		registration() {
+			if (this._registration) return this._registration
+			if ( this.in_worker() ) return null
+			if ( ! this.is_supported() ) return null
+
+			window.addEventListener('message', this.window_message.bind(this))
+
+			navigator.serviceWorker.register(this.web_js())
+
+			return this._registration = navigator.serviceWorker.ready
+		}
+
+		window_message(e: MessageEvent) {
+			if (e.data === 'mol_build_obsolete') return this.send(e.data)
+		}
+
+		async send(data: unknown) {
+			try {
+				const reg = await this.registration()
+				reg?.active?.postMessage(data)
+			} catch (e) {
+				console.error(e)
+			}
+		}
+
+		override run() {
+			if (! this.registration()) {
+				this.worker()
+				return false
+			}
+
+			// const reg = await this.registration()
+			// reg?.addEventListener( 'updatefound', ()=> {
+			// 	const worker = reg.installing!
+			// 	worker.addEventListener( 'statechange', ()=> {
+			// 		if( worker.state !== 'activated' ) return
+			// 		window.location.reload()
+			// 	} )
+			// } )
+
+			return true
+		}
+
+		_worker = null as null | ServiceWorkerGlobalScope
+
+		worker() {
+			if (this._worker) return this._worker
+			const worker = this._worker = self as unknown as ServiceWorkerGlobalScope
+			// as unknown as NonNullable<typeof this['_worker']>
+			worker.addEventListener( 'beforeinstallprompt' , this.beforeinstallprompt.bind(this) )
+			worker.addEventListener( 'install' , this.install.bind(this))
+			worker.addEventListener( 'activate' , this.activate.bind(this))
+			worker.addEventListener( 'message', this.message.bind(this))
+			worker.addEventListener( 'fetch',  this.fetch_event.bind(this))
+
+			return worker
+		}
+
+		message(event: ExtendableMessageEvent) {
+			if (event.data === 'mol_build_obsolete') this.ignore_cache = true
+		}
+
+		beforeinstallprompt(event: Event & { prompt?(): void }) {
+			event.prompt?.()
+		}
+
+		install(event: ExtendableEvent) { this.worker().skipWaiting() }
+
+		activate(event: ExtendableEvent) {
+			// caches.delete( '$mol_offline' )
+
+			this.worker().clients.claim()
+
+			$$.$mol_log3_done({
+				place: '$mol_offline',
+				message: 'Activated',
+			})
+		}
+
+		protected ignore_cache = false
+
+		fetch_event(event: FetchEvent) {
+			const request = event.request
+
+			if( this.blacklist.has( request.url.replace( /^https?:/, '' ) ) ) {
+				return event.respondWith(
+					new Response(
+						null,
+						{
+							status: 418,
+							statusText: 'Blocked'
+						},
 					)
 				)
-
-			})
+			}
+
+			if( request.method !== 'GET' ) return
+			if( !/^https?:/.test( request.url ) ) return
+			if( /\?/.test( request.url ) ) return
+			if( request.cache === 'no-store' ) return
+
+			const response = this.respond(event)
+			event.waitUntil( response )
+			event.respondWith( response )
+		}
+
+		async respond(event: FetchEvent) {
+			const request = event.request
+			let cached
+			try {
+				cached = await caches.match( request )
+			} catch (e) {
+				console.error(e)
+			}
+
+			if ( ! cached) return this.fetch_and_cache(event)
+
+			if (request.cache === 'force-cache') return cached
+
+			if (this.ignore_cache || request.cache === 'no-cache' || request.cache === 'reload') {
+				// fetch with fallback to cache if statuses not match
+				try {
+					const actual = await this.fetch_and_cache(event)
+					if (actual.status === cached.status) return actual
+
+					throw new Error(
+						`${actual.status}${actual.statusText ? ` ${actual.statusText}` : ''}`,
+						{ cause: actual }
+					)
+
+				} catch (err) {
+					const message = `${(err as Error).cause instanceof Response ? '' : '500 '}${
+						(err as Error).message} $mol_offline fallback to cache`
+
+					const cloned = cached.clone()
+					cloned.headers.set( '$mol_offline_remote_status', message )
+
+					return cloned
+				}
+			}
+
+			return cached
+		}
+
+		async put_cache(request: Request, response: Response) {
+			const cache = await caches.open( '$mol_offline' )
+			return cache.put( request , response )
+		}
+
+		async fetch_and_cache(event: FetchEvent) {
+			const request = event.request
+			const response = await fetch( request )
+			if (response.status === 200) {
+				event.waitUntil(this.put_cache(request, response.clone()))
+			}
 
-			self.addEventListener( 'beforeinstallprompt' , ( event : any )=> event.prompt() )
-
-		} else if( location.protocol !== 'https:' && location.hostname !== 'localhost' ) {
-			console.warn( 'HTTPS or localhost is required for service workers.' )
-		} else if( !navigator.serviceWorker ) {
-			console.warn( 'Service Worker is not supported.' )
-		} else {
-			navigator.serviceWorker.register( 'web.js' ).then( reg => {
-				// reg.addEventListener( 'updatefound', ()=> {
-				// 	const worker = reg.installing!
-				// 	worker.addEventListener( 'statechange', ()=> {
-				// 		if( worker.state !== 'activated' ) return
-				// 		window.location.reload()
-				// 	} )
-				// } )
-			} )
+			return response
 		}
 
 	}