underpost 2.8.884 → 2.8.886

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

@@ -1,3 +1,11 @@
+/**
+ * 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').
+ * @module src/client/components/core/Worker.js
+ * @namespace PwaWorker
+ */
+
 import { BtnIcon } from './BtnIcon.js';
 import { s4 } from './CommonJs.js';
 import { EventsUI } from './EventsUI.js';
@@ -9,11 +17,64 @@ import { s } from './VanillaJs.js';
 import { getProxyPath } from './Router.js';
 const logger = loggerFactory(import.meta);
 
-const Worker = {
-  devMode: () => location.origin.match('localhost') || location.origin.match('127.0.0.1'),
-  instance: async function ({ router, render }) {
-    Worker.title = `${s('title').textContent}`;
-    // logger.warn('Init worker', Worker.title);
+/**
+ * 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}
+   */
+  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}
+   */
+  RouterInstance = null;
+
+  /**
+   * Creates an instance of PwaWorker and initializes the application title.
+   * @memberof PwaWorker
+   */
+  constructor() {
+    this.title = `${s('title').textContent}`;
+  }
+
+  /**
+   * Checks if the application is running in development mode (localhost or 127.0.0.1).
+   * @memberof PwaWorker
+   * @returns {boolean} True if in development mode.
+   */
+  devMode() {
+    return location.origin.match('localhost') || location.origin.match('127.0.0.1');
+  }
+
+  /**
+   * 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.
+   * @returns {Promise<void>}
+   */
+  async instance({ router, render }) {
     window.ononline = async () => {
       logger.warn('ononline');
     };
@@ -23,13 +84,15 @@ const Worker = {
     setTimeout(() => {
       if ('onLine' in navigator && navigator.onLine) window.ononline();
     });
+
     if ('serviceWorker' in navigator) {
       navigator.serviceWorker.addEventListener('controllerchange', () => {
         logger.info('The controller of current browsing context has changed.');
       });
       navigator.serviceWorker.ready.then((worker) => {
-        logger.info('Ready', worker);
-        // event message
+        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;
@@ -68,36 +131,53 @@ const Worker = {
     LoadRouter(this.RouterInstance);
     LoadingAnimation.removeSplashScreen();
     if (this.devMode()) {
-      const delayLiveReload = 1250;
-      // Dev mode
-
-      window.addEventListener('visibilitychange', (event) => {
-        // if (document.visibilityState === 'visible') {
-        //   Worker.reload(delayLiveReload);
-        // }
-      });
-      window.addEventListener('focus', function () {
-        // Worker.reload(delayLiveReload);
-      });
+      // 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.
+   */
+  async getRegistration() {
+    return navigator.serviceWorker.getRegistration();
+  }
 
-  // Get the current service worker registration.
-  getRegistration: async function () {
-    return await navigator.serviceWorker.getRegistration();
-  },
-  reload: async function (timeOut = 3000) {
-    return await new Promise((resolve) => {
-      if (navigator.serviceWorker && navigator.serviceWorker.controller)
+  /**
+   * 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',
         });
-      // (location.href = `${location.origin}${location.pathname}${location.search}`)
+      }
       setTimeout(() => resolve(location.reload()), timeOut);
     });
-  },
-  update: async function () {
+  }
+
+  /**
+   * 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();
@@ -108,11 +188,17 @@ const Worker = {
       }
       await this.updateServiceWorker();
     }
-  },
-  updateServiceWorker: async function () {},
-  status: function () {
+  }
+
+  /**
+   * 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.
+   */
+  status() {
     let status = false;
-    return new Promise((resolve, reject) => {
+    return new Promise((resolve) => {
       if ('serviceWorker' in navigator) {
         navigator.serviceWorker
           .getRegistrations()
@@ -122,81 +208,87 @@ const Worker = {
               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(...args);
-            return resolve(false);
-          })
-          .finally((...args) => {
-            logger.info('Finally status', args);
-            return resolve(status);
+            logger.error('Error getting service worker registrations:', ...args);
+            resolve(false);
           });
       } else {
-        logger.warn('Disabled');
-        return resolve(false);
+        logger.warn('Service Worker Disabled in browser');
+        resolve(false);
       }
     });
-  },
-  install: function () {
-    return new Promise((resolve, reject) => {
+  }
+
+  /**
+   * Registers the service worker (`sw.js`) with the browser.
+   * @memberof PwaWorker
+   * @returns {Promise<Array<any>>} A promise that resolves with the registration arguments.
+   */
+  install() {
+    return new Promise((resolve) => {
       if ('serviceWorker' in navigator) {
         navigator.serviceWorker
           .register(`${getProxyPath()}sw.js`, {
-            // scope: getProxyPath(),
-            // scope: '/',
             type: 'module',
           })
           .then((...args) => {
-            logger.warn('Already Registered', args);
+            logger.warn('Service Worker Registered', args);
+            resolve(args);
           })
           .catch((...args) => {
-            logger.error(...args);
-            return resolve(args);
-          })
-          .finally((...args) => {
-            logger.info('Finally install', args);
-            return resolve(args);
+            logger.error('Error registering service worker:', ...args);
+            resolve(args);
           });
       } else {
-        logger.warn('Disabled');
-        return resolve();
+        logger.warn('Service Worker Disabled in browser');
+        resolve([]);
       }
     });
-  },
-  uninstall: function () {
-    return new Promise(async (resolve, reject) => {
+  }
+
+  /**
+   * Unregisters all service workers and deletes all application caches.
+   * @memberof PwaWorker
+   * @returns {Promise<Array<any>>} A promise that resolves after uninstallation.
+   */
+  uninstall() {
+    return new Promise(async (resolve) => {
       if ('serviceWorker' in navigator) {
-        navigator.serviceWorker
-          .getRegistrations()
-          .then(async (registrations) => {
-            const cacheNames = await caches.keys();
-            for (const cacheName of cacheNames) await caches.delete(cacheName);
-            for (const registration of registrations) {
-              logger.info('remove', registration);
-              registration.unregister();
-            }
-          })
-          .catch((...args) => {
-            logger.error(...args);
-            return resolve(args);
-          })
-          .finally((...args) => {
-            logger.info('Finally uninstall', args);
-            return resolve(args);
-          });
+        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('Disabled');
-        return resolve();
+        logger.warn('Service Worker Disabled in browser');
+        resolve([]);
       }
     });
-  },
-  notificationActive: false,
-  notificationRequestPermission: function () {
-    return new Promise((resolve, reject) =>
+  }
+
+  /**
+   * 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.
+   */
+  notificationRequestPermission() {
+    return new Promise((resolve) =>
       Notification.requestPermission().then((result) => {
         if (result === 'granted') {
           this.notificationActive = true;
@@ -207,8 +299,14 @@ const Worker = {
         }
       }),
     );
-  },
-  notificationShow: function () {
+  }
+
+  /**
+   * 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) => {
@@ -217,18 +315,25 @@ const Worker = {
             icon: '../images/touch/chrome-touch-icon.png',
             vibrate: [200, 100, 200, 100, 200, 100, 200],
             tag: 'vibration-sample',
-            requireInteraction: true, //  boolean to manually close the notification
+            requireInteraction: true,
           });
         });
       }
     });
-  },
-  // TODO: GPS management
-  RenderSetting: async function () {
+  }
+
+  /**
+   * 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.
+   */
+  async RenderSetting() {
     setTimeout(() => {
+      // Event listener for the clean cache button
       EventsUI.onClick(`.btn-clean-cache`, async (e) => {
         e.preventDefault();
-        // await this.update();
+        // Clear local storage, uninstall the worker, and reload
         localStorage.clear();
         await this.uninstall();
         await this.reload();
@@ -252,33 +357,15 @@ const Worker = {
         label: html`<i class="fas fa-sync-alt"></i> ${Translate.Render('Reload')}`,
       })}
     </div>`;
-    return;
-    s(`.btn-uninstall-service-controller`).classList.add('hide');
-    EventsUI.onClick(`.btn-install-service-controller`, async (e) => {
-      e.preventDefault();
-      const result = await this.install();
-      s(`.btn-install-service-controller`).classList.add('hide');
-      s(`.btn-uninstall-service-controller`).classList.remove('hide');
-    });
-    EventsUI.onClick(`.btn-uninstall-service-controller`, async (e) => {
-      e.preventDefault();
-      const result = await this.uninstall();
-      s(`.btn-uninstall-service-controller`).classList.add('hide');
-      s(`.btn-install-service-controller`).classList.remove('hide');
-    });
-    EventsUI.onClick(`.btn-reload`, async (e) => {
-      e.preventDefault();
-      location.reload();
-    });
-    const workerStatus = await this.status();
-    if (workerStatus) {
-      s(`.btn-install-service-controller`).classList.add('hide');
-      s(`.btn-uninstall-service-controller`).classList.remove('hide');
-    } else {
-      s(`.btn-uninstall-service-controller`).classList.add('hide');
-      s(`.btn-install-service-controller`).classList.remove('hide');
-    }
-  },
-};
+  }
+}
+
+// Create the singleton instance
+const PwaWorkerInstance = new PwaWorker();
+
+// Export the new class name for modern usage
+export { PwaWorker };
 
-export { Worker };
+// Export the instance with the old name (`Worker`) for backward compatibility,
+// ensuring existing code consuming the module continues to work.
+export { PwaWorkerInstance as Worker };