@webqit/webflo 0.10.3 → 0.11.0

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

@@ -5,11 +5,13 @@
 import Fs from 'fs';
 import Url from 'url';
 import Path from 'path';
-import { _beforeLast } from '@webqit/util/str/index.js';
+import Jsdom from 'jsdom';
+import EsBuild from 'esbuild';
+import { _afterLast, _beforeLast } from '@webqit/util/str/index.js';
 import { _isObject, _isArray } from '@webqit/util/js/index.js';
-import * as DotJs from '@webqit/backpack/src/dotfiles/DotJs.js';
+import { jsFile } from '@webqit/backpack/src/dotfile/index.js';
 import { gzipSync, brotliCompressSync } from 'zlib';
-import EsBuild from 'esbuild';
+import { urlPattern } from '../util.js';
 
 /**
  * @generate
@@ -20,6 +22,9 @@ export async function generate() {
     if (!cx.config.runtime?.Client) {
         throw new Error(`The Client configurator "config.runtime.Client" is required in context.`);
     }
+    if (!cx.config.deployment?.Layout) {
+        throw new Error(`The Client configurator "config.deployment.Layout" is required in context.`);
+    }
     const clientConfig = await (new cx.config.runtime.Client(cx)).read();
     if (clientConfig.support_service_worker && !cx.config.runtime.client?.Worker) {
         throw new Error(`The Service Worker configurator "config.runtime.client.Worker" is required in context.`);
@@ -30,88 +35,235 @@ export async function generate() {
         throw new Error(`The Layout configurator "config.deployment.Layout" is required in context.`);
     }
     const layoutConfig = await (new cx.config.deployment.Layout(cx)).read();
+    // -----------
     const dirPublic = Path.resolve(cx.CWD || '', layoutConfig.PUBLIC_DIR);
+    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, '/');
     // -----------
+    // Scan Subdocuments
+    const scanSubroots = (sparoot, rootFileName) => {
+        let dir = Path.join(dirPublic, sparoot), passes = 0;
+        return [ Fs.readdirSync(dir).reduce((sparoots, f) => {
+            let resource = Path.join(dir, f);
+            if (Fs.statSync(resource).isDirectory()) {
+                let subsparoot = Path.join(sparoot, f);
+                if (Fs.existsSync(Path.join(resource, rootFileName))) {
+                    return sparoots.concat(subsparoot);
+                }
+                passes ++;
+                return sparoots.concat(scanSubroots(subsparoot, rootFileName)[ 0 ]);
+            }
+            return sparoots;
+        }, []), passes ];
+    };
+    // -----------
     // Generate client build
-    let genClient = getGen.call(cx, dirSelf, layoutConfig.CLIENT_DIR, clientConfig, `The Client Build.`);
-    if (clientConfig.support_oohtml) {
-        genClient.imports = { [`${dirSelf}/generate.oohtml.js`]: null, ...genClient.imports };
-    }
-    await bundle.call(cx, genClient, `${dirPublic}/${clientConfig.bundle_filename}`, true/* asModule */);
-    cx.logger && cx.logger.log('');
+    const generateClient = async function(sparoot, spaGraphCallback = null) {
+        let [ subsparoots, targets ] = (sparoot && scanSubroots(sparoot, 'index.html')) || [ [], false ];
+        if (!sparoot) sparoot = '/';
+        let spaRouting = { root: sparoot, subroots: subsparoots, targets };
+        let codeSplitting = !!(sparoot !== '/' || subsparoots.length);
+        let outfileMain = Path.join(sparoot, clientConfig.bundle_filename),
+            outfileWebflo = _beforeLast(clientConfig.bundle_filename, '.js') + '.webflo.js';
+        let gen = { imports: {}, code: [], };
+        // ------------------
+        const initWebflo = gen => {
+            if (clientConfig.oohtml_support === 'namespacing') {
+                gen.imports[`${dirSelf}/oohtml/namespacing.js`] = null;
+            } else if (clientConfig.oohtml_support === 'scripting') {
+                gen.imports[`${dirSelf}/oohtml/scripting.js`] = null;
+            } else if (clientConfig.oohtml_support === 'templating') {
+                gen.imports[`${dirSelf}/oohtml/templating.js`] = null;
+            } else if (clientConfig.oohtml_support !== 'none') {
+                gen.imports[`${dirSelf}/oohtml/full.js`] = null;
+            }
+            gen.imports[`${dirSelf}/index.js`] = `* as Webflo`;
+            gen.code.push(``);
+            gen.code.push(`if (!globalThis.WebQit) {`);
+            gen.code.push(`    globalThis.WebQit = {}`);
+            gen.code.push(`}`);
+            gen.code.push(`WebQit.Webflo = Webflo`);
+            return gen;
+        };
+        // ------------------
+        if (!codeSplitting) {
+            initWebflo(gen);
+        } else if (sparoot === '/') {
+            if (cx.logger) {
+                cx.logger.log(cx.logger.style.keyword(`-----------------`));
+                cx.logger.log(`Base Build`);
+                cx.logger.log(cx.logger.style.keyword(`-----------------`));
+            }
+            let gen1 = initWebflo({ imports: {}, code: [], });
+            await bundle.call(cx, gen1, Path.join(dirPublic, outfileWebflo), true/* asModule */);
+        }
+        // ------------------
+        if (cx.logger) {
+            cx.logger.log(cx.logger.style.keyword(`-----------------`));
+            cx.logger.log(`Client Build ` + cx.logger.style.comment(`(sparoot:${sparoot}; is-split:${codeSplitting})`));
+            cx.logger.log(cx.logger.style.keyword(`-----------------`));
+        }
+        gen.code.push(`const { start } = WebQit.Webflo`);
+        // ------------------
+        // Bundle
+        declareStart.call(cx, gen, dirClient, dirPublic, clientConfig, spaRouting);
+        await bundle.call(cx, gen, Path.join(dirPublic, outfileMain), true/* asModule */);
+        // ------------------
+        // Embed/unembed
+        let targetDocumentFile = Path.join(dirPublic, sparoot, 'index.html'),
+            outfileWebfloPublic = Path.join(clientConfig.public_base_url, outfileWebflo),
+            outfileMainPublic = Path.join(clientConfig.public_base_url, outfileMain),
+            embedList = [],
+            unembedList = [];
+        if (cx.flags['auto-embed']) {
+            if (codeSplitting) {
+                embedList.push(outfileWebfloPublic);
+            } else {
+                unembedList.push(outfileWebfloPublic);
+            }
+            embedList.push(outfileMainPublic);
+        } else {
+            unembedList.push(outfileWebfloPublic, outfileMainPublic);
+        }
+        handleEmbeds(targetDocumentFile, embedList, unembedList);
+        // ------------------
+        // Recurse
+        spaGraphCallback && spaGraphCallback(sparoot, subsparoots);
+        if (cx.flags.recursive) {
+            while (subsparoots.length) {
+                await generateClient(subsparoots.shift(), spaGraphCallback);
+            }
+        }
+    };
     // -----------
     // Generate worker build
