@webqit/webflo 0.11.61-0 → 1.0.0

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

@@ -1,178 +1,118 @@
-
-
-/**
- * @imports
- */
-import { _isFunction, _isObject } from '@webqit/util/js/index.js';
-import { Observer } from './Runtime.js';
-
-export default class Workport {
-
-    constructor(file, params = {}) {
-        this.ready = navigator.serviceWorker ? navigator.serviceWorker.ready : new Promise(() => {});
-
-        // --------
-        // Registration and lifecycle
-        // --------
-        this.registration = new Promise((resolve, reject) => {
-            if (!navigator.serviceWorker) return;
-            const register = () => {
-                navigator.serviceWorker.register(file, { scope: params.scope || '/' }).then(async registration => {
-
-                    // Helper that updates instance's state
-                    const state = target => {
-                        // instance2.state can be any of: "installing", "installed", "activating", "activated", "redundant"
-                        const equivState = target.state === 'installed' ? 'waiting' : 
-                            (target.state === 'activating' || target.state === 'activated' ? 'active' : target.state)
-                        Observer.set(this, equivState, target);
-                    }
-
-                    // We're always installing at first for a new service worker.
-                    // An existing service would immediately be active
-                    const worker = registration.active || registration.waiting || registration.installing;
-                    state(worker);
-                    worker.addEventListener('statechange', e => state(e.target));
-                    
-                    // "updatefound" event - a new worker that will control
-                    // this page is installing somewhere
-                    registration.addEventListener('updatefound', () => {
-                        // If updatefound is fired, it means that there's
-                        // a new service worker being installed.
-                        state(registration.installing);
-                        registration.installing.addEventListener('statechange', e => state(e.target));
-                    });
-                    
-                    resolve(registration);
-                }).catch(e => reject(e));
-            };
-            if (params.onWindowLoad) {
-                window.addEventListener('load', register);
-            } else {
-                register();
-            }
-            if (params.startMessages) {
-                navigator.serviceWorker.startMessages();
-            }
-        });
-
-        // --------
-        // Post messaging
-        // --------
-        const postSendCallback = (message, callback, onAvailability = 1) => {
-            if (this.active) {
-                if (_isFunction(message)) message = message();
-                callback(this.active, message);
-            } else if (onAvailability) {
-                // Availability Handling
-                const availabilityHandler = entry => {
-                    if (_isFunction(message)) message = message();
-                    callback(entry.value, message);
-                    if (onAvailability !== 2) {
-                        Observer.unobserve(this, 'active', availabilityHandler);
-                    }
-                };
-                Observer.observe(this, 'active', availabilityHandler);
-            }
-        };
-        this.messaging = {
-            post: (message, onAvailability = 1) => {
-                postSendCallback(message, (active, message) => {
-                    active.postMessage(message);
-                }, onAvailability);
-                return this.post;
-            },
-            listen: callback => {
-                if (navigator.serviceWorker) {
-                    navigator.serviceWorker.addEventListener('message', evt => {
-                        const response = callback(evt);
-                        let responsePort = evt.ports[0];
-                        if (responsePort) {
-                            if (response instanceof Promise) {
-                                response.then(data => {
-                                    responsePort.postMessage(data);
-                                });
-                            } else {
-                                responsePort.postMessage(response);
-                            }
-                        }
-                    });
-                }
-                return this.post;
-            },
-            request: (message, onAvailability = 1) => {
-                return new Promise(res => {
-                    postSendCallback(message, (active, message) => {
-                        let messageChannel = new MessageChannel();
-                        active.postMessage(message, [ messageChannel.port2 ]);
-                        messageChannel.port1.onmessage = e => res(e.data);
-                    }, onAvailability);
-                });
-            },
-            channel(channelId) {
-                if (!this.channels.has(channelId)) { this.channels.set(channelId, new BroadcastChannel(channel)); }
-                let channel = this.channels.get(channelId);
-                return {
-                    broadcast: message => channel.postMessage(message),
-                    listen: callback => channel.addEventListener('message', callback),
-                };
-            },
-            channels: new Map,
-        };
-
-        // --------
-        // Notifications
-        // --------
-        this.notifications = {
-            fire: (title, params = {}) => {
-                return new Promise((res, rej) => {
-                    if (typeof Notification === 'undefined' || Notification.permission !== 'granted') {
-                        return rej(typeof Notification !== 'undefined' && Notification && Notification.permission);
-                    }
-                    notification.addEventListener('error', rej);
-                    let notification = new Notification(title, params);
-                    notification.addEventListener('click', res);
-                    notification.addEventListener('close', res);
-                });
-            },
-        };
-
-        // --------
-        // Push notifications
-        // --------
-        this.push = {
-            getSubscription: async () => {
-                return (await this.registration).pushManager.getSubscription();
-            },
-            subscribe: async (publicKey, params = {}) => {
-                var subscription = await this.push.getSubscription();
-                return subscription ? subscription : (await this.registration).pushManager.subscribe(
-                    _isObject(publicKey) ? publicKey : {
-                        applicationServerKey: urlBase64ToUint8Array(publicKey),
-                        ...params,
-                    }
-                );
-            },
-            unsubscribe: async () => {
-                var subscription = await this.push.getSubscription();
-                return !subscription ? null : subscription.unsubscribe();
-            },
-        };
-    }
-
-}
-
-// 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 Workport {
+
+    #swFile;
+    #swParams = {};
+
+    #swReady;
+    get swReady() { return this.#swReady; }
+    #swRegistration;
+
+    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 || '/' });
+        // 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);
+            }
+        }
+        // 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));
+            // "updatefound" event - a new worker that will control
+            // this page is installing somewhere
+            this.#swRegistration.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));
+            });
+        }
+    }
+
+    async requestNotificationPermission() {
+        return await new Promise(async (resolve, reject) => {
+            const permissionResult = Notification.requestPermission(resolve);
+            if (permissionResult) {
+                permissionResult.then(resolve, reject);
+            }
+        });
+    }
+
+    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)
+                });
+            }
+        }
+        return subscription;
+    }
+
+    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)
+                });
+            }
+        }
+    }
+}
+
+// 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;
+}