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

fail/catch/catch.ts

@@ -2,7 +2,7 @@ namespace $ {
 
 	const catched = new WeakMap< any , boolean >()
 
-	export function $mol_fail_catch( error: unknown ) {
+	export function $mol_fail_catch( error: unknown ): error is Error {
 
 		if( typeof error !== 'object' ) return false
 		if( $mol_promise_like( error ) ) $mol_fail_hidden( error )

fetch/fetch.ts

@@ -6,6 +6,11 @@ namespace $ {
 			super()
 		}
 
+		@ $mol_action
+		clone() {
+			return new this.$.$mol_fetch_response(new Response(this.native.body, this.native))
+		}
+
 		status() {
 			const types = [ 'unknown', 'inform', 'success', 'redirect', 'wrong', 'failed' ] as const
 			return types[ Math.floor( this.native.status / 100 ) ]
@@ -75,6 +80,10 @@ namespace $ {
 		}
 
 	}
+	export function $mol_fetch_request_clone(this: typeof $, original: Request, options?: RequestInit) {
+		return new Request(original, options)
+	}
+	$.$mol_fetch_request_clone = $mol_wire_sync($).$mol_fetch_request_clone
 
 	export class $mol_fetch extends $mol_object2 {
 

notify/notify.ts

@@ -0,0 +1,39 @@
+namespace $ {
+
+	export type $mol_notify_info = {
+		context: string,
+		message: string,
+		uri: string
+	}
+
+	export class $mol_notify extends $mol_object {
+
+		@ $mol_mem
+		static allowed( next?: boolean ) {
+			return false
+		}
+
+		static show( info: $mol_notify_info ) {
+			this.$.$mol_service_worker.send(info)
+		}
+
+	}
+
+	export class $mol_notify_service extends $mol_service_plugin_notify {
+		static override data(data: {}) {
+			if ('uri' in data && 'message' in data) {
+				this.show(data as $mol_notify_info)
+				return true
+			}
+			return null
+		}
+
+		static show(info: $mol_notify_info) {}
+
+	}
+
+	export namespace $mol_service_plugin {
+		export let $mol_notify_service = $.$mol_notify_service
+	}
+
+}

notify/notify.web.ts

@@ -1,12 +1,13 @@
 namespace $ {
 
 	/** Manages system notifications. Notifications of same context are auto joined to one notification. */
-	export class $mol_notify {
+	export class $mol_notify_web extends $mol_notify {
 
 		@ $mol_mem
-		static allowed( next?: boolean ) {
+		static override allowed( next?: boolean ) {
 
-			let perm = Notification.permission
+
+			let perm = this.$.$mol_dom_context.Notification.permission
 			if( next === undefined ) return perm === 'granted'
 
 			if( perm === 'granted' ) return true
@@ -16,33 +17,23 @@ namespace $ {
 			return perm === 'granted'
 		}
 
-		static async request_permissions() {
+		static request_permissions() {
 			return new Promise< NotificationPermission >( done =>
-				Notification.requestPermission( perm => {
+				this.$.$mol_dom_context.Notification.requestPermission( perm => {
 					done( perm )
 				} )
 			)
 		}
 
-		@ $mol_action
-		static show( info: {
-			context: string,
-			message: string,
-			uri: string
-		} ) {
-			navigator.serviceWorker.controller!.postMessage( info )
-		}
-
 	}
-	
-	if( typeof window === 'undefined' ) {
-		
-		self.addEventListener( 'message', async event => {
-			
-			let { context: title, message: body, uri: data } = event.data
+
+	$.$mol_notify = $mol_notify_web
+
+	export class $mol_notify_service_web extends $mol_notify_service {
+		static override show({ context: title, message: body, uri: data }: $mol_notify_info) {
+			const registration = this.$.$mol_service_worker_web.registration().native()
 			const tag = data
-
-			const existen = await $mol_service().getNotifications({ tag })
+			const existen = registration.getNotifications({ tag })
 
 			for( const not of existen ) {
 
@@ -54,29 +45,27 @@ namespace $ {
 
 			// const vibrate = [ 100, 200, 300, 400, 500 ]
 
-			await $mol_service().showNotification( title, { body, data, /*vibrate,*/ tag } )
-
-		} )
-
-		self.addEventListener( 'notificationclick', $mol_service_handler( async ( event: any )=> {
-
-			const clients: any[] = await ( self as any ).clients.matchAll({ includeUncontrolled: true })
-			event.notification.close()
+			registration.showNotification( title, { body, data, /*vibrate,*/ tag } )
 
-			if( clients.length ) {
-
-				const last = clients[ clients.length - 1 ]
-				await last.focus()
-				await last.navigate( event.notification.data )
-
-			} else {
-
-				await ( self as any ).clients.openWindow( event.notification.data )
-
+		}
+
+		static override notification( notification: Notification ) {
+			const matched = this.$.$mol_service_worker_web.clients_grab({ includeUncontrolled: true, type: 'window' })
+			const last = matched.at(-1)
+
+			if( last ) {
+				last.focus()
+				last.navigate( notification.data )
+
+				return null
 			}
-
-		} ) )
-
+
+			this.$.$mol_service_worker_web.window_open( notification.data )
+			return null
+		}
 	}
-
+
+	$.$mol_notify_service = $mol_notify_service_web
+
+	$mol_service_plugin.$mol_notify_service = $mol_notify_service_web
 }

offline/install/install.ts

@@ -1,7 +1,3 @@
 namespace $ {
-	try {
-		$mol_offline()
-	} catch( error ) {
-		console.error( error )
-	}
+	$mol_offline
 }

offline/offline.ts

@@ -1,5 +1,69 @@
 namespace $ {
 
-	export function $mol_offline( ) {}
+	export class $mol_offline extends $mol_service_plugin_cache {
+		static blocked_urls =  [
+			'//cse.google.com/adsense/search/async-ads.js'
+		]
 
+		static override blocked( request: Request ) {
+			const normalized_url = request.url.replace( /^https?:/, '' )
+
+			return this.blocked_urls.includes(normalized_url)
+		}
+
+		static override activate() {
+			this.$.$mol_service_worker.claim()
+		}
+
+		static override need_modify(request: Request) {
+			if( request.method !== 'GET' ) return false
+			if( !/^https?:/.test( request.url ) ) return false
+			if( /\?/.test( request.url ) ) return false
+			if( request.cache === 'no-store' ) return false
+
+			return true
+		}
+
+		static override modify(request: Request) {
+			let fallback_header
+
+			const html = request.mode === 'navigate'
+			const cache = request.cache
+
+			if (cache === 'reload' || ( cache === 'no-cache' && ! html ) ) {
+				if (cache === 'reload') {
+					// F5 + Disable cache
+					request = new ($mol_wire_sync(Request))(request, { cache: 'no-cache' })
+				}
+
+				// fetch with fallback to cache if statuses not match
+				try {
+					const actual = this.$.$mol_fetch.response(request)
+					if (actual.code() < 400) return actual.native
+
+					fallback_header = actual.message()
+				} catch (err) {
+					if ( $mol_promise_like(err) ) $mol_fail_hidden(err)
+					fallback_header = (err as Error).message || 'Fetch error'
+				}
+			}
+
+			if (cache !== 'force-cache') {
+				request = new ($mol_wire_sync(Request))(request, { cache: 'force-cache' })
+			}
+
+			const cached = this.$.$mol_fetch.response(request)
+
+			if (! fallback_header ) return cached.native
+
+			const clone = cached.clone()
+			clone.headers().set( '$mol_offline_remote_status', `${fallback_header} $mol_offline fallback to cache`)
+
+			return clone.native
+		}
+	}
+
+	export namespace $mol_service_plugin {
+		export let $mol_offline = $.$mol_offline
+	}
 }