cyberia 3.2.5 → 3.2.12

package/src/client/components/core/Worker.js

@@ -1,59 +1,44 @@
 /**
- * Utility class for managing Progressive Web App (PWA) worker functionalities,
- * including service worker registration, caching, and notification management.
- * This class is designed to be used as a singleton instance (exported as 'Worker').
+ * Progressive Web App (PWA) worker integration: service worker lifecycle,
+ * cache management, and the bootstrap path that wires the app's router,
+ * shell, translation, sockets, and session components together.
+ *
+ * The public surface is a single `PwaWorker` class with one shared instance,
+ * re-exported as `Worker` for backward compatibility.
+ *
  * @module src/client/components/core/Worker.js
  * @namespace PwaWorker
  */
 
 import { BtnIcon } from './BtnIcon.js';
-import { s4 } from './CommonJs.js';
 import { EventsUI } from './EventsUI.js';
 import { LoadingAnimation } from './LoadingAnimation.js';
 import { loggerFactory } from './Logger.js';
-import { LoadRouter } from './Router.js';
-import { Translate } from './Translate.js';
+import { LoadRouter, registerRoutes, getProxyPath } from './Router.js';
+import { Translate, TranslateCore } from './Translate.js';
 import { s } from './VanillaJs.js';
-import { getProxyPath } from './Router.js';
+import { Css } from './Css.js';
+import { Responsive } from './Responsive.js';
+import { SocketIo } from './SocketIo.js';
+import { Keyboard } from './Keyboard.js';
+
 const logger = loggerFactory(import.meta);
 
