@webqit/webflo 1.0.19 → 1.0.20

package/src/runtime-pi/client/Workport.js

@@ -1,118 +1,91 @@
-export class Workport {
+import { _isObject } from '@webqit/util/js/index.js';
+import { WebfloMessagingAPI } from '../WebfloMessagingAPI.js';
+import { WebfloMessageEvent } from '../WebfloMessageEvent.js';
 
-    #swFile;
-    #swParams = {};
+export class Workport extends WebfloMessagingAPI {
 
-    #swReady;
-    get swReady() { return this.#swReady; }
-    #swRegistration;
+    #registration;
+    get registration() { return this.#registration; }
 
-    async registerServiceWorker(file, params = {}) {
-        if (this.#swRegistration) {
-            throw new Error('Service worker already registered');
-        }
-        this.#swFile = file;
-        this.#swParams = params;
-        this.#swReady = navigator.serviceWorker ? navigator.serviceWorker.ready : new Promise(() => {});
-        this.#swRegistration = await navigator.serviceWorker.register(this.#swFile, { scope: this.#swParams.scope || '/' });
+    #params;
+    get params() { return this.#params; }
+
+    #ready;
+    get ready() { return this.#ready; }
+
+    #active;
+    get active() { return this.#active; }
+
+    static async initialize(parentNode, file, params = {}) {
+        const registration = (await navigator.serviceWorker.getRegistration())
+            || (await navigator.serviceWorker.register(file, { scope: '/', ...params }));
+        return new this(parentNode, registration, params);
+    }
+
+    #messageHandler;
+    constructor(parentNode, registration, params = {}) {
+        super(parentNode, params);
+        this.#registration = registration;
+        this.#params = params;
+        this.#ready = navigator.serviceWorker ? navigator.serviceWorker.ready : new Promise(() => {});
         // Helper that updates instance's state
         const stateChange = (target) => {
             // target.state can be any of: "parsed", "installing", "installed", "activating", "activated", "redundant"
             if (target.state === 'redundant') {
-                //this.remove(target);
             } else if (target.state === 'activated') {
-                //this.add(target);
+                const existing = this.#active;
+                this.#active = target;
+                if (!existing) {
+                    this.$emit('connected');
+                }
             }
         }
         // We're always installing at first for a new service worker.
         // An existing service would immediately be active
-        const worker = this.#swRegistration.active || this.#swRegistration.waiting || this.#swRegistration.installing;
-        if (worker)  {
-            stateChange(worker);
-            worker.addEventListener('statechange', (e) => stateChange(e.target));
+        const initial = this.#registration.active || this.#registration.waiting || this.#registration.installing;
+        if (initial)  {
+            stateChange(initial);
+            initial.addEventListener('statechange', (e) => stateChange(e.target));
             // "updatefound" event - a new worker that will control
             // this page is installing somewhere
-            this.#swRegistration.addEventListener('updatefound', () => {
+            this.#registration.addEventListener('updatefound', () => {
                 // If updatefound is fired, it means that there's
                 // a new service worker being installed.
-                stateChange(this.#swRegistration.installing);
-                this.#swRegistration.installing.addEventListener('statechange', (e) => stateChange(e.target));
+                stateChange(this.#registration.installing);
+                this.#registration.installing.addEventListener('statechange', (e) => stateChange(e.target));
             });
         }
-    }
-
-    async requestNotificationPermission() {
-        return await new Promise(async (resolve, reject) => {
-            const permissionResult = Notification.requestPermission(resolve);
-            if (permissionResult) {
-                permissionResult.then(resolve, reject);
+        this.#messageHandler = async (event) => {
+            if (!_isObject(event.data) || !['messageType', 'message'].every((k) => k in event.data)) {
+                return;
             }
-        });
+            this.dispatchEvent(new WorkerMessageEvent(
+                this,
+                event.data.messageType,
+                event.data.message,
+                event.ports
+            ));
+        };
+        navigator.serviceWorker.addEventListener('message', this.#messageHandler);
     }
 
-    async showNotification(title, params = {}) {
-        await this.#swReady;
-        if (this.#swRegistration) {
-            return (await this.#swRegistration).showNotification(title, params);
-        }
-        return new Notification(title, params);
-    }
-    
-    async pushSubscription(autoPrompt = true) {
-        if (!this.#swRegistration) {
-            throw new Error(`Service worker not registered`);
-        }
-        await this.#swReady;
-        const pushManager = (await this.#swRegistration).pushManager;
-        let subscription = await pushManager.getSubscription();
-        if (!subscription && autoPrompt && this.#swParams.VAPID_PUBLIC_KEY) {
-            subscription = await pushManager.subscribe({
-                userVisibleOnly: true,
-                applicationServerKey: urlBase64ToUint8Array(this.#swParams.VAPID_PUBLIC_KEY),
-            });
-            if (this.#swParams.PUSH_REGISTRATION_PUBLIC_URL) {
-                await fetch(this.#swParams.PUSH_REGISTRATION_PUBLIC_URL, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json', },
-                    body: JSON.stringify(subscription)
-                });
+    postMessage(message, transferOrOptions = []) {
+        this.on('connected', () => {
+            if (Array.isArray(transferOrOptions)) {
+                transferOrOptions = { transfer: transferOrOptions };
             }
-        }
-        return subscription;
+            const { messageType = 'message', ...options } = transferOrOptions;
+            return this.#active.postMessage({
+                messageType,
+                message
+            }, options);
+        });
+        super.postMessage(message, transferOrOptions);
     }
 
-    async pushUnsubscribe() {
-        if (!this.#swRegistration) {
-            throw new Error(`Service worker not registered`);
-        }
-        await this.#swReady;
-        const pushManager = (await this.#swRegistration).pushManager;
-        const subscription = await pushManager.getSubscription();
-        if (subscription) {
-            subscription.unsubscribe();
-            if (subscription && this.#swParams.PUSH_REGISTRATION_PUBLIC_URL) {
-                await fetch(this.#swParams.PUSH_REGISTRATION_PUBLIC_URL, {
-                    method: 'DELETE',
-                    headers: { 'Content-Type': 'application/json', },
-                    body: JSON.stringify(subscription)
-                });
-            }
-        }
+    close() {
+        navigator.serviceWorker.removeEventListener('message', this.#messageHandler);
     }
 }
 
-// Public base64 to Uint
-function urlBase64ToUint8Array(base64String) {
-    var padding = '='.repeat((4 - base64String.length % 4) % 4);
-    var base64 = (base64String + padding)
-        .replace(/\-/g, '+')
-        .replace(/_/g, '/');
-
-    var rawData = window.atob(base64);
-    var outputArray = new Uint8Array(rawData.length);
-
-    for (var i = 0; i < rawData.length; ++i) {
-        outputArray[i] = rawData.charCodeAt(i);
-    }
-    return outputArray;
-}
+export class WorkerMessageEvent extends WebfloMessageEvent {}

package/src/runtime-pi/client/generate.js

@@ -25,13 +25,14 @@ export async function generate() {
     if (!cx.config.deployment?.Layout) {
         throw new Error(`The Client configurator "config.deployment.Layout" is required in context.`);
     }
+    const env = {};
     const clientConfig = await (new cx.config.runtime.Client(cx)).read();
-    clientConfig.env = {};
-    if (clientConfig.service_worker?.filename && !cx.config.runtime.client?.Worker) {
+    clientConfig.env = env;
+    if (clientConfig.capabilities?.service_worker && !cx.config.runtime.client?.Worker) {
         throw new Error(`The Service Worker configurator "config.runtime.client.Worker" is required in context.`);
     }
     const workerConfig = await (new cx.config.runtime.client.Worker(cx)).read();
-    workerConfig.env = {};
+    workerConfig.env = env;
     // -----------
     if (!cx.config.deployment?.Layout) {
         throw new Error(`The Layout configurator "config.deployment.Layout" is required in context.`);
@@ -42,20 +43,15 @@ export async function generate() {
     const dirClient = Path.resolve(cx.CWD || '', layoutConfig.CLIENT_DIR);
     const dirWorker = Path.resolve(cx.CWD || '', layoutConfig.WORKER_DIR);
     const dirSelf = Path.dirname(Url.fileURLToPath(import.meta.url)).replace(/\\/g, '/');
-    if (clientConfig.bundle_public_env || workerConfig.bundle_public_env) {
+    if (clientConfig.copy_public_variables) {
         if (!cx.config.deployment?.Env) {
             throw new Error(`The Layout configurator "config.deployment.Env" is required in context to bundle public env.`);
         }
         const envConfig = await (new cx.config.deployment.Env(cx)).read();
-        const env = { ...envConfig.entries, ...process.env };
-        for (const key in env) {
+        const $env = { ...envConfig.entries, ...process.env };
+        for (const key in $env) {
             if (!key.includes('PUBLIC_') && !key.includes('_PUBLIC')) continue;
-            if (clientConfig.bundle_public_env) {
-                clientConfig.env[key] = env[key];
-            }
-            if (workerConfig.bundle_public_env) {
-                workerConfig.env[key] = env[key];
-            }
+            env[key] = $env[key];
         }
     }
     // -----------
@@ -114,7 +110,14 @@ export async function generate() {
         gen.code.push(`const { start } = webqit.Webflo`);
         // ------------------
         // Bundle
-        declareStart.call(cx, gen, dirClient, dirPublic, clientConfig, spaRouting);
+        const paramsObj = structuredClone(clientConfig);
+        if (paramsObj.capabilities?.service_worker) {
+            paramsObj.capabilities.service_worker = {
+                filename: workerConfig.filename,
+                scope: workerConfig.scope
+            };
+        }
+        declareStart.call(cx, gen, dirClient, dirPublic, paramsObj, spaRouting);
         await bundle.call(cx, gen, Path.join(dirPublic, outfileMain), true/* asModule */);
         // ------------------
         // Embed/unembed
@@ -192,8 +195,14 @@ export async function generate() {
                 }
             }
         }
-        declareStart.call(cx, gen, dirWorker, dirPublic, workerConfig, workerRouting);
-        await bundle.call(cx, gen, Path.join(dirPublic, workerroot, clientConfig.service_worker.filename));
+        const paramsObj = structuredClone(workerConfig);
+        if (clientConfig.capabilities?.webpush) {
+            paramsObj.capabilities = {
+                webpush: true
+            };
+        }
+        declareStart.call(cx, gen, dirWorker, dirPublic, paramsObj, workerRouting);
+        await bundle.call(cx, gen, Path.join(dirPublic, workerroot, workerConfig.filename));
         // ------------------
         // Recurse
         workerGraphCallback && workerGraphCallback(workerroot, subworkerroots);
@@ -214,7 +223,7 @@ export async function generate() {
         await generateClient();
         Fs.existsSync(sparootsFile) && Fs.unlinkSync(sparootsFile);
     }
-    if (clientConfig.service_worker.filename) {
+    if (clientConfig.capabilities?.service_worker) {
         await generateWorker('/');
     }
 }

package/src/runtime-pi/client/index.js

@@ -2,11 +2,12 @@ import { WebfloRootClient1 } from './WebfloRootClient1.js';
 import { WebfloRootClient2 } from './WebfloRootClient2.js';
 import { WebfloSubClient } from './WebfloSubClient.js';
 
-export function start() {
+export async function start() {
     const WebfloRootClient = window.navigation ? WebfloRootClient2 : WebfloRootClient1;
     const instance = WebfloRootClient.create(document, this || {});
-    instance.initialize();
+    await instance.initialize();
     WebfloSubClient.defineElement();
+    return instance;
 }
 
 export { WebfloSubClient } from './WebfloSubClient.js';

package/src/runtime-pi/client/worker/CookieStorage.js

@@ -8,10 +8,10 @@ export class CookieStorage extends WebfloCookieStorage {
         );
     }
 
-    commit(response) {
+    async commit(response) {
         for (const cookieStr of this.render()) {
             response.headers.append('Set-Cookie', cookieStr);
         }
-        super.commit();
+        await super.commit();
     }
 }

package/src/runtime-pi/client/worker/SessionStorage.js

@@ -10,6 +10,6 @@ export class SessionStorage extends WebfloStorage {
     }
 
     async commit(response) {
-        super.commit();
+        await super.commit();
     }
 }

package/src/runtime-pi/client/worker/WebfloWorker.js

@@ -25,13 +25,13 @@ export class WebfloWorker extends WebfloRuntime {
 
 	static get SessionStorage() { return SessionStorage; }
 
-    static get HttpUser() { return HttpUser; }
+	static get HttpUser() { return HttpUser; }
 
 	static get Workport() { return Workport; }
 
 	static create(cx) {
-        return new this(this.Context.create(cx));
-    }
+		return new this(this.Context.create(cx));
+	}
 
 	#cx;
 	get cx() { return this.#cx; }
@@ -44,7 +44,7 @@ export class WebfloWorker extends WebfloRuntime {
 		this.#cx = cx;
 	}
 
-	initialize() {
+	async initialize() {
 		// ONINSTALL
 		const installHandler = (event) => {
 			if (this.cx.params.skip_waiting) self.skipWaiting();
@@ -53,7 +53,7 @@ export class WebfloWorker extends WebfloRuntime {
 				// Add files to cache
 				event.waitUntil(self.caches.open(this.cx.params.cache_name).then(async cache => {
 					if (this.cx.logger) { this.cx.logger.log('[ServiceWorker] Pre-caching resources.'); }
-					for (const urls of [ 'cache_first_urls', 'cache_only_urls' ]) {
+					for (const urls of ['cache_first_urls', 'cache_only_urls']) {
 						const _urls = (this.cx.params[urls] || []).map(c => c.trim()).filter(c => c && !pattern(c, self.origin).isPattern());
 						await cache.addAll(_urls);
 					}
@@ -74,7 +74,7 @@ export class WebfloWorker extends WebfloRuntime {
 								return self.caches.delete(key);
 							}
 						}));
-					}) 
+					})
 				}
 				resolve();
 			}));
@@ -82,11 +82,11 @@ export class WebfloWorker extends WebfloRuntime {
 		self.addEventListener('install', installHandler);
 		self.addEventListener('activate', activateHandler);
 		const uncontrols = this.control();
-        return () => {
-            self.removeEventListener('install', installHandler);
-            self.removeEventListener('activate', activateHandler);
+		return () => {
+			self.removeEventListener('install', installHandler);
+			self.removeEventListener('activate', activateHandler);
 			uncontrols();
-        };
+		};
 	}
 
 	control() {
@@ -112,42 +112,54 @@ export class WebfloWorker extends WebfloRuntime {
 				event.respondWith(this.navigate(event.request.url, event.request, { event }));
 			}
 		};
+		const webpushHandler = (event) => {
+			if (!(self.Notification && self.Notification.permission === 'granted')) return;
+			let data;
+			try {
+				data = event.data?.json() ?? {};
+			} catch(e) { return; }
+			const { type, title, ...params } = data;
+			if (type !== 'notification') return;
+			self.registration.showNotification(title, params);
+		};
 		self.addEventListener('fetch', fetchHandler);
-        return () => {
-            self.removeEventListener('fetch', fetchHandler);
-        };
+		self.addEventListener('push', webpushHandler);
+		return () => {
+			self.removeEventListener('fetch', fetchHandler);
+			self.removeEventListener('push', webpushHandler);
+		};
 	}
 
-    createRequest(href, init = {}) {
+	createRequest(href, init = {}) {
 		if (init instanceof Request && init.url === (href.href || href)) {
 			return init;
 		}
 		return new Request(href, init);
-    }
+	}
 
 	async navigate(url, init = {}, detail = {}) {
 		// Resolve inputs
-        const scope = { url, init, detail };
+		const scope = { url, init, detail };
 		if (typeof scope.url === 'string') {
 			scope.url = new URL(scope.url, self.location.origin);
 		}
 		// ---------------
-        // Event lifecycle
-        scope.eventLifecyclePromises = new Set;
-        scope.eventLifecycleHooks = {
-            waitUntil: (promise) => {
-                promise = Promise.resolve(promise);
-                scope.eventLifecyclePromises.add(promise);
-                scope.eventLifecyclePromises.dirty = true;
-                promise.then(() => scope.eventLifecyclePromises.delete(promise));
-            },
-            respondWith: async (response) => {
-                if (scope.eventLifecyclePromises.dirty && !scope.eventLifecyclePromises.size) {
-                    throw new Error('Final response already sent');
-                }
-                return await this.execPush(scope.clientMessaging, response);
-            },
-        };
+		// Event lifecycle
+		scope.eventLifecyclePromises = new Set;
+		scope.eventLifecycleHooks = {
+			waitUntil: (promise) => {
+				promise = Promise.resolve(promise);
+				scope.eventLifecyclePromises.add(promise);
+				scope.eventLifecyclePromises.dirty = true;
+				promise.then(() => scope.eventLifecyclePromises.delete(promise));
+			},
+			respondWith: async (response) => {
+				if (scope.eventLifecyclePromises.dirty && !scope.eventLifecyclePromises.size) {
+					throw new Error('Final response already sent');
+				}
+				return await this.execPush(scope.clientMessaging, response);
+			},
+		};
 		// Create and route request
 		scope.request = this.createRequest(scope.url, scope.init);
 		scope.cookies = this.constructor.CookieStorage.create(scope.request);
@@ -165,13 +177,15 @@ export class WebfloWorker extends WebfloRuntime {
 			cookies: scope.cookies,
 			session: scope.session,
 			user: scope.user,
-			client: scope.clientMessaging
+			client: scope.clientMessaging,
+			sdk: {}
 		});
+		await this.setup(scope.httpEvent);
 		// Restore session before dispatching
-		if (scope.request.method === 'GET' 
-		&& (scope.redirectMessageID = scope.httpEvent.url.query['redirect-message'])
-		&& (scope.redirectMessage = scope.session.get(`redirect-message:${scope.redirectMessageID}`))) {
-			scope.session.delete(`redirect-message:${scope.redirectMessageID}`);
+		if (scope.request.method === 'GET'
+			&& (scope.redirectMessageID = scope.httpEvent.url.query['redirect-message'])
+			&& (scope.redirectMessage = scope.session.get(`redirect-message:${scope.redirectMessageID}`))) {
+			await scope.session.delete(`redirect-message:${scope.redirectMessageID}`);
 		}
 		// Dispatch for response
 		scope.response = await this.dispatch(scope.httpEvent, {}, async (event) => {
@@ -182,30 +196,30 @@ export class WebfloWorker extends WebfloRuntime {
 			return await this.remoteFetch(event.request);
 		});
 		// ---------------
-        // Response processing
-        scope.hasBackgroundActivity = scope.clientMessaging.isMessaging() || scope.eventLifecyclePromises.size || (scope.redirectMessage && !(scope.response instanceof Response && scope.response.headers.get('Location')));
-        scope.response = await this.normalizeResponse(scope.httpEvent, scope.response, scope.hasBackgroundActivity);
+		// Response processing
+		scope.response = await this.normalizeResponse(scope.httpEvent, scope.response);
+		scope.hasBackgroundActivity = scope.clientMessaging.isMessaging() || scope.eventLifecyclePromises.size || (scope.redirectMessage && !scope.response.headers.get('Location'));
 		if (scope.hasBackgroundActivity) {
 			scope.response.headers.set('X-Background-Messaging', `ch:${scope.clientMessaging.port.name}`);
-        }
+		}
 		if (scope.response.headers.get('Location')) {
-            if (scope.redirectMessage) {
-                scope.session.set(`redirect-message:${scope.redirectMessageID}`, scope.redirectMessage);
-            }
+			if (scope.redirectMessage) {
+				scope.session.set(`redirect-message:${scope.redirectMessageID}`, scope.redirectMessage);
+			}
 		} else {
 			if (scope.redirectMessage) {
-                scope.eventLifecycleHooks.respondWith(scope.redirectMessage);
-            }
+				scope.eventLifecycleHooks.respondWith(scope.redirectMessage);
+			}
 		}
-        Promise.all([...scope.eventLifecyclePromises]).then(() => {
-            if (scope.clientMessaging.isMessaging()) {
-                scope.clientMessaging.on('connected', () => {
-                    setTimeout(() => {
-                        scope.clientMessaging.close();
-                    }, 100);
-                });
-            } else scope.clientMessaging.close();
-        });
+		Promise.all([...scope.eventLifecyclePromises]).then(() => {
+			if (scope.clientMessaging.isMessaging()) {
+				scope.clientMessaging.on('connected', () => {
+					setTimeout(() => {
+						scope.clientMessaging.close();
+					}, 100);
+				});
+			} else scope.clientMessaging.close();
+		});
 		return scope.response;
 	}
 
@@ -287,7 +301,7 @@ export class WebfloWorker extends WebfloRuntime {
 
 	async getRequestCache(request) {
 		const cacheName = request.headers.get('Accept') === 'application/json'
-			? this.cx.params.cache_name + '_json' 
+			? this.cx.params.cache_name + '_json'
 			: this.cx.params.cache_name;
 		return self.caches.open(cacheName);
 	}

package/src/runtime-pi/client/worker/index.js

@@ -1,8 +1,9 @@
 import { WebfloWorker } from './WebfloWorker.js';
 
-export function start() {
+export async function start() {
     const instance = WebfloWorker.create(this || {});
-    instance.initialize();
+    await instance.initialize();
+    return instance;
 }
 
 export {

package/src/runtime-pi/server/CookieStorage.js

@@ -8,10 +8,10 @@ export class CookieStorage extends WebfloCookieStorage {
         );
     }
 
-    commit(response) {
+    async commit(response) {
         for (const cookieStr of this.render()) {
             response.headers.append('Set-Cookie', cookieStr);
         }
-        super.commit();
+        await super.commit();
     }
 }

package/src/runtime-pi/server/SessionStorage.js

@@ -44,10 +44,10 @@ export class SessionStorage extends WebfloStorage {
         return this.#sessionID;
     }
 
-    commit(response, force = false) {
+    async commit(response, force = false) {
         if (response.headers.get('Set-Cookie', true).find((c) => c.name === '__sessid')) return;
-        if (!force && !this.getAdded().length && !this.getDeleted().length) return;
+        //if (!force && !this.getAdded().length && !this.getDeleted().length) return;
         response.headers.append('Set-Cookie', `__sessid=${this.#sessionID}; Path=/; Secure; HttpOnly; SameSite=Lax; Max-Age=31536000`);
-        super.commit();
+        await super.commit();
     }
 }