@webqit/webflo 1.0.18 → 1.0.20

package/src/runtime-pi/WebfloStorage.js

@@ -7,9 +7,12 @@ export class WebfloStorage extends Map {
     #session;
 
     constructor(request, session, iterable = []) {
-        super(iterable);
+        super();
         this.#request = request;
         this.#session = session === true ? this : session;
+        for (const [k, v] of iterable) {
+            this.set(k, v);
+        }
     }
     
     #originals;
@@ -29,18 +32,52 @@ export class WebfloStorage extends Map {
         });
     }
 
-    commit() {
+    async commit() {
         this.saveOriginals();
     }
 
+    #listeners = new Set;
+    observe(attr, handler) {
+        const args = { attr, handler };
+        this.#listeners.add(args);
+        return () => {
+            this.#listeners.delete(args);
+        }
+    }
+
+    async emit(attr, value) {
+        const returnValues = [];
+        for (const { attr: $attr, handler } of this.#listeners) {
+            if (arguments.length && $attr !== attr) continue;
+            if (arguments.length > 1) {
+                returnValues.push(handler(value));
+            } else {
+                returnValues.push(handler());
+            }
+        }
+        return Promise.all(returnValues);
+    }
+
+    async set(attr, value) {
+        const returnValue = super.set(attr, value);
+        await this.emit(attr, value);
+        return returnValue;
+    }
+
+    async delete(attr) {
+        const returnValue = super.delete(attr);
+        await this.emit(attr);
+        return returnValue;
+    }
+
+    async clear() {
+        const returnValue = super.clear();
+        await this.emit();
+        return returnValue;
+    }
+
     #handlers = new Map;
-    #reverseHandlers = new Map;
     defineHandler(attr, ...handlers) {
-        let registry = this.#handlers;
-        if (handlers[0] === false) {
-            registry = this.#reverseHandlers;
-            handlers.shift();
-        }
         const $handlers = [];
         for (let handler of handlers) {
             if (typeof handler === 'function') {
@@ -52,17 +89,11 @@ export class WebfloStorage extends Map {
             }
             $handlers.push(handler);
         }
-        registry.set(attr, $handlers);
-    }
-
-    defineReverseHandler(attr, ...handlers) {
-        return this.defineHandler(attr, false, ...handlers);
+        this.#handlers.set(attr, $handlers);
     }
 
     getHandlers() { return this.#handlers; }
 
-    getReverseHandlers() { return this.#reverseHandlers; }
-
     async require(attrs, callback = null, noNulls = false) {
         const entries = [];
         main: for await (const attr of [].concat(attrs)) {
@@ -94,7 +125,7 @@ export class WebfloStorage extends Map {
                         }
                         const messageID = (0 | Math.random() * 9e6).toString(36);
                         urlRewrite.searchParams.set('redirect-message', messageID);
-                        this.#session.set(`redirect-message:${messageID}`, { status: { type: handler.type || 'info', message: handler.message }});
+                        await this.#session.set(`redirect-message:${messageID}`, { status: { type: handler.type || 'info', message: handler.message }});
                     }
                     return new Response(null, { status: 302, headers: {
                         Location: urlRewrite

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

@@ -0,0 +1,211 @@
+const { Observer } = webqit;
+
+export class Capabilities {
+
+    #params;
+
+    #exposed = {};
+    get exposed() { return this.#exposed; }
+
+    #cleanups = [];
+
+    static async initialize(params) {
+        const instance = new this;
+        instance.#params = params;
+        instance.#params.app_public_webhook_url = instance.#params.app_public_webhook_url_variable && instance.#params.env[instance.#params.app_public_webhook_url_variable];
+        instance.#params.app_vapid_public_key = instance.#params.app_vapid_public_key_variable && instance.#params.env[instance.#params.app_vapid_public_key_variable];
+        // --------
+        // Custom install
+        const onbeforeinstallprompt = (e) => {
+            if (instance.#params.custom_install && instance.#exposed.custom_install !== 'granted') {
+                e.preventDefault();
+                Observer.set(instance.#exposed, 'custom_install', e);
+            }
+        };
+        window.addEventListener('beforeinstallprompt', onbeforeinstallprompt);
+        instance.#cleanups.push(() => window.removeEventListener('beforeinstallprompt', onbeforeinstallprompt));
+        // --------
+        // Webhooks
+        if (instance.#params.app_public_webhook_url) {
+            // --------
+            // app.installed
+            const onappinstalled = () => {
+                fetch(instance.#params.app_public_webhook_url, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ type: 'app.installed', data: true })
+                }).catch(() => {});
+            };
+            window.addEventListener('appinstalled', onappinstalled);
+            instance.#cleanups.push(() => window.removeEventListener('appinstalled', onappinstalled));
+            // --------
+            // push.subscribe/unsubscribe
+            if (instance.#params.webpush) {
+                try {
+                    const pushPermissionStatus = await navigator.permissions.query({ name: 'push', userVisibleOnly: true });
+                    const pushPermissionStatusHandler = async () => {
+                        const pushManager = (await navigator.serviceWorker.getRegistration()).pushManager;
+                        const eventPayload = pushPermissionStatus.state === 'granted'
+                            ? { type: 'push.subscribe', data: await pushManager.getSubscription() }
+                            : { type: 'push.unsubscribe' };
+                        if (eventPayload.type === 'push.subscribe' && !eventPayload.data) {
+                            return window.queueMicrotask(pushPermissionStatusHandler);
+                        }
+                        fetch(instance.#params.app_public_webhook_url, {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify(eventPayload)
+                        }).catch(() => {});
+                    }
+                    pushPermissionStatus.addEventListener('change', pushPermissionStatusHandler);
+                    instance.#cleanups.push(() => pushPermissionStatus.removeEventListener('change', pushPermissionStatusHandler));
+                } catch(e) {}
+            }
+        }
+        // --------
+        // Exposure
+        if (Array.isArray(instance.#params.exposed) && instance.#params.exposed.length) {
+            const [permissions, cleanup] = await instance.query(instance.#params.exposed.map((s) => s.trim()), true);
+            instance.#exposed = permissions;
+            instance.#cleanups.push(cleanup);
+        }
+        return instance;
+    }
+
+    async query(query, live = false) {
+        const permissions = {}, cleanups = [];
+        for (let q of [].concat(query)) {
+            q = this.resolveQuery(q);
+            // ------
+            // Display mode
+            if (q.name === 'display-mode') {
+                const handleDisplayMode = () => {
+                    if (document.referrer.startsWith('android-app://')) {
+                        Observer.set(permissions, 'display_mode', 'twa');
+                        return;
+                    }
+                    for (const dm of ['browser', 'standalone', 'minimal-ui', 'fullscreen', 'window-controls-overlay']) {
+                        const mediaQuery = window.matchMedia(`(display-mode: ${dm})`);
+                        if (mediaQuery.matches) {
+                            Observer.set(permissions, 'display_mode', dm);
+                            if (live) {
+                                mediaQuery.addEventListener('change', handleDisplayMode, { once: true });
+                                cleanups.push(() => mediaQuery.removeEventListener('change', handleDisplayMode));
+                            }
+                            return;
+                        }
+                    }
+                };
+                handleDisplayMode();
+                continue;
+            }
+            // ------
+            // Others
+            try {
+                const permissionStatus = await navigator.permissions.query(q);
+                permissions[permissionStatus.name.replace(/-/g, '_')] = permissionStatus.state;
+                if (live) {
+                    const onchange = () => {
+                        Observer.set(permissions, permissionStatus.name.replace(/-/g, '_'), permissionStatus.state);
+                    };
+                    permissionStatus.addEventListener('change', onchange);
+                    cleanups.push(() => permissionStatus.removeEventListener('change', onchange));
+                }
+            } catch(e) {
+                permissions[q.name.replace(/-/g, '_')] = 'unsupported';
+                console.log(e);
+            }
+        }
+        if (live) {
+            return [
+                permissions,
+                () => cleanups.forEach((c) => c())
+            ];
+        }
+        return permissions;
+    }
+
+    async request(name, params = {}) {
+        params = this.resolveRequest(name, params);
+        // ------
+        // install
+        if (name === 'install') {
+            let returnValue;
+            if (this.#exposed.custom_install === 'granted') return;
+            if (this.#exposed.custom_install) {
+                returnValue = await this.#exposed.custom_install.prompt?.();
+            }
+            Observer.set(this.#exposed, 'custom_install', 'granted');
+            return returnValue;
+        }
+        // ------
+        // notification
+        if (name === 'notification') {
+            return await new Promise(async (resolve, reject) => {
+                const permissionResult = Notification.requestPermission(resolve);
+                if (permissionResult) {
+                    permissionResult.then(resolve, reject);
+                }
+            });
+        }
+        // ------
+        // push
+        if (name === 'push') {
+            const pushManager = (await navigator.serviceWorker.getRegistration()).pushManager;
+            const subscription = (await pushManager.getSubscription()) || await pushManager.subscribe(params);
+            return subscription;
+        }
+    }
+
+    async supports(q) {
+        try {
+            await navigator.permissions.query(this.resolveQuery(q));
+            return true;
+        } catch(e) {
+            return false;
+        }
+    }
+
+    resolveQuery(q) {
+        if (typeof q === 'string') {
+            q = { name: q };
+        }
+        if (q.name === 'push' && !q.userVisibleOnly) {
+            q = { ...q, userVisibleOnly: true };
+        }
+        if (q.name === 'top-level-storage-access' && !q.requestedOrigin) {
+            q = { ...q, requestedOrigin: window.location.origin };
+        }
+        return q;
+    }
+
+    resolveRequest(name, params = {}) {
+        if (name === 'push') {
+            if (!params.userVisibleOnly) {
+                params = { ...params, userVisibleOnly: true };
+            }
+            if (!params.applicationServerKey && this.#params.app_vapid_public_key) {
+                params = { ...params, applicationServerKey: urlBase64ToUint8Array(this.#params.app_vapid_public_key) };
+            }
+        }
+        return params;
+    }
+
+    close() {
+        this.#cleanups.forEach((c) => c());
+    }
+}
+
+// Public base64 to Uint
+function urlBase64ToUint8Array(base64String) {
+    const padding = '='.repeat((4 - base64String.length % 4) % 4);
+    const base64 = (base64String + padding)
+        .replace(/\-/g, '+')
+        .replace(/_/g, '/');
+    const rawData = window.atob(base64);
+    const outputArray = new Uint8Array(rawData.length);
+    for (let i = 0; i < rawData.length; ++i) {
+        outputArray[i] = rawData.charCodeAt(i);
+    }
+    return outputArray;
+}

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

@@ -8,10 +8,10 @@ export class CookieStorage extends WebfloCookieStorage {
         );
     }
 
-    commit(response) {
+    async commit(response) {
         for (const cookieStr of this.render()) {
             document.cookie = cookieStr;
         }
-        super.commit();
+        await super.commit();
     }
 }

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

@@ -20,7 +20,7 @@ export class SessionStorage extends WebfloStorage {
         super(request, true, iterable);
     }
 
-    commit() {
+    async commit() {
         const storeType = this.constructor.type === 'user' ? 'localStorage' : 'sessionStorage';
         for (const key of this.getAdded()) {
             window[storeType].setItem(key, this.get(key));
@@ -28,6 +28,6 @@ export class SessionStorage extends WebfloStorage {
         for (const key of this.getDeleted()) {
             window[storeType].removeItem(key);
         }
-        super.commit();
+        await super.commit();
     }
 }

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

@@ -32,9 +32,6 @@ export class WebfloClient extends WebfloRuntime {
     #host;
     get host() { return this.#host; }
 
-    #network;
-    get network() { return this.#network; }
-
     #location;
     get location() { return this.#location; }
 
@@ -55,7 +52,6 @@ export class WebfloClient extends WebfloRuntime {
         super();
         this.#host = host;
         Object.defineProperty(this.host, 'webfloRuntime', { get: () => this });
-        this.#network = { status: window.navigator.onLine };
         this.#location = new Url/*NOT URL*/(this.host.location);
         this.#navigator = {
             requesting: null,
@@ -72,7 +68,7 @@ export class WebfloClient extends WebfloRuntime {
         };
     }
 
-    initialize() {
+    async initialize() {
 		this.#backgroundMessaging = new MultiportMessagingAPI(this, { runtime: this });
         // Bind response and redirect handlers
         const responseHandler = (e) => {
@@ -92,19 +88,13 @@ export class WebfloClient extends WebfloRuntime {
                 });
             }, 10);
         };
-        this.backgroundMessaging.handleMessages('response', responseHandler);
-        this.backgroundMessaging.handleMessages('redirect', responseHandler);
-        // Bind network status handlers
-        const onlineHandler = () => Observer.set(this.network, 'status', window.navigator.onLine);
-        window.addEventListener('online', onlineHandler);
-        window.addEventListener('offline', onlineHandler);
-        // Start controlling
-        const uncontrols = this.control();
+        const responseHandler1Cleanup = this.backgroundMessaging.handleMessages('response', responseHandler);
+        const responseHandler2Cleanup = this.backgroundMessaging.handleMessages('redirect', responseHandler);
+        const controlCleanup = this.control();
         return () => {
-            this.#backgroundMessaging.close();
-            window.removeEventListener('online', onlineHandler);
-            window.removeEventListener('offline', onlineHandler);
-            uncontrols();
+            responseHandler1Cleanup();
+            responseHandler2Cleanup();
+            controlCleanup();
         };
     }
 
@@ -128,7 +118,7 @@ export class WebfloClient extends WebfloRuntime {
         // -----------------------
         // Capture all link-clicks
         const clickHandler = (e) => {
-            if (!this._canIntercept(e)) return;
+            if (!this._canIntercept(e) || e.defaultPrevented) return;
             var anchorEl = e.target.closest('a');
             if (!anchorEl || !anchorEl.href || (anchorEl.target && !anchorEl.target.startsWith('_webflo:')) || anchorEl.download || !this.isSpaRoute(anchorEl)) return;
             const resolvedUrl = new URL(anchorEl.hasAttribute('href') ? anchorEl.getAttribute('href') : '', this.location.href);
@@ -176,7 +166,7 @@ export class WebfloClient extends WebfloRuntime {
         // -----------------------
         // Capture all form-submits
         const submitHandler = (e) => {
-            if (!this._canIntercept(e)) return;
+            if (!this._canIntercept(e) || e.defaultPrevented) return;
             // ---------------
             // Declare form submission modifyers
             const form = e.target.closest('form');
@@ -348,8 +338,10 @@ export class WebfloClient extends WebfloRuntime {
             cookies: scope.cookies,
             session: scope.session,
             user: scope.user,
-            client: scope.clientMessaging
+            client: scope.clientMessaging,
+            sdk: {}
         });
+        await this.setup(scope.httpEvent);
         scope.httpEvent.onRequestClone = () => this.createRequest(scope.url, scope.init);
         // Ste pre-request states
         Observer.set(this.navigator, {
@@ -369,7 +361,7 @@ export class WebfloClient extends WebfloRuntime {
         scope.context = {};
         if (window.webqit?.oohtml?.configs) {
             const { BINDINGS_API: { api: bindingsConfig } = {}, } = window.webqit.oohtml.configs;
-            scope.context = this.host[bindingsConfig.bindings].data || {};
+            scope.context = this.host[bindingsConfig.bindings] || {};
         }
         if (scope.request.method === 'GET' || (scope.request.method === 'POST' && scope.url.pathname !== this.location.pathname)) {
             // Ping existing background process
@@ -385,11 +377,11 @@ export class WebfloClient extends WebfloRuntime {
         });
         // ---------------
         // Response processing
-        scope.hasBackgroundActivity = 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 = scope.clientMessaging.isMessaging() || scope.eventLifecyclePromises.size || (scope.redirectMessage && !scope.response.headers.get('Location'));
         if (scope.response.headers.get('Location')) {
             if (scope.redirectMessage) {
-                scope.session.set(`redirect-message:${scope.redirectMessageID}`, scope.redirectMessage);
+                await scope.session.set(`redirect-message:${scope.redirectMessageID}`, scope.redirectMessage);
             }
 		} else {
 			if (scope.redirectMessage) {
@@ -436,7 +428,7 @@ export class WebfloClient extends WebfloRuntime {
         // Only render now
         if ([202/*Accepted*/, 304/*Not Modified*/].includes(scope.response.status)) {
             if (scope.backgroundMessaging) {
-                scope.backgroundMessaging.addEventListener('response', () => {
+                scope.backgroundMessaging.addEventListener('response', (e) => {
                     scope.resetStates();
                 });
                 return;
@@ -539,8 +531,8 @@ export class WebfloClient extends WebfloRuntime {
                     navigator: this.navigator,
                     location: this.location,
                     network: this.network, // request, redirect, error, status, remote
+                    capabilities: this.capabilities,
                     transition: this.transition,
-                    background: null
                 }, { diff: true, merge });
                 let overridenKeys;
                 if (_isObject(data) && (overridenKeys = ['env', 'navigator', 'location', 'network', 'transition', 'background'].filter((k) => k in data)).length) {

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

@@ -1,6 +1,7 @@
 import { WebfloClient } from './WebfloClient.js';
 import { Context } from './Context.js';
 import { Workport } from './Workport.js';
+import { Capabilities } from './Capabilities.js';
 
 const { Observer } = webqit;
 
@@ -10,6 +11,8 @@ export class WebfloRootClient1 extends WebfloClient {
 
 	static get Workport() { return Workport; }
 
+	static get Capabilities() { return Capabilities; }
+
 	static create(host, cx = {}) {
         return new this(host, this.Context.create(cx));
     }
@@ -17,6 +20,15 @@ export class WebfloRootClient1 extends WebfloClient {
 	#cx;
 	get cx() { return this.#cx; }
 
+    #network;
+    get network() { return this.#network; }
+
+    #workport;
+    get workport() { return this.#workport; }
+
+    #capabilities;
+    get capabilities() { return this.#capabilities; }
+
 	constructor(host, cx) {
 		if (!(host instanceof Document)) {
 			throw new Error('Argument #1 must be a Document instance');
@@ -26,11 +38,42 @@ export class WebfloRootClient1 extends WebfloClient {
 			throw new Error('Argument #2 must be a Webflo Context instance');
 		}
 		this.#cx = cx;
+		this.#network = { status: window.navigator.onLine };
 	}
 
-	initialize() {
-		// Main initializations
-		let undoControl = super.initialize();
+	async initialize() {
+		// --------
+		// INITIALIZATIONS
+		const cleanups = [await super.initialize()];
+		// --------
+		// Service Worker && Capabilities
+		if (this.cx.params.capabilities?.service_worker?.filename) {
+			const { service_worker: { filename, ...restServiceWorkerParams } = {} } = this.cx.params.capabilities;
+			this.#workport = await this.constructor.Workport.initialize(null, (this.cx.params.public_base_url || '') + filename, restServiceWorkerParams);
+			cleanups.push(() => this.#workport.close());
+		}
+		this.#capabilities = await this.constructor.Capabilities.initialize({ ...this.cx.params.capabilities, env: this.cx.params.env });
+		cleanups.push(() => this.#capabilities.close());
+		// --------
+        // Bind network status handlers
+        const onlineHandler = () => Observer.set(this.network, 'status', window.navigator.onLine);
+        window.addEventListener('online', onlineHandler);
+        window.addEventListener('offline', onlineHandler);
+		cleanups.push(() => {
+			window.removeEventListener('online', onlineHandler);
+            window.removeEventListener('offline', onlineHandler);
+		});
+		// --------
+		// Window opener pinging
+		let beforeunloadCleanup;
+		if (window.opener) {
+			const beforeunloadHandler = () => window.opener.postMessage('close');
+			window.addEventListener('beforeunload', beforeunloadHandler);
+			cleanups.push(() => {
+				window.removeEventListener('beforeunload', beforeunloadHandler);
+			});
+		}
+		// --------
 		// Bind global prompt handlers
         const promptsHandler = (e) => {
             e.stopPropagation();
@@ -49,9 +92,10 @@ export class WebfloRootClient1 extends WebfloClient {
 				});
             }, 10);
         };
-        this.backgroundMessaging.handleMessages('confirm', promptsHandler);
-        this.backgroundMessaging.handleMessages('prompt', promptsHandler);
-		// Respond to background activity request at pageload
+		cleanups.push(this.backgroundMessaging.handleMessages('confirm', promptsHandler));
+        cleanups.push(this.backgroundMessaging.handleMessages('prompt', promptsHandler));
+		// --------
+		// HYDRATION
 		const scope = {};
         if (scope.backgroundMessagingMeta = document.querySelector('meta[name="X-Background-Messaging"]')) {
 			scope.backgroundMessaging = this.$createBackgroundMessagingFrom(scope.backgroundMessagingMeta.content);
@@ -66,32 +110,9 @@ export class WebfloRootClient1 extends WebfloClient {
 				});
 			} catch(e) {}
         }
-		// Service Worker && COMM
-		if (this.cx.params.service_worker?.filename) {
-			const { public_base_url: base, service_worker: { filename, ...restServiceWorkerParams } } = this.cx.params;
-			const { vapid_key_env, push_registration_url_env, ..._restServiceWorkerParams } = restServiceWorkerParams;
-			const swParams = {
-				..._restServiceWorkerParams,
-				VAPID_PUBLIC_KEY: this.cx.params.env[vapid_key_env],
-				PUSH_REGISTRATION_PUBLIC_URL: this.cx.params.env[push_registration_url_env],
-				startMessages: true
-			};
-			this.workport = new this.constructor.Workport;
-			this.workport.registerServiceWorker(base + filename, swParams);
-		}
-		if (window.opener) {
-			// Window opener pinging
-			const $undoControl = undoControl;
-			const beforeunloadHandler = () => {
-				window.opener.postMessage('close');
-			};
-			window.addEventListener('beforeunload', beforeunloadHandler);
-			undoControl = () => {
-				window.removeEventListener('beforeunload', beforeunloadHandler);
-				$undoControl();
-			};
-		}
-		return undoControl
+		// --------
+		// CLEAN UP
+		return () => cleanups.forEach((c) => c());
 	}
 
 	/**
@@ -102,7 +123,7 @@ export class WebfloRootClient1 extends WebfloClient {
 
 	control() {
 		// IMPORTANT: we're calling super.controlClassic()
-		const undoControl = super.controlClassic((newHref) => {
+		const cleanupSuper = super.controlClassic((newHref) => {
             try {
                 // Save current scroll position
                 window.history.replaceState({
@@ -134,7 +155,7 @@ export class WebfloRootClient1 extends WebfloClient {
 		window.addEventListener('popstate', popstateHandler);
         return () => {
             this.host.removeEventListener('popstate', popstateHandler);
-            undoControl();
+            cleanupSuper();
         };
 	}
 

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

@@ -9,14 +9,14 @@ export class WebfloRootClient2 extends WebfloRootClient1 {
 		let navigationOrigins = [];
         // Capture all link-clicks
 		const clickHandler = (e) => {
-			if (!this._canIntercept(e)) return;
+			if (!this._canIntercept(e) || e.defaultPrevented) return;
 			let anchorEl = e.target.closest('a');
 			if (!anchorEl || !anchorEl.href || anchorEl.target) return;
 			navigationOrigins = [anchorEl, null, anchorEl.closest('[navigationcontext]')];
 		};
         // Capture all form-submits
 		const submitHandler = (e) => {
-			if (!this._canIntercept(e)) return;
+			if (!this._canIntercept(e) || e.defaultPrevented) return;
 			navigationOrigins = [e.submitter, e.target.closest('form'), e.target.closest('[navigationcontext]')];
 		};
 		// Handle navigation event which happens after the above

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

@@ -50,9 +50,9 @@ export class WebfloSubClient extends WebfloClient {
 				this.location = newValue;
 			}
 	
-			connectedCallback() {
+			async connectedCallback() {
 				this.#superRuntime = (this.parentNode?.closest(embedTagNames) || document).webfloRuntime;
-				this.#webfloControllerUninitialize = WebfloSubClient.create(this, this.#superRuntime).initialize();
+				this.#webfloControllerUninitialize = await WebfloSubClient.create(this, this.#superRuntime).initialize();
 			}
 	
 			disconnectedCallback() {
@@ -70,8 +70,12 @@ export class WebfloSubClient extends WebfloClient {
 	
 	get cx() { return this.#superRuntime.cx; }
 
+    get network() { return this.#superRuntime.network; }
+
 	get workport() { return this.#superRuntime.workport; }
 
+    get capabilities() { return this.#superRuntime.capabilities; }
+
     get withViewTransitions() { return this.host.hasAttribute('viewtransitions'); }
 
 	constructor(host, superRuntime) {
@@ -85,11 +89,11 @@ export class WebfloSubClient extends WebfloClient {
 		this.#superRuntime = superRuntime;
 	}
 
-	initialize() {
+	async initialize() {
 		if (this.host.location.origin !== window.location.origin) {
 			throw new Error(`Webflo embeddable origin violation in "${window.location}"`);
 		}
-		const uncontrols = super.initialize();
+		const cleanupSuper = await super.initialize();
 		this.backgroundMessaging.setParent(this.#superRuntime.backgroundMessaging);
 		if (this.host.getAttribute('location')) {
 			this.navigate(this.location.href);
@@ -98,7 +102,7 @@ export class WebfloSubClient extends WebfloClient {
 			if (this.backgroundMessaging.parentNode === this.#superRuntime.backgroundMessaging) {
 				this.backgroundMessaging.setParent(null);
 			}
-			uncontrols();
+			cleanupSuper();
 		};
 	}