-    if (clientConfig.support_service_worker) {
-        let genWorker = getGen.call(cx, `${dirSelf}/worker`, layoutConfig.WORKER_DIR, workerConfig, `The Worker Build.`);
-        await bundle.call(cx, genWorker, `${dirPublic}/${clientConfig.worker_filename}`);
-        cx.logger && cx.logger.log('');
+    const generateWorker = async function(workerroot, workerGraphCallbak = null) {
+        let [ subworkerroots, targets ] = workerroot && scanSubroots(workerroot, 'workerroot') || [ [], false ];
+        if (!workerroot) workerroot = '/';
+        let workerRouting = { root: workerroot, subroots: subworkerroots, targets };
+        let gen = { imports: {}, code: [], };
+        if (cx.logger) {
+            cx.logger.log(cx.logger.style.comment(`-----------------`));
+            cx.logger.log(`Worker Build - workerroot:${workerroot}`);
+            cx.logger.log(cx.logger.style.comment(`-----------------`));
+        }
+        // ------------------
+        // >> Modules import
+        gen.imports[`${dirSelf}/worker/index.js`] = `{ start }`;
+        gen.code.push(``);
+        // ------------------
+        // Bundle
+        if (workerConfig.cache_only_urls.length) {
+            // Separate URLs from patterns
+            let [ urls, patterns ] = workerConfig.cache_only_urls.reduce(([ urls, patterns ], url) => {
+                let patternInstance = urlPattern(url, 'http://localhost'),
+                    isPattern = patternInstance.isPattern();
+                if (isPattern && (patternInstance.pattern.pattern.hostname !== 'localhost' || patternInstance.pattern.pattern.port)) {
+                    throw new Error(`Pattern URLs must have no origin part. Recieved "${url}".`);
+                }
+                return isPattern ? [ urls, patterns.concat(patternInstance) ] : [ urls.concat(url), patterns ];
+            }, [ [], [] ]);
+            // Resolve patterns
+            if (patterns.length) {
+                // List all files
+                let scan = dir => Fs.readdirSync(dir).reduce((result, f) => {
+                    let resource = Path.join(dir, f);
+                    return result.concat(Fs.statSync(resource).isDirectory() ? scan(resource) : '/' + Path.relative(dirPublic, resource));
+                }, []);
+                let files = scan(dirPublic);
+                // Resolve patterns from files
+                workerConfig.cache_only_urls = patterns.reduce((all, pattern) => {
+                    let matchedFiles = files.filter(file => pattern.test(file, 'http://localhost'));
+                    if (matchedFiles.length) return all.concat(matchedFiles);
+                    throw new Error(`The pattern "${pattern.pattern.pattern.pathname}" didn't match any files.`);
+                }, urls);
+            }
+        }
+        declareStart.call(cx, gen, dirWorker, dirPublic, workerConfig, workerRouting);
+        await bundle.call(cx, gen, Path.join(dirPublic, workerroot, clientConfig.worker_filename));
+        // ------------------
+        // Recurse
+        workerGraphCallbak && workerGraphCallbak(workerroot, subworkerroots);
+        if (cx.flags.recursive) {
+            while (subworkerroots.length) {
+                await generateWorker(subworkerroots.shift());
+            }
+        }
+    };
+    // -----------
+    // Generate now...
+    let sparootsFile = Path.join(dirPublic, 'sparoots.json');
+    if (clientConfig.spa_routing !== false) {
+        const sparoots = [];
+        await generateClient('/', root => sparoots.push(root));
+        Fs.writeFileSync(sparootsFile, JSON.stringify(sparoots, null, 4));
+    } else {
+        await generateClient();
+        Fs.existsSync(sparootsFile) && Fs.unlinkSync(sparootsFile);
+    }
+    if (clientConfig.service_worker_support) {
+        await generateWorker('/');
     }
 }
 
 /**
  * Compile routes.
  * 
- * @param string modulesDir
- * @param string routesDir
- * @param object paramsObj
- * @param string desc
+ * @param object    gen
+ * @param string    routesDir
+ * @param string    targetPublic
+ * @param object    paramsObj
+ * @param object    routing
  * 
  * @return Object
  */
