@geogirafe/lib-geoportal 1.1.0-dev.2605752849 → 1.1.0-dev.2610902439

package/components/getdirections/component.js

@@ -1,4 +1,5 @@
 import { html as uHtml } from 'uhtml';
+// SPDX-License-Identifier: Apache-2.0
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 import { toLonLat } from 'ol/proj.js';
 import { getCenter } from 'ol/extent.js';

package/components/treeview/treeviewroot/style.css

@@ -91,4 +91,4 @@ img:-moz-loading {
 .no-data span {
   display: block;
   flex-grow: 1;
-}
+}

package/package.json

@@ -5,7 +5,7 @@
     "name": "GeoGirafe PSC",
     "url": "https://doc.geogirafe.org"
   },
-  "version": "1.1.0-dev.2605752849",
+  "version": "1.1.0-dev.2610902439",
   "type": "module",
   "engines": {
     "node": ">=20.19.0"
@@ -83,6 +83,7 @@
     "cross-env": "10.1.0",
     "eslint": "10.2.0",
     "eslint-plugin-es-x": "9.6.0",
+    "fake-indexeddb": "6.2.5",
     "fast-glob": "3.3.3",
     "fs-extra": "11.3.4",
     "globals": "17.4.0",

package/templates/public/about.json

@@ -1 +1 @@
-{"version":"1.1.0-dev.2605752849", "build":"2605752849", "date":"16/06/2026"}
+{"version":"1.1.0-dev.2610902439", "build":"2610902439", "date":"18/06/2026"}

package/templates/tsconfig.json

@@ -27,5 +27,5 @@
     "types": ["node"]
   },
   "include": ["src/**/*.ts"],
-  "exclude": ["node_modules", "src/service-worker.ts", "src/service-worker.js"]
+  "exclude": ["node_modules", "src/tools/sw"]
 }

package/templates/vite.config.js

