@geogirafe/lib-geoportal 1.1.0-dev.2507911619 → 1.1.0-dev.2527788074

package/package.json

@@ -5,7 +5,7 @@
     "name": "GeoGirafe PSC",
     "url": "https://doc.geomapfish.dev"
   },
-  "version": "1.1.0-dev.2507911619",
+  "version": "1.1.0-dev.2527788074",
   "type": "module",
   "engines": {
     "node": ">=20.19.0"

package/service-worker.js

@@ -1,11 +1,11 @@
 "use strict";
 // SPDX-License-Identifier: Apache-2.0
 /**
- * To allow offline mode, the first 100 queries made by the application will be cached.
+ * To allow offline mode, the first 300 queries made by the application will be cached.
  * We could have implemented a more specific cache with file extensions for example
  * But then we should define exactly what should be cached.
  * This can be quite complex, because we cannot just cache all images,
- * as some of them are WMTS or WMTS results and others ar icons.
+ * as some of them are WMTS or WMS results and others are icons.
  * So a simple solution here is to cache all the first queries that are done
  * by the application when it starts. With this we should have all the necessary
  * cache to be able to start the application in offline mode
@@ -15,23 +15,37 @@
  */
 const sw = globalThis;
 const currentOrigin = self.location.origin;
-let storeVersion; // Version of the store. Value is defined by OfflineManager.
-let dbCacheName; // Name of the cache for downloaded data. Value is defined by OfflineManager.
-let tilesStoreName; // Name of the store used to downloaded tiles. Value is defined by OfflineManager.
-let logLevel; // Current log level. Value is defined by OfflineManager.
-let audience; // List of domains for which the Authorization Token and cookies should be sent
-let audienceExcludedPaths; // List of regex paths at audience where Authorization Token and cookies should not be sent
-let accessToken; // The current access token
-let loginState; // The current login status
-let authMode; // How the authentication should be sent to the audience
-let refererPolicy; // RefererPolicy used for the queries. Default strict-origin-when-cross-origin
+/**
+ * The service worker state needs to be persisted
+ * because when not using the app, the service worker can be paused by the browser
+ * and in this case it will be reinitialized with the next query
+ * with a base default empty state.
+ * See: https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope
+ */
+const stateDbName = 'geogirafe-sw-state';
+const stateStoreName = 'state';
+const stateKey = 'config';
+let initialized = false;
+let state = {
+    storeVersion: 1,
+    dbCacheName: 'geogirafe-cache',
+    tilesStoreName: 'tiles',
+    logLevel: 'warning',
+    audience: [],
+    audienceExcludedPaths: [],
+    accessToken: undefined,
+    loginState: undefined,
+    authMode: undefined,
+    refererPolicy: undefined
+};
 function isLoggedIn() {
-    return loginState === 'loggedIn' || loginState === 'issuer.loggedIn';
+    return state.loginState === 'loggedIn' || state.loginState === 'issuer.loggedIn';
 }
 const offlineTimeout = 3000; // Timeout in case of not reachable IndexedDB. (3 sec.)
 const appCacheName = 'pages'; // Name of the cache for application pages
 const maxCacheCount = 300; // Number of queries that should be cached by the service-worker for offline usage.
 let cacheCount = 0; // Counter related to the max value above
+let audienceExcludedPathPatterns = []; // list of regex pattern built from state.audienceExcludedPaths
 sw.addEventListener('message', handleMessage);
 sw.addEventListener('install', handleInstall);
 sw.addEventListener('activate', handleActivate);
@@ -43,79 +57,86 @@ sw.addEventListener('fetch', (event) => {
 });
 function handleMessage(event) {
     if (event.origin !== currentOrigin) {
-        console.warn(`Message ignored: origin not allwed (${event.origin}`);
+        console.warn(`Message ignored: origin not allowed (${event.origin})`);
         return;
     }
     const data = event.data;
     if (data.logLevel) {
-        logLevel = data.logLevel;
-        log(`LogLevel changed: ${logLevel}`);
+        state.logLevel = data.logLevel;
+        log(`LogLevel changed: ${state.logLevel}`);
     }
     if (data.tilesStoreName) {
-        tilesStoreName = data.tilesStoreName;
-        log(`tilesStoreName changed: ${tilesStoreName}`);
+        state.tilesStoreName = data.tilesStoreName;
+        log(`tilesStoreName changed: ${state.tilesStoreName}`);
     }
     if (data.storeVersion) {
-        storeVersion = data.storeVersion;
-        log(`storeVersion changed: ${storeVersion}`);
+        state.storeVersion = data.storeVersion;
+        log(`storeVersion changed: ${state.storeVersion}`);
     }
     if (data.dbCacheName) {
-        dbCacheName = data.dbCacheName;
-        log(`dbCacheName changed: ${dbCacheName}`);
+        state.dbCacheName = data.dbCacheName;
+        log(`dbCacheName changed: ${state.dbCacheName}`);
     }
     if (data.audience) {
-        audience = data.audience ?? [];
-        log(`audience changed: ${audience}`);
+        state.audience = data.audience ?? [];
+        log(`audience changed: ${state.audience}`);
     }
-    audienceExcludedPaths = [];
     if (data.audienceExcludedPaths) {
-        audienceExcludedPaths = data.audienceExcludedPaths.map((str) => new RegExp(str));
-        log(`audienceExcludedPaths changed: ${audienceExcludedPaths}`);
+        state.audienceExcludedPaths = data.audienceExcludedPaths;
+        audienceExcludedPathPatterns = state.audienceExcludedPaths.map((str) => new RegExp(str));
+        log(`audienceExcludedPaths changed: ${state.audienceExcludedPaths}`);
     }
     if (data.access_token) {
-        accessToken = data.access_token;
-        log(`access_token changed: ${accessToken}`);
+        state.accessToken = data.access_token;
+        log(`access_token changed: ${state.accessToken}`);
     }
     if (data.clear_access_token) {
-        accessToken = undefined;
+        state.accessToken = undefined;
         log('access_token cleared');
     }
     if (data.authMode) {
-        authMode = data.authMode;
-        log(`authMode changed: ${authMode}`);
+        state.authMode = data.authMode;
+        log(`authMode changed: ${state.authMode}`);
     }
     if (data.refererPolicy) {
-        refererPolicy = data.refererPolicy;
-        log(`refererPolicy changed: ${refererPolicy}`);
+        state.refererPolicy = data.refererPolicy;
+        log(`refererPolicy changed: ${state.refererPolicy}`);
     }
     if (data.loginState) {
-        loginState = data.loginState;
-        log(`loginState changed: ${loginState}`);
+        state.loginState = data.loginState;
+        log(`loginState changed: ${state.loginState}`);
     }
-    if (data.messageId) {
-        // Reply to the message with the same messageId
-        const source = event.source;
-        if (source) {
-            source.postMessage({ messageId: data.messageId, status: 'ServiceWorker updated' });
+    event.waitUntil((async () => {
+        // Persist the service worker state before acknowledging the message.
+        await saveState();
+        if (data.messageId) {
+            const source = event.source;
+            if (source) {
+                source.postMessage({ messageId: data.messageId, status: 'ServiceWorker updated' });
+            }
         }
-    }
+    })());
 }
 function handleInstall() {
     sw.skipWaiting();
-    log('Service Worker installed');
+    log('Service worker installed');
 }
 function handleActivate(event) {
     event.waitUntil((async () => {
-        if ('clients' in self) {
+        if ('clients' in sw) {
+            await sw.clients.claim();
             const clientsList = await sw.clients.matchAll({ type: 'window' });
             for (const client of clientsList) {
                 client.navigate(client.url);
-                log('Page reloaded by the Service Worker.');
+                log('Page reloaded by the service worker.');
             }
         }
     })());
 }
 async function handleFetchEvent(event) {
+    if (!initialized) {
+        await loadState();
+    }
     const newRequest = getRequest(event.request);
     let response = await fetchAndCache(newRequest);
     // Use cache only for GET queries
@@ -125,7 +146,7 @@ async function handleFetchEvent(event) {
             response = await loadFromCache(event.request);
         }
         if (!response) {
-            // Not found in cache. We try to load from indexedDB
+            // Not found in cache. We try to load from IndexedDB.
             response = await loadFromIndexedDB(event.request);
         }
     }
@@ -148,7 +169,7 @@ function isCacheAllowed(request) {
 async function fetchAndCache(request) {
     try {
         const response = await fetch(request);
-        if (cacheCount < maxCacheCount && isCacheAllowed(request) && response.type !== 'opaque') {
+        if (cacheCount < maxCacheCount && isCacheAllowed(request) && response.ok && response.type !== 'opaque') {
             // Fetch was successful. We cache the result if necessary and return the response.
             cacheCount++;
             log(`SW ${cacheCount}/${maxCacheCount} caching ${request.url} for offline use.`);
@@ -169,19 +190,19 @@ function getRequest(request) {
     try {
         const requestedUrl = new URL(request.url);
         const hostname = requestedUrl.hostname;
-        const shouldExclude = audienceExcludedPaths.some((pattern) => pattern.test(requestedUrl.pathname));
-        if (audience?.includes(hostname) && !shouldExclude) {
+        const shouldExclude = audienceExcludedPathPatterns.some((pattern) => pattern.test(requestedUrl.pathname));
+        if (state.audience?.includes(hostname) && !shouldExclude) {
             // Prepare headers
             const headers = new Headers(request.headers);
-            if (authMode == 'token' && isLoggedIn() && accessToken) {
-                headers.set('Authorization', `Bearer ${accessToken}`);
+            if (state.authMode == 'token' && isLoggedIn() && state.accessToken) {
+                headers.set('Authorization', `Bearer ${state.accessToken}`);
             }
             // Prepare options
             const fetchOptions = {
                 headers: headers,
-                credentials: isLoggedIn() && authMode === 'cookie' ? 'include' : 'omit',
+                credentials: isLoggedIn() && state.authMode === 'cookie' ? 'include' : 'omit',
                 referrer: request.referrer,
-                referrerPolicy: refererPolicy
+                referrerPolicy: state.refererPolicy
             };
             return new Request(request, fetchOptions);
         }
@@ -209,15 +230,15 @@ async function loadFromCache(request) {
 async function loadFromIndexedDB(request) {
     try {
         const database = await openIndexedDB();
-        const transaction = database.transaction([tilesStoreName], 'readonly');
-        const store = transaction.objectStore(tilesStoreName);
+        const transaction = database.transaction([state.tilesStoreName], 'readonly');
+        const store = transaction.objectStore(state.tilesStoreName);
         const index = store.index('url');
         return new Promise((resolve, reject) => {
             const dbRequest = index.get(request.url);
             dbRequest.onsuccess = () => {
                 if (dbRequest.result) {
                     const blob = dbRequest.result.data;
-                    log('Tile found in Cache.');
+                    log('Tile found in cache.');
                     resolve(new Response(blob));
                 }
                 else {
@@ -235,11 +256,11 @@ async function loadFromIndexedDB(request) {
     }
 }
 /**
- * Open indexedDB
+ * Open IndexedDB
  */
 async function openIndexedDB() {
     return new Promise((resolve, reject) => {
-        const request = indexedDB.open(dbCacheName, storeVersion);
+        const request = indexedDB.open(state.dbCacheName, state.storeVersion);
         let timedOut = false;
         const timeoutId = setTimeout(() => {
             timedOut = true;
@@ -259,8 +280,52 @@ async function openIndexedDB() {
         };
     });
 }
+/**
+ * Open IndexedDB for the service worker state
+ */
+async function openStateDB() {
+    return new Promise((resolve, reject) => {
+        const request = indexedDB.open(stateDbName, 1);
+        request.onupgradeneeded = () => {
+            request.result.createObjectStore(stateStoreName);
+        };
+        request.onsuccess = () => resolve(request.result);
+        request.onerror = () => reject(request.error);
+    });
+}
+/**
+ * Saves the service worker state
+ */
+async function saveState() {
+    log('Save state');
+    const db = await openStateDB();
+    return new Promise((resolve, reject) => {
+        const tx = db.transaction(stateStoreName, 'readwrite');
+        tx.objectStore(stateStoreName).put(state, stateKey);
+        tx.oncomplete = () => resolve();
+        tx.onerror = () => reject(tx.error);
+    });
+}
+/**
+ * Reloads the service worker state from indexDB
+ */
+async function loadState() {
+    log('Reload state');
+    const db = await openStateDB();
+    const loadedState = await new Promise((resolve, reject) => {
+        const tx = db.transaction(stateStoreName, 'readonly');
+        const req = tx.objectStore(stateStoreName).get(stateKey);
+        req.onsuccess = () => resolve(req.result);
+        req.onerror = () => reject(req.error);
+    });
+    if (loadedState) {
+        state = loadedState;
+        audienceExcludedPathPatterns = state.audienceExcludedPaths.map((str) => new RegExp(str));
+    }
+    initialized = true;
+}
 function log(str, error) {
-    if (logLevel === 'debug') {
+    if (state.logLevel === 'debug') {
         console.debug(`SW: ${str}`, error ?? '');
     }
 }

package/templates/public/about.json

@@ -1 +1 @@
-{"version":"1.1.0-dev.2507911619", "build":"2507911619", "date":"07/05/2026"}
+{"version":"1.1.0-dev.2527788074", "build":"2527788074", "date":"15/05/2026"}