-function getGen(modulesDir, routesDir, paramsObj, desc) {
+function declareStart(gen, routesDir, targetDir, paramsObj, routing) {
     const cx = this || {};
-    if (cx.logger) {
-        cx.logger.log(cx.logger.style.comment(`-----------------`));
-        cx.logger.log(desc);
-        cx.logger.log(cx.logger.style.comment(`-----------------`));
-        cx.logger.log('');
-    }
-    // ------------------
-    const gen = { imports: {}, code: [], };
-    // ------------------
-    // >> Modules import
-    gen.imports[`${modulesDir}/index.js`] = `{ start }`;
-    gen.code.push(``);
     // ------------------
     // >> Routes mapping
     gen.code.push(`// >> Routes`);
-    declareRoutesObj.call(cx, gen, routesDir, 'layout', '');
+    declareRoutesObj.call(cx, gen, routesDir, targetDir, 'layout', routing);
     gen.code.push(``);
     // ------------------
     // >> Params
     gen.code.push(`// >> Params`);
-    declareParamsObj.call(cx, gen, paramsObj, 'params');
+    declareParamsObj.call(cx, gen, { ...paramsObj, routing }, 'params');
     gen.code.push(``);
     // ------------------
     // >> Startup
     gen.code.push(`// >> Startup`);
     gen.code.push(`start.call({ layout, params })`);
-    return gen;
 }
 
 /**
  * Compile routes.
  * 
- * @param object gen
- * @param string routesDir
- * @param string varName
+ * @param object    gen
+ * @param string    routesDir
+ * @param string    targetDir
+ * @param string    varName
+ * @param object    routing
  * 
  * @return void
  */
-function declareRoutesObj(gen, routesDir, varName) {
+function declareRoutesObj(gen, routesDir, targetDir, varName, routing) {
     const cx = this || {};
-    cx.logger && cx.logger.log(`> Declaring routes...`);
+    let _routesDir = Path.join(routesDir, routing.root),
+        _targetDir = Path.join(targetDir, routing.root);
+    cx.logger && cx.logger.log(cx.logger.style.keyword(`> `) + `Declaring routes...`);
     // ----------------
     // Directory walker
     const walk = (dir, callback) => {
         Fs.readdirSync(dir).forEach(f => {
             let resource = Path.join(dir, f);
+            let namespace = _beforeLast('/' + Path.relative(routesDir, resource), '/index.js') || '/';
             if (Fs.statSync(resource).isDirectory()) {
+                if (routing.subroots.includes(namespace)) return;
                 walk(resource, callback);
             } else {
-                let ext = Path.extname(resource) || '';
-                callback(resource, ext);
+                let relativePath = Path.relative(_targetDir, resource);
+                callback(resource, namespace, relativePath);
             }
         });
     };
@@ -119,29 +271,25 @@ function declareRoutesObj(gen, routesDir, varName) {
     // >> Routes mapping
     gen.code.push(`const ${varName} = {};`);
     let indexCount = 0;
-    if (routesDir && Fs.existsSync(routesDir)) {
-        let clientDirname = routesDir.replace(/\\/g, '/').split('/').pop();
-        walk(routesDir, (file, ext) => {
+    if (Fs.existsSync(_routesDir)) {
+        walk(_routesDir, (file, namespace, relativePath) => {
             //relativePath = relativePath.replace(/\\/g, '/');
             if (file.replace(/\\/g, '/').endsWith('/index.js')) {
-                let relativePath = Path.relative(routesDir, file).replace(/\\/g, '/');
                 // Import code
                 let routeName = 'index' + (++ indexCount);
                 // IMPORTANT: we;re taking a step back here so that the parent-child relationship for 
                 // the directories be involved
-                gen.imports[`../${clientDirname}/${relativePath}`] = '* as ' + routeName;
+                gen.imports[relativePath] = '* as ' + routeName;
                 // Definition code
-                let routePath = _beforeLast('/' + relativePath, '/index.js');
-                gen.code.push(`${varName}['${routePath || '/'}'] = ${routeName};`);
+                gen.code.push(`${varName}['${namespace}'] = ${routeName};`);
                 // Show
-                cx.logger && cx.logger.log(`> ./${relativePath}`);
+                cx.logger && cx.logger.log(cx.logger.style.comment(`  [${namespace}]:   `) + cx.logger.style.url(relativePath) + cx.logger.style.comment(` (${Fs.statSync(file).size / 1024} KB)`));
             }
         });
     }
     if (!indexCount) {
-        cx.logger && cx.logger.log(`> (none)`);
+        cx.logger && cx.logger.log(cx.logger.style.comment(`  (none)`));
     }
-    cx.logger && cx.logger.log(``);
 }
 
 /**
@@ -149,7 +297,7 @@ function declareRoutesObj(gen, routesDir, varName) {
  * 
  * @param object    gen
  * @param object    paramsObj
- * @param string   varName
+ * @param string    varName
  * 
  * @return void
  */
@@ -189,7 +337,9 @@ function declareParamsObj(gen, paramsObj, varName = null, indentation = 0) {
  */
 async function bundle(gen, outfile, asModule = false) {
     const cx = this || {};
-    const compression = cx.flags.compress;
+    const compression = !cx.flags.compression ? false : (
+        cx.flags.compression === true ? ['gz'] : cx.flags.compression.split(',').map(s => s.trim())
+    );
     const moduleFile = `${_beforeLast(outfile, '.')}.esm.js`;
 
     // ------------------
@@ -197,11 +347,10 @@ async function bundle(gen, outfile, asModule = false) {
     if (cx.logger) {
         let waiting = cx.logger.waiting(cx.logger.f`Writing the ES module file: ${moduleFile}`);
         waiting.start();
-        DotJs.write(gen, moduleFile, 'ES Module file');
+        jsFile.write(gen, moduleFile, 'ES Module file');
         waiting.stop();
-        cx.logger.info(cx.logger.f`The module file: ${moduleFile}`);
     } else {
-        DotJs.write(gen, moduleFile, 'ES Module file');
+        jsFile.write(gen, moduleFile, 'ES Module file');
     }
 
     // ----------------
@@ -227,34 +376,93 @@ async function bundle(gen, outfile, asModule = false) {
     let waiting;
     if (cx.logger) {
         waiting = cx.logger.waiting(`Bundling...`);
-        cx.logger.log('');
-        cx.logger.log('> Bundling...');
-        cx.logger.info(cx.logger.f`FROM: ${bundlingConfig.entryPoints[0]}`);
-        cx.logger.info(cx.logger.f`TO: ${bundlingConfig.outfile}`);
+        cx.logger.log(cx.logger.style.keyword(`> `) + 'Bundling...');
         waiting.start();
     }
-    // Run
+    // Main
     await EsBuild.build(bundlingConfig);
-    if (waiting) waiting.stop();
-    // Remove moduleFile build
-    Fs.unlinkSync(bundlingConfig.entryPoints[0]);
-
-    // ----------------
     // Compress...
+    let compressedFiles = [], removals = [];
     if (compression) {
-        if (cx.logger) {
-            waiting = cx.logger.waiting(`Compressing...`);
-            waiting.start();
-        }
         const contents = Fs.readFileSync(bundlingConfig.outfile);
-        const gzip = gzipSync(contents, {});
-        const brotli = brotliCompressSync(contents, {});
-        Fs.writeFileSync(`${bundlingConfig.outfile}.gz`, gzip);
-        Fs.writeFileSync(`${bundlingConfig.outfile}.br`, brotli);
-        if (waiting) {
-            waiting.stop();
-            cx.logger.log('');
-            cx.logger.log('> Compression: .gz, .br');
+        if (compression.includes('gz')) {
+            const gzip = gzipSync(contents, {});
+            Fs.writeFileSync(bundlingConfig.outfile + '.gz', gzip);
+            compressedFiles.push(bundlingConfig.outfile + '.gz');
+        } else {
+            removals.push(bundlingConfig.outfile + '.gz');
+        }
+        if (compression.includes('br')) {
+            const brotli = brotliCompressSync(contents, {});
+            Fs.writeFileSync(bundlingConfig.outfile + '.br', brotli);
+            compressedFiles.push(bundlingConfig.outfile + '.br');
+        } else {
+            removals.push(bundlingConfig.outfile + '.br');
+        }
+    }
+    // Remove moduleFile build
+    Fs.unlinkSync(bundlingConfig.entryPoints[0]);
+    removals.forEach(file => Fs.existsSync(file) && Fs.unlinkSync(file));
+    if (waiting) waiting.stop();
+    // ----------------
+    // Stats
+    if (cx.logger) {
+        [bundlingConfig.outfile].concat(compressedFiles).forEach(file => {
+            let ext = '.' + _afterLast(file, '.');
+            cx.logger.info(cx.logger.style.comment(`  [${ext}]: `) + cx.logger.style.url(file) + cx.logger.style.comment(` (${Fs.statSync(file).size / 1024} KB)`));
+        });
+        cx.logger.log('');
+    }
+}
+
+/**
+ * Handles auto-embeds
+ * 
+ * @param String    targetDocumentFile
+ * @param Array     embedList
+ * @param Array     unembedList
+ * 
+ * @return Void
+ */
+function handleEmbeds(targetDocumentFile, embedList, unembedList) {
+    let targetDocument, successLevel = 0;
+    if (Fs.existsSync(targetDocumentFile) && (targetDocument = Fs.readFileSync(targetDocumentFile).toString()) && targetDocument.trim().startsWith('<!DOCTYPE html')) {
+        successLevel = 1;
+        let dom = new Jsdom.JSDOM(targetDocument), by = 'webflo', touched;
+        let embed = (src, before) => {
+            let embedded = dom.window.document.querySelector(`script[src="${src}"]`);
+            if (!embedded) {
+                embedded = dom.window.document.createElement('script');
+                embedded.setAttribute('type', 'module');
+                embedded.setAttribute('src', src);
+                embedded.setAttribute('by', by);
+                if (before) {
+                    before.before(embedded, `\n\t\t`);
+                } else {
+                    dom.window.document.head.appendChild(embedded);
+                }
+                touched = true;
+            }
+            return embedded;
+        };
+        let unembed = src => {
+            src = Path.join('/', src);
+            let embedded = dom.window.document.querySelector(`script[src="${src}"][by="${by}"]`);
+            if (embedded) {
+                embedded.remove();
+                touched = true;
+            }
+        };
+        embedList.reverse().reduce((prev, src) => {
+            return embed(src, prev);
+        }, dom.window.document.querySelector(`script[src]`) || dom.window.document.querySelector(`script`));
+        unembedList.forEach(src => {
+            unembed(src);
+        });
+        if (touched) {
+            Fs.writeFileSync(targetDocumentFile, dom.serialize());
+            successLevel = 2;
         }
     }
+    return successLevel;
 }

package/src/runtime-pi/client/oohtml/namespacing.js

@@ -0,0 +1,7 @@
+
+/**
+ * @imports
+ */
+import { NamespacedHTML } from '@webqit/oohtml-ssr/apis.js';
+
+NamespacedHTML.call( window );

package/src/runtime-pi/client/oohtml/scripting.js

@@ -0,0 +1,8 @@
+
+/**
+ * @imports
+ */
+import { StateAPI, Subscript } from '@webqit/oohtml-ssr/apis.js';
+
+StateAPI.call( window );
+Subscript.call( window );

package/src/runtime-pi/client/oohtml/templating.js

@@ -0,0 +1,8 @@
+
+/**
+ * @imports
+ */
+import { HTMLModules, HTMLImports } from '@webqit/oohtml-ssr/apis.js';
+
+HTMLModules.call( window );
+HTMLImports.call( window );

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

@@ -5,6 +5,7 @@
 import { _any } from '@webqit/util/arr/index.js';
 import { HttpEvent, Request, Response, Observer } from '../Runtime.js';
 import { urlPattern } from '../../util.js';
+import Workport from './Workport.js';
 
 /**
  * ---------------------------
@@ -43,7 +44,7 @@ export default class Worker {
 				// Add files to cache
 				evt.waitUntil( self.caches.open(this.cx.params.cache_name).then(cache => {
 					if (this.cx.logger) { this.cx.logger.log('[ServiceWorker] Pre-caching resources.'); }
-					const cache_only_urls = (this.cx.params.cache_only_urls || []).map(c => c.trim()).filter(c => c && !c.endsWith('/') && !urlPattern(c, self.origin).isPattern());
+					const cache_only_urls = (this.cx.params.cache_only_urls || []).map(c => c.trim()).filter(c => c && !urlPattern(c, self.origin).isPattern());
 					return cache.addAll(cache_only_urls);
 				}) );
 			}
@@ -71,11 +72,13 @@ export default class Worker {
 		});
 
 		// -------------
-		// ONFETCH		
+		// ONFETCH
 		self.addEventListener('fetch', event => {
 			// URL schemes that might arrive here but not supported; e.g.: chrome-extension://
 			if (!event.request.url.startsWith('http')) return;
 			event.respondWith((async (req, evt) => {
+				let requestingClient = await self.clients.get(event.clientId);
+				this.workport.setCurrentClient(requestingClient);
 				const requestInit = [
 					'method', 'headers', 'mode', 'credentials', 'cache', 'redirect', 'referrer', 'integrity',
 				].reduce((init, prop) => ({ [prop]: req[prop], ...init }), {});
@@ -93,6 +96,33 @@ export default class Worker {
 			})(event.request, event));
 		});
 
+		// -------------
+		// Workport
+		let workport = new Workport();
+		Observer.set(this, 'workport', workport);
+		workport.messaging.listen(async evt => {
+			let responsePort = evt.ports[0];
+			let client = this.clients.get('*');
+			let response = client.alert && await client.alert(evt);
+			if (responsePort) {
+				if (response instanceof Promise) {
+					response.then(data => {
+						responsePort.postMessage(data);
+					});
+				} else {
+					responsePort.postMessage(response);
+				}
+			}
+		});
+		workport.notifications.listen(async evt => {
+			let client = this.clients.get('*');
+			client.alert && await client.alert(evt);
+		});
+		workport.push.listen(async evt => {
+			let client = this.clients.get('*');
+			client.alert && await client.alert(evt);
+		});
+
 		// ---------------
         Observer.set(this, 'location', {});
         Observer.set(this, 'network', {});
@@ -163,22 +193,26 @@ export default class Worker {
 		}
 		const matchUrl = (patterns, url) => _any((patterns || []).map(p => p.trim()).filter(p => p), p => urlPattern(p, self.origin).test(url));
 		const execFetch = () => {
-			if (matchUrl(this.cx.params.cache_only_urls, request.url)) {
-				Observer.set(this.network, 'strategy', 'cache-only');
-				return this.cacheFetch(request, { networkFallback: false, cacheRefresh: false });
+			// network_first_urls
+			if (!this.cx.params.default_fetching_strategy || this.cx.params.default_fetching_strategy === 'network-first' || matchUrl(this.cx.params.network_first_urls, request.url)) {
+				Observer.set(this.network, 'strategy', 'network-first');
+				return this.networkFetch(request, { cacheFallback: true, cacheRefresh: true });
+			}
+			// cache_first_urls
+			if (this.cx.params.default_fetching_strategy === 'cache-first' || matchUrl(this.cx.params.cache_first_urls, request.url)) {
+				Observer.set(this.network, 'strategy', 'cache-first');
+				return this.cacheFetch(request, { networkFallback: true, cacheRefresh: true });
 			}
 			// network_only_urls
-			if (matchUrl(this.cx.params.network_only_urls, request.url)) {
+			if (this.cx.params.default_fetching_strategy === 'network-only' || matchUrl(this.cx.params.network_only_urls, request.url)) {
 				Observer.set(this.network, 'strategy', 'network-only');
 				return this.networkFetch(request, { cacheFallback: false, cacheRefresh: false });
 			}
-			// cache_first_urls
-			if (matchUrl(this.cx.params.cache_first_urls, request.url)) {
-				Observer.set(this.network, 'strategy', 'cache-first');
-				return this.cacheFetch(request, { networkFallback: true, cacheRefresh: true });
+			// cache_only_urls
+			if (this.cx.params.default_fetching_strategy === 'cache-only' || matchUrl(this.cx.params.cache_only_urls, request.url)) {
+				Observer.set(this.network, 'strategy', 'cache-only');
+				return this.cacheFetch(request, { networkFallback: false, cacheRefresh: false });
 			}
-			Observer.set(this.network, 'strategy', 'network-first');
-			return this.networkFetch(request, { cacheFallback: true, cacheRefresh: true });
 		};
 		let response = execFetch(request);
 		// This catch() is NOT intended to handle failure of the fetch
@@ -187,18 +221,6 @@ export default class Worker {
 		return response.then(_response => Response.compat(_response));
 	}
 
-	// Caching strategy: cache_first
-	cacheFetch(request, params = {}) {
-		return this.getRequestCache(request).then(cache => cache.match(request).then(response => {
-			// Nothing cache, use network
-			if (!response && params.networkFallback) return this.networkFetch(request, { ...params, cacheFallback: false });
-			// Note: fetch, but for refreshing purposes only... not the returned response
-			if (response && params.cacheRefresh) this.networkFetch(request, { ...params, justRefreshing: true });
-			Observer.set(this.network, 'cache', true);
-			return response;
-		}));
-	}
-
 	// Caching strategy: network_first
 	networkFetch(request, params = {}) {
 		if (!params.cacheFallback) {
@@ -215,6 +237,18 @@ export default class Worker {
 		}));
 	}
 
+	// Caching strategy: cache_first
+	cacheFetch(request, params = {}) {
+		return this.getRequestCache(request).then(cache => cache.match(request).then(response => {
+			// Nothing cache, use network
+			if (!response && params.networkFallback) return this.networkFetch(request, { ...params, cacheFallback: false });
+			// Note: fetch, but for refreshing purposes only... not the returned response
+			if (response && params.cacheRefresh) this.networkFetch(request, { ...params, justRefreshing: true });
+			Observer.set(this.network, 'cache', true);
+			return response;
+		}));
+	}
+
 	// Caches response 
 	refreshCache(request, response) {
 		// Check if we received a valid response