offline.web.ts

/// <reference lib="webworker" />

namespace $ {
	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
			}
			
			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()))
			}

			return response
		}

	}

	$.$mol_offline = $mol_offline_web

}