@@ -120,7 +120,7 @@ export default defineConfig(({ command, mode }) => {
           { src: `${cesiumSource}/Workers`, dest: cesiumBaseUrl },
           { src: `${cesiumSource}/Assets`, dest: cesiumBaseUrl },
           { src: `${cesiumSource}/Widgets`, dest: cesiumBaseUrl },
-          { src: `${geogirafeSource}/service-worker.js`, dest: '' },
+          { src: `${geogirafeSource}/tools/sw/*.js`, dest: '' },
           { src: `${geogirafeSource}/styles/*.css`, dest: 'styles/' },
           { src: `${geogirafeSource}/assets/*`, dest: '' },
           { src: `${geogirafeSource}/tools/auth/silentlogincallback.html`, dest: '' },

package/tools/app/geogirafeapp.js

@@ -50,6 +50,7 @@ import SelectionToolComponent from '../../components/selectiontool/component.js'
 import AdvancedFilterComponent from '../../components/advancedfilter/component.js';
 import FixedDimensionComponent from '../../components/drawing/fixed-dimension/component.js';
 import GetDirectionsArtifact from '../../components/getdirections/component.js';
+import ServiceWorkerHelper from '../utils/swhelper.js';
 import FeedbackButtonComponent from '../../components/feedbackbutton/component.js';
 import AddBookmarkComponent from '../../components/addbookmark/component.js';
 import DrawingToolbarComponent from '../../components/drawing-toolbar/component.js';
@@ -168,21 +169,29 @@ export default class GeoGirafeApp {
             catch (err) {
                 throw new Error(`Service worker registration failed. ${err}`, { cause: err });
             }
-            // Communicate logging configuration to service-worker
             const config = this.context.configManager.Config;
-            sw.postMessage({ logLevel: config.general.logLevel });
-            // Communicate oauth configuration to service-worker
+            const serviceWorkerHelper = new ServiceWorkerHelper(sw);
+            // Communicate configuration to service-worker
+            // NOTE REG : Important : we have to wait that the config has been correctly sent to the SW
+            // Otherwise the first requests can be sent without the correct auhentication.
             const issuerConfig = config.oauth?.issuer ?? config.gmfauth;
             const gmfConfig = config.oauth?.geomapfish ?? config.gmfauth;
             if (issuerConfig && gmfConfig) {
                 const issuerHostname = new URL(issuerConfig.url).hostname;
                 const audience = [...issuerConfig.audience, issuerHostname];
-                sw.postMessage({
+                const swConfig = {
+                    logLevel: config.general.logLevel,
                     audience: audience,
                     audienceExcludedPaths: issuerConfig.audienceExcludedPaths,
                     authMode: gmfConfig.authMode,
+                    alwaysSendCookies: issuerConfig.alwaysSendCookies,
                     refererPolicy: gmfConfig.refererPolicy
-                });
+                };
+                await serviceWorkerHelper.sendMessageToServiceWorker(swConfig);
+            }
+            else {
+                // If no auth, we just update the log level, but we do not have to wait
+                sw.postMessage({ logLevel: config.general.logLevel });
             }
             await this.context.offlineManager.setServiceWorker(sw, storeVersion, dbCacheName);
             await this.context.authManager.initialize(sw);
@@ -194,7 +203,7 @@ export default class GeoGirafeApp {
         }
     }
     async waitForServiceWorkerActivation() {
-        const registration = await navigator.serviceWorker.register('service-worker.js');
+        const registration = await navigator.serviceWorker.register('service-worker.js', { type: 'module' });
         if (registration.active) {
             return registration.active;
         }

package/tools/configuration/girafeconfig.d.ts

@@ -191,6 +191,7 @@ declare class GirafeConfig {
         checkSessionOnLoad: boolean;
         audience: string[];
         authMode: 'cookie';
+        alwaysSendCookies: boolean;
         refererPolicy: ReferrerPolicy;
         audienceExcludedPaths: string[];
     };
@@ -205,6 +206,7 @@ declare class GirafeConfig {
             checkSessionOnLoad: boolean;
             audience: string[];
             audienceExcludedPaths: string[];
+            alwaysSendCookies: boolean;
         };
         geomapfish: {
             userInfoUrl: string;

package/tools/configuration/girafeconfig.js

@@ -358,6 +358,7 @@ class GirafeConfig {
             loginRequired: config.gmfauth.loginRequired ?? false,
             checkSessionOnLoad: config.gmfauth.checkSessionOnLoad ?? true,
             authMode: 'cookie',
+            alwaysSendCookies: config.gmfauth.alwaysSendCookies ?? false,
             refererPolicy: config.gmfauth.refererPolicy ?? 'strict-origin-when-cross-origin',
             audienceExcludedPaths: config.gmfauth.audienceExcludedPaths ?? []
         };
@@ -388,7 +389,8 @@ class GirafeConfig {
             loginRequired: config.oauth.issuer.loginRequired ?? false,
             checkSessionOnLoad: config.oauth.issuer.checkSessionOnLoad ?? false,
             audience: config.oauth.issuer.audience,
-            audienceExcludedPaths: config.oauth.issuer.audienceExcludedPaths ?? []
+            audienceExcludedPaths: config.oauth.issuer.audienceExcludedPaths ?? [],
+            alwaysSendCookies: config.oauth.issuer.alwaysSendCookies ?? false
         };
         const geomapfishConfig = {
             userInfoUrl: config.oauth.geomapfish.userInfoUrl,

package/tools/i18n/i18nmanager.js

@@ -42,7 +42,7 @@ class I18nManager extends GirafeSingleton {
         this.loadingLanguagePromise = this.context.configManager.loadConfig().then(async () => {
             if (this.context.configManager.Config?.languages.translations &&
                 language in this.context.configManager.Config.languages.translations) {
-                let mergedTranslations = {};
+                let mergedTranslations = this.translations[language] ?? {};
                 // Translations are loaded in the order defined in the list of files
                 // If an element is present in both results, the last value overwrite all the others
                 for (const url of this.context.configManager.Config.languages.translations[language]) {

package/tools/main.d.ts

@@ -104,6 +104,8 @@ export type { GgUserInteractionListener } from './state/userInteractionManager.j
 export { default as UserInteractionManager } from './state/userInteractionManager.js';
 export type { GgUserInteractionEvent } from './state/userinteractionevent.js';
 export { gGEventDependencies, isPrimaryPointerAction, isAlternateMouseClick, isMouseWheelClick } from './state/userinteractionevent.js';
+export type { SwState } from './sw/service-worker.tools';
+export { swLog, SwHelper, IndexedDbHelper, CacheHelper } from './sw/service-worker.tools';
 export { default as CustomThemesManager } from './themes/customthemesmanager.js';
 export { default as ThemeFavoritesManager } from './themes/themefavoritesmanager.js';
 export { DEFAULT_OPACITY, OPACITY_FOR_DEFAULT_BASEMAP } from './themes/themes-config.js';

package/tools/main.js

@@ -77,6 +77,7 @@ export { default as StateToggleManager } from './state/stateToggleManager.js';
 export { default as StateManager } from './state/statemanager.js';
 export { default as UserInteractionManager } from './state/userInteractionManager.js';
 export { gGEventDependencies, isPrimaryPointerAction, isAlternateMouseClick, isMouseWheelClick } from './state/userinteractionevent.js';
+export { swLog, SwHelper, IndexedDbHelper, CacheHelper } from './sw/service-worker.tools';
 export { default as CustomThemesManager } from './themes/customthemesmanager.js';
 export { default as ThemeFavoritesManager } from './themes/themefavoritesmanager.js';
 export { DEFAULT_OPACITY, OPACITY_FOR_DEFAULT_BASEMAP } from './themes/themes-config.js';

package/tools/offline/offlinemanager.d.ts

@@ -3,14 +3,15 @@ import LayerWmts from '../../models/layers/layerwmts.js';
 import { Extent } from 'ol/extent.js';
 declare class OfflineManager extends GirafeSingleton {
     private serviceWorker;
-    private database?;
+    private readonly indexedDbHelper;
     private get map();
     private get state();
+    private database;
     private totalLength;
     private counter;
     private progressCallback?;
-    private storeVersion?;
-    private dbCacheName?;
+    private storeVersion;
+    private dbCacheName;
     private readonly tilesStoreName;
     private readonly bboxStoreName;
     private readonly vectorLayer;
@@ -19,7 +20,7 @@ declare class OfflineManager extends GirafeSingleton {
     private registerEvents;
     /** Exports all the WMTS tiles for the layers in parameter and store them to local cache */
     exportWMTSTiles(bbox: Extent, wmtsLayers: LayerWmts[], progressCallback?: CallableFunction): Promise<void>;
-    private openIndexedDB;
+    upgradeIndexedDb(database: IDBDatabase): void;
     /** The offline manager works with a ServiceWorker in charge of intercepting
      * the fetch requests and read the data from the local cache if the application
      * is offline. This method defines the servicework object to use.

package/tools/offline/offlinemanager.js

@@ -1,5 +1,6 @@
 // SPDX-License-Identifier: Apache-2.0
 import GirafeSingleton from '../../base/GirafeSingleton.js';
+import { IndexedDbHelper } from '../sw/service-worker.tools';
 import { Feature } from 'ol';
 import VectorLayer from 'ol/layer/Vector.js';
 import VectorSource from 'ol/source/Vector.js';
@@ -8,13 +9,17 @@ import Style from 'ol/style/Style.js';
 import { Stroke } from 'ol/style.js';
 class OfflineManager extends GirafeSingleton {
     serviceWorker = null;
-    database;
+    indexedDbHelper = new IndexedDbHelper();
     get map() {
         return this.context.mapManager.getMap();
     }
     get state() {
         return this.context.stateManager.state;
     }
+    async database() {
+        const database = await this.indexedDbHelper.openDb(this.dbCacheName, this.storeVersion, this.upgradeIndexedDb);
+        return database;
+    }
     totalLength = 0;
     counter = 0;
     progressCallback;
@@ -38,10 +43,10 @@ class OfflineManager extends GirafeSingleton {
         this.context.stateManager.state.isOffline = isOffline;
     }
     registerEvents() {
-        window.addEventListener('offline', () => {
+        globalThis.addEventListener('offline', () => {
             this.state.isOffline = true;
         });
-        window.addEventListener('online', () => {
+        globalThis.addEventListener('online', () => {
             this.state.isOffline = false;
         });
         this.context.stateManager.subscribe('isOffline', () => {
@@ -55,45 +60,16 @@ class OfflineManager extends GirafeSingleton {
         const tileUrls = this.getAllTileUrls(bbox, wmtsLayers);
         await this.fetchAndSaveTiles(tileUrls);
     }
-    async openIndexedDB() {
-        return new Promise((resolve, reject) => {
-            console.debug('Opening IndexedDB');
-            const request = indexedDB.open(this.dbCacheName, this.storeVersion);
-            let timedOut = false;
-            const timeoutId = setTimeout(() => {
-                timedOut = true;
-                console.debug('Timeout while opening IndexedDB');
-                reject(new Error('Timeout while opening IndexedDB'));
-            }, 3000);
-            request.onerror = (event) => {
-                if (!timedOut) {
-                    clearTimeout(timeoutId);
-                    const message = event.target.error?.message;
-                    console.debug(`IndexedDB could not be opened : ${message}`);
-                    reject(new Error(message));
-                }
-            };
-            request.onsuccess = (event) => {
-                if (!timedOut) {
-                    clearTimeout(timeoutId);
-                    console.debug('IndexedDB is open');
-                    resolve(event.target.result);
-                }
-            };
-            request.onupgradeneeded = (event) => {
-                // Version migration is necessary.
-                // open the indexedDB and create the new structure
-                console.debug('Upgrading IndexedDB');
-                const database = event.target.result;
-                // First : a store for tiles
-                const tilesStore = database.createObjectStore('tiles', { autoIncrement: true });
-                tilesStore.createIndex('url', 'url', { unique: true });
-                // Second : A store for offline available bbox
-                database.createObjectStore('bbox', { autoIncrement: true });
-                console.debug('IndexedDB upgraded.');
-                resolve(database);
-            };
-        });
+    upgradeIndexedDb(database) {
+        // Version migration is necessary.
+        // open the indexedDB and create the new structure
+        console.debug('Upgrading IndexedDB');
+        // First : a store for tiles
+        const tilesStore = database.createObjectStore('tiles', { autoIncrement: true });
+        tilesStore.createIndex('url', 'url', { unique: true });
+        // Second : A store for offline available bbox
+        database.createObjectStore('bbox', { autoIncrement: true });
+        console.debug('IndexedDB upgraded.');
     }
     /** The offline manager works with a ServiceWorker in charge of intercepting
      * the fetch requests and read the data from the local cache if the application
@@ -108,7 +84,6 @@ class OfflineManager extends GirafeSingleton {
         this.serviceWorker = sw;
         this.storeVersion = storeVersion;
         this.dbCacheName = dbCacheName;
-        this.database = await this.openIndexedDB();
         this.serviceWorker.postMessage({
             storeVersion: this.storeVersion,
             dbCacheName: this.dbCacheName,
@@ -165,9 +140,7 @@ class OfflineManager extends GirafeSingleton {
         const iterator = tileUrls.values();
         // Use 4 parallel workers to download tiles
         this.counter = 0;
-        const workers = Array(4)
-            .fill(iterator)
-            .map((iterator) => this.doWork(iterator));
+        const workers = new Array(4).fill(iterator).map((iterator) => this.doWork(iterator));
         Promise.allSettled(workers).then(() => {
             console.debug('Everything downloaded.');
             if (this.progressCallback) {
@@ -180,41 +153,41 @@ class OfflineManager extends GirafeSingleton {
         for (const url of iterator) {
             const response = await fetch(url);
             if (response.ok) {
-                response.blob().then((blob) => {
-                    const transaction = this.database.transaction([this.tilesStoreName], 'readwrite');
-                    const store = transaction.objectStore(this.tilesStoreName);
-                    const index = store.index('url');
-                    const dbRequest = index.getKey(url);
-                    dbRequest.onsuccess = () => {
-                        let request;
-                        if (dbRequest.result) {
-                            const key = dbRequest.result;
-                            request = store.put({ url: url, data: blob }, key);
-                        }
-                        else {
-                            request = store.put({ url: url, data: blob });
+                const blob = await response.blob();
+                const transaction = (await this.database()).transaction([this.tilesStoreName], 'readwrite');
+                const store = transaction.objectStore(this.tilesStoreName);
+                const index = store.index('url');
+                const dbRequest = index.getKey(url);
+                dbRequest.onsuccess = () => {
+                    let request;
+                    if (dbRequest.result) {
+                        const key = dbRequest.result;
+                        request = store.put({ url: url, data: blob }, key);
+                    }
+                    else {
+                        request = store.put({ url: url, data: blob });
+                    }
+                    request.onsuccess = () => {
+                        if (this.progressCallback) {
+                            this.progressCallback(Math.round((this.counter * 100) / this.totalLength));
                         }
-                        request.onsuccess = () => {
-                            if (this.progressCallback) {
-                                this.progressCallback(Math.round((this.counter * 100) / this.totalLength));
-                            }
-                            console.debug(`${this.counter++}/${this.totalLength} Tile ${url} added.`);
-                        };
-                        request.onerror = () => {
-                            console.error(`Error while saving tile ${url}`);
-                        };
+                        console.debug(`${this.counter++}/${this.totalLength} Tile ${url} added.`);
                     };
-                });
+                    request.onerror = () => {
+                        console.error(`Error while saving tile ${url}`);
+                    };
+                };
             }
         }
     }
     async getTotalSizeMB() {
+        const database = await this.database();
         return new Promise((resolve, reject) => {
-            if (!this.database) {
+            if (!database) {
                 reject(new Error('Database is not initialized.'));
                 return;
             }
-            const transaction = this.database.transaction([this.tilesStoreName], 'readonly');
+            const transaction = database.transaction([this.tilesStoreName], 'readonly');
             const store = transaction.objectStore(this.tilesStoreName);
             const request = store.openCursor();
             let totalBytes = 0;
@@ -239,12 +212,13 @@ class OfflineManager extends GirafeSingleton {
         });
     }
     async clearStore(storeName) {
+        const database = await this.database();
         return new Promise((resolve, reject) => {
             if (!this.database) {
                 reject(new Error('Database is not initialized.'));
                 return;
             }
-            const transaction = this.database.transaction([storeName], 'readwrite');
+            const transaction = database.transaction([storeName], 'readwrite');
             const store = transaction.objectStore(storeName);
             const request = store.clear();
             request.onsuccess = () => {
@@ -264,11 +238,9 @@ class OfflineManager extends GirafeSingleton {
         this.clearStore(this.bboxStoreName);
     }
     async saveBoundingBox(bbox) {
-        if (this.database === undefined) {
-            this.database = await this.openIndexedDB();
-        }
+        const database = await this.database();
         // Save bbox to the store
-        const transaction = this.database.transaction([this.bboxStoreName], 'readwrite');
+        const transaction = database.transaction([this.bboxStoreName], 'readwrite');
         const store = transaction.objectStore(this.bboxStoreName);
         const request = store.put(bbox);
         request.onsuccess = () => {
@@ -279,11 +251,9 @@ class OfflineManager extends GirafeSingleton {
         };
     }
     async displayBoundBoxes() {
-        if (this.database === undefined) {
-            this.database = await this.openIndexedDB();
-        }
+        const database = await this.database();
         // Read bbox for offline tiles
-        const transaction = this.database.transaction([this.bboxStoreName], 'readonly');
+        const transaction = database.transaction([this.bboxStoreName], 'readonly');
         const store = transaction.objectStore(this.bboxStoreName);
         const request = store.getAll();
         request.onsuccess = () => {

package/tools/sw/service-worker.d.ts

@@ -0,0 +1 @@
+export {};

package/tools/sw/service-worker.js

@@ -0,0 +1,94 @@
+// SPDX-License-Identifier: Apache-2.0
+// NOTE REG: Here the extension ".js" MUST be present in the import,
+// otherwise the service-worker won't be able to find the transpiled file
+import { SwHelper, IndexedDbHelper, swLog, CacheHelper } from './service-worker.tools.js';
+/**
+ * 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 sw = globalThis;
+const indexDbHelper = new IndexedDbHelper();
+const cacheHelper = new CacheHelper();
+// Initialize with default state
+const swHelper = new SwHelper();
+const swHelperReady = swHelper.initialize({
+    storeVersion: 1,
+    dbCacheName: 'geogirafe-cache',
+    tilesStoreName: 'tiles',
+    logLevel: 'warning',
+    audience: [],
+    audienceExcludedPaths: [],
+    accessToken: undefined,
+    loginState: undefined,
+    authMode: undefined,
+    alwaysSendCookies: false,
+    refererPolicy: undefined
+});
+sw.addEventListener('message', handleMessage);
+sw.addEventListener('install', handleInstall);
+sw.addEventListener('activate', handleActivate);
+sw.addEventListener('fetch', (event) => {
+    if (event.request.mode === 'navigate') {
+        return;
+    }
+    event.respondWith(handleFetchEvent(event));
+});
+function handleMessage(event) {
+    if (!swHelper.isOriginAllowed(self.location.origin, event.origin)) {
+        console.warn(`Message ignored: origin not allowed (${event.origin})`);
+        return;
+    }
+    const data = event.data;
+    event.waitUntil((async () => {
+        await swHelperReady;
+        swHelper.updateState(data);
+        // Persist the service worker state before acknowledging the message.
+        await swHelper.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');
+}
+function handleActivate(event) {
+    event.waitUntil((async () => {
+        if ('clients' in sw) {
+            await swHelperReady;
+            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.');
+            }
+        }
+    })());
+}
+async function handleFetchEvent(event) {
+    await swHelperReady;
+    const newRequest = swHelper.getRequest(event.request);
+    let response = await cacheHelper.fetchAndCache(swHelper.State, newRequest);
+    // Use cache only for GET queries
+    if (cacheHelper.isCacheAllowed(event.request)) {
+        if (!response) {
+            // Fetch was unsuccessful. We try to load the data from cache.
+            response = await cacheHelper.loadFromCache(event.request);
+        }
+        if (!response) {
+            // Not found in cache. We try to load from IndexedDB.
+            response = await indexDbHelper.loadFromIndexedDB(swHelper.State, event.request);
+        }
+    }
+    return response ?? new Response(null, { status: 503 });
+}
+function log(str, error) {
+    swLog(swHelper.State, str, error);
+}

package/tools/sw/service-worker.tools.d.ts

@@ -0,0 +1,83 @@
+export type SwState = {
+    storeVersion: number;
+    dbCacheName: string;
+    tilesStoreName: string;
+    logLevel: string;
+    audience: string[];
+    audienceExcludedPaths: string[];
+    accessToken?: string;
+    loginState?: string;
+    authMode?: 'token' | 'cookie';
+    alwaysSendCookies: boolean;
+    refererPolicy?: ReferrerPolicy;
+};
+export declare function swLog(state: SwState, str: string, error?: Error): void;
+export declare class SwHelper {
+    private state;
+    private readonly indexedDbHelper;
+    get State(): SwState;
+    private database;
+    private audienceExcludedPathPatterns;
+    private readonly stateDbName;
+    private readonly stateStoreName;
+    private readonly stateKey;
+    private initialized;
+    initialize(defaultState: SwState): Promise<void>;
+    isOriginAllowed(eventOrigin: string, origin: string): boolean;
+    private isLoggedIn;
+    updateState(data: any): void;
+    getRequest(request: Request): Request;
+    private log;
+    private refreshAudienceExcludedPathPatterns;
+    /**
+     * Saves the service worker state
+     */
+    saveState(): Promise<void>;
+    /**
+     * Reloads the service worker state from indexDB
+     */
+    loadState(): Promise<SwState | null>;
+    private upgradeIndexedDb;
+}
+type indexedDbUpgradeFunction = (db: IDBDatabase) => void;
+export declare class IndexedDbHelper {
+    private readonly timeout;
+    private readonly databases;
+    openDb(name: string, version: number, upgradeFunction?: indexedDbUpgradeFunction): Promise<IDBDatabase>;
+    private openDbInternal;
+    /**
+     * Try to load this request from indexedDB.
+     * Returns null if unsuccessful
+     */
+    loadFromIndexedDB(state: SwState, request: Request): Promise<Response | null>;
+}
+export declare class CacheHelper {
+    /**
+     * 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 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
+     *
+     * The WMTS tiles and other results coming from OGC-Services will be cached on demand
+     * with the OfflineManager component of the application.
+     */
+    private readonly appCacheName;
+    private readonly maxCacheCount;
+    private cacheCount;
+    /**
+     * Execute a fetch for the query, and cache the result if successful
+     * Returns null if unsuccessful
+     */
+    fetchAndCache(state: SwState, request: Request): Promise<Response | null>;
+    /**
+     * Try to load this request from local cache.
+     * Returns null if unsuccessful
+     */
+    loadFromCache(request: Request): Promise<Response | null>;
+    isCacheAllowed(request: Request): boolean;
+}
+export {};

package/tools/sw/service-worker.tools.js

@@ -0,0 +1,321 @@
+export function swLog(state, str, error) {
+    if (state.logLevel === 'debug') {
+        console.debug(`SW: ${str}`, error ?? '');
+    }
+}
+export class SwHelper {
+    state;
+    indexedDbHelper = new IndexedDbHelper();
+    get State() {
+        return this.state;
+    }
+    async database() {
+        const database = await this.indexedDbHelper.openDb(this.stateDbName, 1, this.upgradeIndexedDb.bind(this));
+        return database;
+    }
+    audienceExcludedPathPatterns = []; // list of regex pattern built from state.audienceExcludedPaths
+    stateDbName = 'geogirafe-sw-state';
+    stateStoreName = 'state';
+    stateKey = 'config';
+    initialized = false;
+    async initialize(defaultState) {
+        // If the state has already been initialized, do nothing
+        if (!this.initialized) {
+            this.state = defaultState;
+            let savedState = null;
+            try {
+                savedState = await this.loadState();
+            }
+            catch (error) {
+                this.log('No persisted state to load', error);
+            }
+            if (savedState) {
+                this.state = {
+                    ...defaultState,
+                    ...savedState
+                };
+            }
+            this.refreshAudienceExcludedPathPatterns();
+            this.initialized = true;
+        }
+    }
+    isOriginAllowed(eventOrigin, origin) {
+        if (eventOrigin !== origin) {
+            return false;
+        }
+        return true;
+    }
+    isLoggedIn() {
+        return this.state.loginState === 'loggedIn' || this.state.loginState === 'issuer.loggedIn';
+    }
+    updateState(data) {
+        if (data.logLevel) {
+            this.state.logLevel = data.logLevel;
+            this.log(`LogLevel changed: ${this.state.logLevel}`);
+        }
+        if (data.tilesStoreName) {
+            this.state.tilesStoreName = data.tilesStoreName;
+            this.log(`tilesStoreName changed: ${this.state.tilesStoreName}`);
+        }
+        if (data.storeVersion) {
+            this.state.storeVersion = data.storeVersion;
+            this.log(`storeVersion changed: ${this.state.storeVersion}`);
+        }
+        if (data.dbCacheName) {
+            this.state.dbCacheName = data.dbCacheName;
+            this.log(`dbCacheName changed: ${this.state.dbCacheName}`);
+        }
+        if (data.audience) {
+            this.state.audience = data.audience ?? [];
+            this.log(`audience changed: ${this.state.audience}`);
+        }
+        if (data.audienceExcludedPaths) {
+            this.state.audienceExcludedPaths = data.audienceExcludedPaths;
+            this.refreshAudienceExcludedPathPatterns();
+            this.log(`audienceExcludedPaths changed: ${this.state.audienceExcludedPaths}`);
+        }
+        if (data.access_token) {
+            this.state.accessToken = data.access_token;
+            this.log(`access_token changed`);
+        }
+        if (data.clear_access_token) {
+            this.state.accessToken = undefined;
+            this.log('access_token cleared');
+        }
+        if (data.authMode) {
+            this.state.authMode = data.authMode;
+            this.log(`authMode changed: ${this.state.authMode}`);
+        }
+        if (data.alwaysSendCookies !== undefined) {
+            this.state.alwaysSendCookies = data.alwaysSendCookies;
+            this.log(`alwaysSendCookies changed: ${this.state.alwaysSendCookies}`);
+        }
+        if (data.refererPolicy) {
+            this.state.refererPolicy = data.refererPolicy;
+            this.log(`refererPolicy changed: ${this.state.refererPolicy}`);
+        }
+        if (data.loginState) {
+            this.state.loginState = data.loginState;
+            this.log(`loginState changed: ${this.state.loginState}`);
+        }
+    }
+    getRequest(request) {
+        if (request.mode === 'no-cors') {
+            return request; // Cannot do anything here, the no-cors queries cannot be modified
+        }
+        try {
+            const requestedUrl = new URL(request.url);
+            const hostname = requestedUrl.hostname;
+            // Prepare headers
+            const headers = new Headers(request.headers);
+            const shouldExclude = this.audienceExcludedPathPatterns.some((pattern) => pattern.test(requestedUrl.pathname));
+            const rightAudience = this.state.audience?.includes(hostname) && !shouldExclude;
+            if (rightAudience) {
+                // Token
+                const includeToken = this.state.authMode == 'token' && this.isLoggedIn() && this.state.accessToken;
+                if (includeToken) {
+                    headers.set('Authorization', `Bearer ${this.state.accessToken}`);
+                }
+                // Cookie
+                const includeCookies = this.state.alwaysSendCookies || (this.isLoggedIn() && this.state.authMode === 'cookie');
+                // Prepare new request with authentication data
+                swLog(this.state, `including credentials for ${request.url} (rightAudience:${rightAudience}|includeCookies:${includeCookies}|includeToken:${includeToken})`);
+                const fetchOptions = {
+                    headers: headers,
+                    credentials: includeCookies ? 'include' : 'same-origin',
+                    referrer: request.referrer,
+                    referrerPolicy: this.state.refererPolicy
+                };
+                return new Request(request, fetchOptions);
+            }
+            // If there is no need for authentication data (token or cookie)
+            // We just return the original request
+            return request;
+        }
+        catch (error) {
+            // In case of error, we return the initial request
+            this.log('Error while creating the request with authentication', error);
+            return request;
+        }
+    }
+    log(str, error) {
+        swLog(this.state, str, error);
+    }
+    refreshAudienceExcludedPathPatterns() {
+        this.audienceExcludedPathPatterns = this.state.audienceExcludedPaths.map((str) => new RegExp(str));
+    }
+    /**
+     * Saves the service worker state
+     */
+    async saveState() {
+        this.log('Save state');
+        const db = await this.database();
+        return new Promise((resolve, reject) => {
+            const tx = db.transaction(this.stateStoreName, 'readwrite');
+            tx.objectStore(this.stateStoreName).put(this.state, this.stateKey);
+            tx.oncomplete = () => resolve();
+            tx.onerror = () => reject(tx.error);
+        });
+    }
+    /**
+     * Reloads the service worker state from indexDB
+     */
+    async loadState() {
+        this.log('Reload state');
+        const db = await this.database();
+        const loadedState = await new Promise((resolve, reject) => {
+            const tx = db.transaction(this.stateStoreName, 'readonly');
+            const req = tx.objectStore(this.stateStoreName).get(this.stateKey);
+            req.onsuccess = () => resolve(req.result);
+            req.onerror = () => reject(req.error);
+        });
+        if (loadedState) {
+            return loadedState;
+        }
+        return null;
+    }
+    upgradeIndexedDb(database) {
+        database.createObjectStore(this.stateStoreName);
+    }
+}
+export class IndexedDbHelper {
+    timeout = 3000; // Timeout in case of not reachable IndexedDB. (3 sec.)
+    databases = {};
+    async openDb(name, version, upgradeFunction) {
+        const key = `${name}:${version}`;
+        let database = this.databases[key];
+        if (!database) {
+            database = await this.openDbInternal(name, version, upgradeFunction);
+            this.databases[key] = database;
+        }
+        return database;
+    }
+    async openDbInternal(name, version, upgradeFunction) {
+        return new Promise((resolve, reject) => {
+            const request = indexedDB.open(name, version);
+            let timedOut = false;
+            const timeoutId = setTimeout(() => {
+                timedOut = true;
+                reject(new Error('Timeout while opening IndexedDB'));
+            }, this.timeout);
+            request.onerror = (event) => {
+                if (!timedOut) {
+                    clearTimeout(timeoutId);
+                    reject(event.target.error);
+                }
+            };
+            request.onsuccess = (event) => {
+                if (!timedOut) {
+                    clearTimeout(timeoutId);
+                    resolve(event.target.result);
+                }
+            };
+            request.onupgradeneeded = (event) => {
+                const database = event.target.result;
+                const transaction = request.transaction;
+                if (upgradeFunction) {
+                    // Call upgrade function
+                    upgradeFunction(database);
+                    console.debug('IndexedDB upgraded.');
+                }
+                if (transaction) {
+                    transaction.oncomplete = () => {
+                        resolve(database);
+                    };
+                }
+            };
+        });
+    }
+    /**
+     * Try to load this request from indexedDB.
+     * Returns null if unsuccessful
+     */
+    async loadFromIndexedDB(state, request) {
+        try {
+            const database = await this.openDb(state.dbCacheName, state.storeVersion);
+            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;
+                        swLog(state, 'Tile found in cache.');
+                        resolve(new Response(blob));
+                    }
+                    else {
+                        swLog(state, 'Tile not found in cache.');
+                        resolve(new Response(null, { status: 204 }));
+                    }
+                };
+                dbRequest.onerror = () => {
+                    reject(new Error('Error querying IndexedDB Store.'));
+                };
+            });
+        }
+        catch {
+            return null;
+        }
+    }
+}
+export class CacheHelper {
+    /**
+     * 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 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
+     *
+     * The WMTS tiles and other results coming from OGC-Services will be cached on demand
+     * with the OfflineManager component of the application.
+     */
+    appCacheName = 'pages'; // Name of the cache for application pages
+    maxCacheCount = 300; // Number of queries that should be cached by the service-worker for offline usage.
+    cacheCount = 0; // Counter related to the max value above
+    /**
+     * Execute a fetch for the query, and cache the result if successful
+     * Returns null if unsuccessful
+     */
+    async fetchAndCache(state, request) {
+        try {
+            const response = await fetch(request);
+            if (this.cacheCount < this.maxCacheCount &&
+                this.isCacheAllowed(request) &&
+                response.ok &&
+                response.type !== 'opaque') {
+                // Fetch was successful. We cache the result if necessary and return the response.
+                this.cacheCount++;
+                swLog(state, `${this.cacheCount}/${this.maxCacheCount} caching ${request.url} for offline use.`);
+                const copy = response.clone();
+                const cache = await caches.open(this.appCacheName);
+                await cache.put(request, copy);
+            }
+            return response;
+        }
+        catch {
+            return null;
+        }
+    }
+    /**
+     * Try to load this request from local cache.
+     * Returns null if unsuccessful
+     */
+    async loadFromCache(request) {
+        const cachedResponse = await caches.match(request);
+        return cachedResponse || null;
+    }
+    isCacheAllowed(request) {
+        if (request.method !== 'GET') {
+            return false;
+        }
+        if (request.headers.get('Range')) {
+            // RANGE Request (for COG, FlatGeoBuf or GeoParquet for example)
+            return false;
+        }
+        return true;
+    }
+}

package/tools/tests/mockconfig.d.ts

@@ -6,7 +6,7 @@ export declare const MockConfig: {
     };
     languages: {
         translations: {
-            fr: string[];
+            fr: never[];
         };
         defaultLanguage: string;
     };

package/tools/tests/mockconfig.js

@@ -7,7 +7,7 @@ export const MockConfig = {
     },
     languages: {
         translations: {
-            fr: ['Mock/fr.json']
+            fr: []
         },
         defaultLanguage: 'fr'
     },

package/service-worker.js

@@ -1,331 +0,0 @@
-"use strict";
-// SPDX-License-Identifier: Apache-2.0
-/**
- * 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 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
- *
- * The WMTS tiles and other results coming from OGC-Services will be cached on demand
- * with the OfflineManager component of the application.
- */
-const sw = globalThis;
-const currentOrigin = self.location.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 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);
-sw.addEventListener('fetch', (event) => {
-    if (event.request.mode === 'navigate') {
-        return;
-    }
-    event.respondWith(handleFetchEvent(event));
-});
-function handleMessage(event) {
-    if (event.origin !== currentOrigin) {
-        console.warn(`Message ignored: origin not allowed (${event.origin})`);
-        return;
-    }
-    const data = event.data;
-    if (data.logLevel) {
-        state.logLevel = data.logLevel;
-        log(`LogLevel changed: ${state.logLevel}`);
-    }
-    if (data.tilesStoreName) {
-        state.tilesStoreName = data.tilesStoreName;
-        log(`tilesStoreName changed: ${state.tilesStoreName}`);
-    }
-    if (data.storeVersion) {
-        state.storeVersion = data.storeVersion;
-        log(`storeVersion changed: ${state.storeVersion}`);
-    }
-    if (data.dbCacheName) {
-        state.dbCacheName = data.dbCacheName;
-        log(`dbCacheName changed: ${state.dbCacheName}`);
-    }
-    if (data.audience) {
-        state.audience = data.audience ?? [];
-        log(`audience changed: ${state.audience}`);
-    }
-    if (data.audienceExcludedPaths) {
-        state.audienceExcludedPaths = data.audienceExcludedPaths;
-        audienceExcludedPathPatterns = state.audienceExcludedPaths.map((str) => new RegExp(str));
-        log(`audienceExcludedPaths changed: ${state.audienceExcludedPaths}`);
-    }
-    if (data.access_token) {
-        state.accessToken = data.access_token;
-        log(`access_token changed: ${state.accessToken}`);
-    }
-    if (data.clear_access_token) {
-        state.accessToken = undefined;
-        log('access_token cleared');
-    }
-    if (data.authMode) {
-        state.authMode = data.authMode;
-        log(`authMode changed: ${state.authMode}`);
-    }
-    if (data.refererPolicy) {
-        state.refererPolicy = data.refererPolicy;
-        log(`refererPolicy changed: ${state.refererPolicy}`);
-    }
-    if (data.loginState) {
-        state.loginState = data.loginState;
-        log(`loginState changed: ${state.loginState}`);
-    }
-    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');
-}
-function handleActivate(event) {
-    event.waitUntil((async () => {
-        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.');
-            }
-        }
-    })());
-}
-async function handleFetchEvent(event) {
-    if (!initialized) {
-        await loadState();
-    }
-    const newRequest = getRequest(event.request);
-    let response = await fetchAndCache(newRequest);
-    // Use cache only for GET queries
-    if (isCacheAllowed(event.request)) {
-        if (!response) {
-            // Fetch was unsuccessful. We try to load the data from cache.
-            response = await loadFromCache(event.request);
-        }
-        if (!response) {
-            // Not found in cache. We try to load from IndexedDB.
-            response = await loadFromIndexedDB(event.request);
-        }
-    }
-    return response ?? new Response(null, { status: 503 });
-}
-function isCacheAllowed(request) {
-    if (request.method !== 'GET') {
-        return false;
-    }
-    if (request.headers.get('Range')) {
-        // RANGE Request (for COG, FlatGeoBuf or GeoParquet for example)
-        return false;
-    }
-    return true;
-}
-/**
- * Execute a fetch for the query, and cache the result if successful
- * Returns null if unsuccessful
- */
-async function fetchAndCache(request) {
-    try {
-        const response = await fetch(request);
-        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.`);
-            const copy = response.clone();
-            const cache = await caches.open(appCacheName);
-            await cache.put(request, copy);
-        }
-        return response;
-    }
-    catch {
-        return null;
-    }
-}
-function getRequest(request) {
-    if (request.mode === 'no-cors') {
-        return request; // Cannot do anything here, the no-cors queries cannot be modified
-    }
-    try {
-        const requestedUrl = new URL(request.url);
-        const hostname = requestedUrl.hostname;
-        const shouldExclude = audienceExcludedPathPatterns.some((pattern) => pattern.test(requestedUrl.pathname));
-        if (state.audience?.includes(hostname) && !shouldExclude) {
-            // Prepare headers
-            const headers = new Headers(request.headers);
-            if (state.authMode == 'token' && isLoggedIn() && state.accessToken) {
-                headers.set('Authorization', `Bearer ${state.accessToken}`);
-            }
-            // Prepare options
-            const fetchOptions = {
-                headers: headers,
-                credentials: isLoggedIn() && state.authMode === 'cookie' ? 'include' : 'omit',
-                referrer: request.referrer,
-                referrerPolicy: state.refererPolicy
-            };
-            return new Request(request, fetchOptions);
-        }
-        // Return the initial request
-        return request;
-    }
-    catch (error) {
-        // In case of error, we return the initial request
-        log('Error while creating the request with authentication', error);
-        return request;
-    }
-}
-/**
- * Try to load this request from local cache.
- * Returns null if unsuccessful
- */
-async function loadFromCache(request) {
-    const cachedResponse = await caches.match(request);
-    return cachedResponse || null;
-}
-/**
- * Try to load this request from indexedDB.
- * Returns null if unsuccessful
- */
-async function loadFromIndexedDB(request) {
-    try {
-        const database = await openIndexedDB();
-        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.');
-                    resolve(new Response(blob));
-                }
-                else {
-                    log('Tile not found in cache.');
-                    resolve(new Response(null, { status: 204 }));
-                }
-            };
-            dbRequest.onerror = () => {
-                reject(new Error('Error querying IndexedDB Store.'));
-            };
-        });
-    }
-    catch {
-        return null;
-    }
-}
-/**
- * Open IndexedDB
- */
-async function openIndexedDB() {
-    return new Promise((resolve, reject) => {
-        const request = indexedDB.open(state.dbCacheName, state.storeVersion);
-        let timedOut = false;
-        const timeoutId = setTimeout(() => {
-            timedOut = true;
-            reject(new Error('SW Timeout while opening IndexedDB'));
-        }, offlineTimeout);
-        request.onerror = (event) => {
-            if (!timedOut) {
-                clearTimeout(timeoutId);
-                reject(event.target.error);
-            }
-        };
-        request.onsuccess = (event) => {
-            if (!timedOut) {
-                clearTimeout(timeoutId);
-                resolve(event.target.result);
-            }
-        };
-    });
-}
-/**
- * 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 (state.logLevel === 'debug') {
-        console.debug(`SW: ${str}`, error ?? '');
-    }
-}