+const SW_URL = () => `${getProxyPath()}sw.js`;
+
 /**
- * Manages the PWA lifecycle, service workers, and related client-side events.
  * @memberof PwaWorker
  */
 class PwaWorker {
-  /**
-   * The application title, usually from the <title> tag content.
-   * @type {string}
-   */
+  /** App title sourced from <title>. @type {string} */
   title = '';
 
-  /**
-   * Tracks if notification permission has been granted and is active.
-   * @type {boolean}
-   */
-  notificationActive = false;
-
-  /**
-   * A function reference to the service worker's update method (registration.update()),
-   * dynamically set upon successful registration status check.
-   * @type {function(): Promise<void>}
-   */
-  updateServiceWorker = async () => {};
-
-  /**
-   * Router instance reference, initialized during the `instance` call.
-   * @type {object | null}
-   */
+  /** Router instance reference, set during bootstrap. @type {object | null} */
   RouterInstance = null;
 
-  /**
-   * Creates an instance of PwaWorker and initializes the application title.
-   * @memberof PwaWorker
-   */
   constructor() {
     this.title = `${s('title').textContent}`;
-    if (!window.renderPayload.dev) {
+    if (!window.renderPayload?.dev) {
       console.log = () => null;
       console.error = () => null;
       console.info = () => null;
@@ -61,36 +46,47 @@ class PwaWorker {
     }
   }
 
+  /** @returns {boolean} True when running on localhost or with renderPayload.dev. */
+  devMode() {
+    return Boolean(
+      window.renderPayload?.dev || location.origin.match('localhost') || location.origin.match('127.0.0.1'),
+    );
+  }
+
   /**
-   * Checks if the application is running in development mode (localhost or 127.0.0.1).
-   * @method devMode
-   * @memberof PwaWorker
-   * @returns {boolean} True if in development mode.
+   * Awaits a component's `instance()` method, a plain function, or an array of either.
+   * Used by `instance()` to keep the bootstrap declarative.
+   * @private
    */
-  devMode() {
-    return window.renderPayload.dev || location.origin.match('localhost') || location.origin.match('127.0.0.1');
+  async #initComponent(component, options) {
+    if (!component) return;
+    if (Array.isArray(component)) {
+      for (const item of component) await this.#initComponent(item, options);
+      return;
+    }
+    if (typeof component.instance === 'function') return void (await component.instance(options));
+    if (typeof component === 'function') await component(options);
   }
 
   /**
-   * Initializes the PWA worker, registers global/worker event listeners,
-   * checks service worker status, and renders the initial content.
-   * This is the main entry point for the worker setup.
-   * @memberof PwaWorker
-   * @param {object} options - Configuration options.
-   * @param {function(): object} options.router - Function to get the router instance.
-   * @param {function(): Promise<void>} options.render - Function to render the application's UI.
+   * Bootstraps the app with a declarative options object. Shared core inits
+   * (Css, TranslateCore, Responsive, SocketIo, Keyboard) run in the correct
+   * order so per-app entrypoints only declare what's app-specific.
+   *
+   * @param {object} options
+   * @param {function|object}             options.router       Router class (with static `instance()`) or factory.
+   * @param {function(): Promise<string>} [options.template]   Async function returning the landing HTML body.
+   * @param {Array}                       [options.themes]     CSS theme list passed to `Css.loadThemes()`.
+   * @param {object|Array}                [options.translate]  App-level translation class(es).
+   * @param {object}                      [options.render]     AppShell class with `instance({ htmlMainBody })`.
+   * @param {string}                      [options.socketPath] Socket.IO path override.
+   * @param {object}                      [options.appStore]   AppStore whose `.Data` supplies socket channels.
+   * @param {object}                      [options.session]    `{ socket, login, signout|logout, signup, account }`.
    * @returns {Promise<void>}
    */
-  async instance({ router, render }) {
-    window.ononline = async () => {
-      logger.warn('ononline');
-    };
-    window.onoffline = async () => {
-      logger.warn('onoffline');
-    };
-    setTimeout(() => {
-      if ('onLine' in navigator && navigator.onLine) window.ononline();
-    });
+  async instance({ router, template, themes, translate, render, socketPath, appStore, session }) {
+    window.ononline = () => logger.warn('ononline');
+    window.onoffline = () => logger.warn('onoffline');
 
     if ('serviceWorker' in navigator) {
       navigator.serviceWorker.addEventListener('controllerchange', () => {
@@ -98,281 +94,220 @@ class PwaWorker {
       });
       navigator.serviceWorker.ready.then((worker) => {
         logger.info('Service Worker Ready', worker);
-
-        // event message listener
         navigator.serviceWorker.addEventListener('message', (event) => {
           logger.info('Received event message', event.data);
-          const { status } = event.data;
+          if (event.data?.status === 'loader') LoadingAnimation.RenderCurrentSrcLoad(event);
+        });
+      });
+    }
 
-          switch (status) {
-            case 'loader':
-              {
-                LoadingAnimation.RenderCurrentSrcLoad(event);
-              }
-              break;
+    this.RouterInstance = typeof router?.instance === 'function' ? router.instance() : router();
+    if (this.RouterInstance?.Routes) registerRoutes(this.RouterInstance.Routes);
 
-            default:
-              break;
-          }
-        });
+    // Defer SW registration out of the render critical path. Firefox in
+    // particular pays a non-trivial IPC cost for SW registration; running it
+    // after `load` keeps first paint unblocked across all engines.
+    this.#registerDeferred();
 
-        // if (navigator.serviceWorker.controller)
-        //   navigator.serviceWorker.controller.postMessage({
-        //     title: 'Hello from Client event message',
-        //   });
+    // Shared core inits — keep order: theme → translation → responsive → shell.
+    if (themes) await Css.loadThemes(themes);
+    await this.#initComponent(TranslateCore);
+    await this.#initComponent(translate);
+    await this.#initComponent(Responsive);
 
-        // broadcast message
-        // const channel = new BroadcastChannel('sw-messages');
-        // channel.addEventListener('message', (event) => {
-        //   logger.info('Received broadcast message', event.data);
-        // });
-        // channel.postMessage({ title: 'Hello from Client broadcast message' });
-        // channel.close();
-      });
+    if (render && typeof render.instance === 'function') {
+      const htmlMainBody = typeof template === 'function' ? template : undefined;
+      await this.#initComponent(render, htmlMainBody ? { htmlMainBody } : undefined);
     }
 
-    this.RouterInstance = router();
-    const isInstall = await this.status();
-    if (!isInstall) await this.install();
-    await render();
+    const channels = appStore?.Data ?? session?.socket?.Data;
+    await this.#initComponent(SocketIo, { channels, path: socketPath });
+
+    if (session) {
+      await this.#initComponent(session.socket);
+      await this.#initComponent(session.login);
+      await this.#initComponent(session.logout || session.signout);
+      await this.#initComponent(session.signup);
+      await this.#initComponent(session.account);
+    }
+
+    await this.#initComponent(Keyboard);
     await LoadRouter(this.RouterInstance);
     LoadingAnimation.removeSplashScreen();
-    if (this.devMode()) {
-      // const delayLiveReload = 1250;
-      // window.addEventListener('visibilitychange', () => {
-      //   if (document.visibilityState === 'visible') {
-      //     this.reload(delayLiveReload);
-      //   }
-      // });
-      // window.addEventListener('focus', () => {
-      //   this.reload(delayLiveReload);
-      // });
-    }
     window.serviceWorkerReady = true;
   }
 
   /**
-   * Gets the current service worker registration.
-   * @memberof PwaWorker
-   * @returns {Promise<ServiceWorkerRegistration | undefined>} The service worker registration object, or undefined.
+   * Schedules SW registration to run after page `load` (or immediately if
+   * the page is already loaded). Idempotent: existing registrations are
+   * left alone; missing ones are registered.
+   * @private
    */
-  async getRegistration() {
-    return navigator.serviceWorker.getRegistration();
+  #registerDeferred() {
+    if (!('serviceWorker' in navigator)) {
+      logger.warn('Service Worker disabled in browser');
+      return;
+    }
+    const run = async () => {
+      const registration = await this.getRegistration();
+      if (!registration) await this.register();
+    };
+    if (document.readyState === 'complete') run();
+    else window.addEventListener('load', run, { once: true });
   }
 
-  /**
-   * Forces the current service worker to skip waiting and reloads the page
-   * to apply the new service worker immediately.
-   * @memberof PwaWorker
-   * @param {number} [timeOut=3000] - Delay in milliseconds before reloading the page.
-   * @returns {Promise<void>} A promise that resolves after the page is reloaded.
-   */
-  async reload(timeOut = 3000) {
-    return new Promise((resolve) => {
-      if (navigator.serviceWorker && navigator.serviceWorker.controller) {
-        navigator.serviceWorker.controller.postMessage({
-          status: 'skipWaiting',
-        });
-      }
-      setTimeout(() => resolve(location.reload()), timeOut);
-    });
+  /** Returns the current service worker registration, if any. */
+  getRegistration() {
+    return 'serviceWorker' in navigator ? navigator.serviceWorker.getRegistration() : Promise.resolve(undefined);
   }
 
-  /**
-   * Updates the application by clearing specific caches and running the service worker update logic.
-   * Cache names matching 'components/', 'services/', or '.index.js' are deleted.
-   * @memberof PwaWorker
-   * @returns {Promise<void>}
-   */
-  async update() {
-    const isInstall = await this.status();
-    if (isInstall) {
-      const cacheNames = await caches.keys();
-      for (const cacheName of cacheNames) {
-        if (cacheName.match('components/') || cacheName.match('services/') || cacheName.match('.index.js')) {
-          await caches.delete(cacheName);
-        }
-      }
-      await this.updateServiceWorker();
+  /** Registers `sw.js` with the browser. Resolves with the registration (or `null` on failure). */
+  async register() {
+    if (!('serviceWorker' in navigator)) {
+      logger.warn('Service Worker disabled in browser');
+      return null;
+    }
+    try {
+      const registration = await navigator.serviceWorker.register(SW_URL());
+      logger.warn('Service Worker registered', registration);
+      return registration;
+    } catch (error) {
+      logger.error('Error registering service worker:', error);
+      return null;
     }
   }
 
   /**
-   * Checks the current status of all service worker registrations and sets the
-   * `updateServiceWorker` function reference if an active worker is found.
-   * @memberof PwaWorker
-   * @returns {Promise<boolean>} True if at least one service worker is registered.
+   * Reloads the page, asking the active SW to skip waiting first so the
+   * new version takes effect on the next load.
+   * @param {number} [delay=3000] Milliseconds before reload.
    */
-  status() {
-    let status = false;
-    return new Promise((resolve) => {
-      if ('serviceWorker' in navigator) {
-        navigator.serviceWorker
-          .getRegistrations()
-          .then((registrations) => {
-            for (const registration of registrations) {
-              if (registration.installing) logger.info('installing', registration);
-              else if (registration.waiting) logger.info('waiting', registration);
-              else if (registration.active) {
-                logger.info('active', registration);
-                // Dynamically set the update function
-                this.updateServiceWorker = async () => await registration.update();
-              }
-            }
-            if (registrations.length > 0) status = true;
-            resolve(status);
-          })
-          .catch((...args) => {
-            logger.error('Error getting service worker registrations:', ...args);
-            resolve(false);
-          });
-      } else {
-        logger.warn('Service Worker Disabled in browser');
-        resolve(false);
-      }
-    });
+  async reload(delay = 3000) {
+    navigator.serviceWorker?.controller?.postMessage({ status: 'skipWaiting' });
+    return new Promise((resolve) => setTimeout(() => resolve(location.reload()), delay));
+  }
+
+  /** Deletes every cache visible to the SW. Returns the number of caches removed. */
+  async clearAllCaches() {
+    const names = await caches.keys();
+    await Promise.all(names.map((name) => caches.delete(name)));
+    return names.length;
   }
 
   /**
-   * Registers the service worker (`sw.js`) with the browser.
-   * @memberof PwaWorker
-   * @returns {Promise<Array<any>>} A promise that resolves with the registration arguments.
+   * Deletes Workbox/background-sync IndexedDB databases that may pin stale state
+   * across reloads. Safe no-op in browsers without `indexedDB.databases`.
    */
-  install() {
-    return new Promise((resolve) => {
-      if ('serviceWorker' in navigator) {
-        navigator.serviceWorker
-          .register(`${getProxyPath()}sw.js`, {
-            type: 'module',
-          })
-          .then((...args) => {
-            logger.warn('Service Worker Registered', args);
-            resolve(args);
-          })
-          .catch((...args) => {
-            logger.error('Error registering service worker:', ...args);
-            resolve(args);
-          });
-      } else {
-        logger.warn('Service Worker Disabled in browser');
-        resolve([]);
-      }
-    });
+  async clearWorkboxIndexedDb() {
+    if (!('indexedDB' in window) || typeof indexedDB.databases !== 'function') return 0;
+    const databases = await indexedDB.databases();
+    const targets = databases
+      .map((db) => db.name)
+      .filter(
+        (name) =>
+          typeof name === 'string' &&
+          (name.toLowerCase().includes('workbox') ||
+            name.toLowerCase().includes('background-sync') ||
+            name.includes('api-mutation-queue')),
+      );
+
+    await Promise.all(
+      targets.map(
+        (name) =>
+          new Promise((resolve) => {
+            const req = indexedDB.deleteDatabase(name);
+            req.onsuccess = () => resolve(true);
+            req.onerror = () => resolve(false);
+            req.onblocked = () => resolve(false);
+          }),
+      ),
+    );
+    return targets.length;
   }
 
   /**
-   * Unregisters all service workers and deletes all application caches.
-   * @memberof PwaWorker
-   * @returns {Promise<Array<any>>} A promise that resolves after uninstallation.
+   * Asks the active SW to drop its caches and confirm. Resolves `false`
+   * after 1500 ms if the SW does not reply.
    */
-  uninstall() {
-    return new Promise(async (resolve) => {
-      if ('serviceWorker' in navigator) {
-        try {
-          const registrations = await navigator.serviceWorker.getRegistrations();
-          const cacheNames = await caches.keys();
-          for (const cacheName of cacheNames) await caches.delete(cacheName);
-          for (const registration of registrations) {
-            logger.info('Removing service worker registration', registration);
-            registration.unregister();
-          }
-          resolve([]);
-        } catch (error) {
-          logger.error('Error during service worker uninstallation:', error);
-          resolve([error]);
-        }
-      } else {
-        logger.warn('Service Worker Disabled in browser');
-        resolve([]);
-      }
+  async requestWorkboxReset() {
+    if (!navigator.serviceWorker?.controller) return false;
+    return new Promise((resolve) => {
+      const channel = new MessageChannel();
+      const timeoutId = setTimeout(() => resolve(false), 1500);
+      channel.port1.onmessage = (event) => {
+        clearTimeout(timeoutId);
+        resolve(event.data?.status === 'workbox-reset-done');
+      };
+      navigator.serviceWorker.controller.postMessage({ status: 'workbox-reset' }, [channel.port2]);
     });
   }
 
   /**
-   * Requests permission from the user to display notifications.
-   * Sets the internal `notificationActive` state.
-   * @memberof PwaWorker
-   * @returns {Promise<boolean>} True if permission is granted, false otherwise.
+   * Targeted cache invalidation: removes app-shell entries for components,
+   * services, and index bundles, then forces the SW registration to update.
+   * Cheaper than a full reset; used as the default "Update" action.
    */
-  notificationRequestPermission() {
-    return new Promise((resolve) =>
-      Notification.requestPermission().then((result) => {
-        if (result === 'granted') {
-          this.notificationActive = true;
-          resolve(true);
-        } else {
-          this.notificationActive = false;
-          resolve(false);
-        }
-      }),
-    );
+  async update() {
+    const registration = await this.getRegistration();
+    if (!registration) return;
+    const names = await caches.keys();
+    for (const name of names) {
+      if (name.match('components/') || name.match('services/') || name.match('.index.js')) {
+        await caches.delete(name);
+      }
+    }
+    await registration.update();
   }
 
-  /**
-   * Shows a sample notification if permission is granted.
-   * @memberof PwaWorker
-   * @returns {void}
-   */
-  notificationShow() {
-    Notification.requestPermission().then((result) => {
-      if (result === 'granted') {
-        navigator.serviceWorker.ready.then((registration) => {
-          registration.showNotification('Vibration Sample', {
-            body: 'Buzz! Buzz!',
-            icon: '../images/touch/chrome-touch-icon.png',
-            vibrate: [200, 100, 200, 100, 200, 100, 200],
-            tag: 'vibration-sample',
-            requireInteraction: true,
-          });
-        });
+  /** Unregisters all SWs and drops every cache. */
+  async unregister() {
+    if (!('serviceWorker' in navigator)) {
+      logger.warn('Service Worker disabled in browser');
+      return;
+    }
+    try {
+      const registrations = await navigator.serviceWorker.getRegistrations();
+      await this.clearAllCaches();
+      for (const registration of registrations) {
+        logger.info('Removing service worker registration', registration);
+        registration.unregister();
       }
-    });
+    } catch (error) {
+      logger.error('Error during service worker unregistration:', error);
+    }
   }
 
-  /**
-   * Renders the UI for PWA settings, including buttons for cleaning cache and worker management.
-   * It also attaches the click handler for the 'clean-cache' button.
-   * @memberof PwaWorker
-   * @returns {Promise<string>} The HTML string for the settings section.
-   */
+  /** Full reset: workbox runtime + SW + client storage. Use when caches are visibly stale. */
+  async resetAndRestart() {
+    localStorage.clear();
+    sessionStorage.clear();
+    await this.requestWorkboxReset();
+    await this.unregister();
+    await this.clearAllCaches();
+    await this.clearWorkboxIndexedDb();
+    await this.register();
+    await this.reload(600);
+  }
+
+  /** Settings panel UI: a single "clean cache" action wired to `resetAndRestart`. */
   async RenderSetting() {
     setTimeout(() => {
-      // Event listener for the clean cache button
       EventsUI.onClick(`.btn-clean-cache`, async (e) => {
         e.preventDefault();
-        // Clear local storage, uninstall the worker, and reload
-        localStorage.clear();
-        await this.uninstall();
-        await this.reload();
+        await this.resetAndRestart();
       });
     });
     return html` <div class="in">
-      ${await BtnIcon.Render({
-        class: 'inl section-mp btn-custom btn-install-service-controller hide',
-        label: html`<i class="fas fa-download"></i> ${Translate.Render('Install control service')}`,
-      })}
-      ${await BtnIcon.Render({
-        class: 'inl section-mp btn-custom btn-uninstall-service-controller hide',
-        label: html`<i class="far fa-trash-alt"></i> ${Translate.Render('Uninstall control service')}`,
-      })}
-      ${await BtnIcon.Render({
+      ${await BtnIcon.instance({
         class: 'inl section-mp btn-custom btn-clean-cache',
-        label: html`<i class="fa-solid fa-broom"></i> ${Translate.Render('clean-cache')}`,
-      })}
-      ${await BtnIcon.Render({
-        class: 'inl section-mp btn-custom btn-reload hide',
-        label: html`<i class="fas fa-sync-alt"></i> ${Translate.Render('Reload')}`,
+        label: html`<i class="fa-solid fa-broom"></i> ${Translate.instance('clean-cache')}`,
       })}
     </div>`;
   }
 }
 
-// Create the singleton instance
 const PwaWorkerInstance = new PwaWorker();
 
-// Export the new class name for modern usage
 export { PwaWorker };
-
-// Export the instance with the old name (`Worker`) for backward compatibility,
-// ensuring existing code consuming the module continues to work.
+// Backward-compat alias — older code imports the singleton as `Worker`.
 export { PwaWorkerInstance as Worker };

package/src/client/components/core/windowGetDimensions.js

@@ -149,23 +149,23 @@ export class PwaWindowDimensions {
    * Get the best-available viewport height in pixels.
    *
    * Priority (from most reliable for "visible" to least):
-   * 1. window.visualViewport.height (if `preferVisualViewport` is true)
-   * 2. document.documentElement.clientHeight (Layout viewport)
-   * 3. window.innerHeight (Window size)
-   * 4. document.body.clientHeight (Body size)
-   * 5. window.visualViewport.height (if `preferVisualViewport` is false)
+   * 1. document.documentElement.clientHeight (Layout viewport, default — stable against iframe scrolls)
+   * 2. window.innerHeight (Window size)
+   * 3. document.body.clientHeight (Body size)
+   * 4. window.visualViewport.height (if `preferVisualViewport` is true; first priority; or last before screen fallbacks)
+   * 5. window.visualViewport.height (if `preferVisualViewport` is false — used as fallback after layout values)
    * 6. window.screen.availHeight / window.screen.height (Physical screen)
    * 7. window.outerHeight (Last resort)
    *
    * @memberof PwaWindowDimensions
    * @static
    * @param {Object} [options]
-   * @param {boolean} [options.preferVisualViewport=true] - When true, visualViewport is checked first (best for visible screen size, e.g., above mobile keyboard).
+   * @param {boolean} [options.preferVisualViewport=false] - When true, visualViewport is checked first (best for visible screen size, e.g., above mobile keyboard). Defaults to false to use stable layout viewport height, preventing Chrome iframe scroll from causing transient visualViewport changes that affect modal sizing.
    * @returns {number|null} Height in px (rounded integer) or null if none found.
    * @memberof PwaWindowDimensions
    */
   static getH(options = {}) {
-    const { preferVisualViewport = true } = options;
+    const { preferVisualViewport = false } = options;
 
     const vv = PwaWindowDimensions.#getFromVisualViewport();
     const de = PwaWindowDimensions.#getFromDocumentElement();