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

package/components/about/component.js

@@ -11,7 +11,7 @@ class AboutComponent extends GirafeHTMLElement {
 .panel{color:var(--text-color)}.panel>div{padding:1rem}img.logo{filter:var(--svg-filter);opacity:.8;height:4rem}.list{flex-direction:column;margin-top:1rem;display:flex}
 </style>
 <style>${this.customStyle}</style>
-<div class="panel"><div><img class="logo" alt="geogirafe-logo" src="images/logo/horizontal_black.svg"><div class="list"><div class="elem"><span i18n="Version">Version</span> : ${this.version}</div><div class="elem"><span i18n="Build">Build</span> : ${this.build}</div><div class="elem"><span i18n="Date">Date</span> : ${this.date}</div></div><div class="list"><div class="elem"><span i18n="Source">Source</span>: <a href="https://gitlab.com/geogirafe/gg-viewer" i18n="GitLab" rel="noopener" target="_blank">GitLab</a></div><div class="elem"><span i18n="Documentation">Documentation</span>: <a href="https://doc.geomapfish.dev" rel="noopener" target="_blank">https://doc.geomapfish.dev</a></div></div></div></div>
+<div class="panel"><div><img class="logo" alt="geogirafe-logo" src="images/logo/horizontal_black.svg"><div class="list"><div class="elem"><span i18n="Version">Version</span> : ${this.version}</div><div class="elem"><span i18n="Build">Build</span> : ${this.build}</div><div class="elem"><span i18n="Date">Date</span> : ${this.date}</div></div><div class="list"><div class="elem"><span i18n="Source">Source</span>: <a href="https://gitlab.com/geogirafe/gg-viewer" i18n="GitLab" rel="noopener" target="_blank">GitLab</a></div><div class="elem"><span i18n="Documentation">Documentation</span>: <a href="https://doc.geogirafe.org" rel="noopener" target="_blank">https://doc.geogirafe.org</a></div></div></div></div>
 ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     };
     isPanelVisible = false;

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/prototypebanner/component.js

@@ -11,7 +11,7 @@ class PrototypeBannerComponent extends GirafeHTMLElement {
 a{color:#fff;text-transform:uppercase;text-decoration:none}a:visited{color:#fff}
 </style>
 <style>${this.customStyle}</style>
-<a href="https://doc.geomapfish.dev/" i18n="Prototype" target="_blank" rel="noopener">PROTOTYPE</a>
+<a href="https://doc.geogirafe.org/" i18n="Prototype" target="_blank" rel="noopener">PROTOTYPE</a>
 ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     };
     constructor() {

package/components/treeview/treeviewroot/style.css

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

package/package.json

@@ -3,9 +3,9 @@
   "description": "GeoGirafe is a flexible application to build online geoportals.",
   "author": {
     "name": "GeoGirafe PSC",
-    "url": "https://doc.geomapfish.dev"
+    "url": "https://doc.geogirafe.org"
   },
-  "version": "1.1.0-dev.2602404359",
+  "version": "1.1.0-dev.2610902439",
   "type": "module",
   "engines": {
     "node": ">=20.19.0"
@@ -31,7 +31,7 @@
     "websig"
   ],
   "license": "Apache-2.0",
-  "homepage": "https://doc.geomapfish.dev",
+  "homepage": "https://doc.geogirafe.org",
   "dependencies": {
     "buffer": "6.0.3",
     "d3": "7.9.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/index.html

@@ -152,7 +152,7 @@
                 <span i18n="Information without public faith">Information without public faith</span>
                 <span>
                   ©
-                  <a href="https://doc.geomapfish.dev" target="_blank">GeoGirafe</a>,
+                  <a href="https://doc.geogirafe.org" target="_blank">GeoGirafe</a>,
                   <a href="https://www.swisstopo.admin.ch/en/legal-basis" target="_blank">swisstopo</a>,
                   <a href="http://www.openstreetmap.org/copyright" target="_blank">OSM</a>
                 </span>

package/templates/public/about.json

@@ -1 +1 @@
-{"version":"1.1.0-dev.2602404359", "build":"2602404359", "date":"15/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

@@ -49,7 +49,7 @@ class GirafeConfig {
      * @param config the configuration
      */
     constructor(config) {
-        // Default values are documented here : https://doc.geomapfish.dev/docs/configuration
+        // Default values are documented here : https://doc.geogirafe.org/docs/configuration
         // NOTE: Please adapt the documentation if necessary when doing changes here.
         this.general = this.initConfigGeneral(config);
         this.languages = this.initConfigLanguages(config);
@@ -127,7 +127,7 @@ class GirafeConfig {
     }
     initConfigProjections(config) {
         if (!config.projections) {
-            throw new Error(`Configuration for projections is required. See https://doc.geomapfish.dev/docs/configuration`);
+            throw new Error(`Configuration for projections is required. See https://doc.geogirafe.org/docs/configuration`);
         }
         return config.projections;
     }
@@ -137,16 +137,16 @@ class GirafeConfig {
     initConfigMap(config) {
         // Map
         if (!config.map?.srid) {
-            throw new Error(`Configuration for projections is required. See https://doc.geomapfish.dev/docs/configuration`);
+            throw new Error(`Configuration for projections is required. See https://doc.geogirafe.org/docs/configuration`);
         }
         if (!config.map?.scales) {
-            throw new Error(`Configuration for projections is required. See https://doc.geomapfish.dev/docs/configuration`);
+            throw new Error(`Configuration for projections is required. See https://doc.geogirafe.org/docs/configuration`);
         }
         if (!config.map?.startPosition) {
-            throw new Error(`Configuration for projections is required. See https://doc.geomapfish.dev/docs/configuration`);
+            throw new Error(`Configuration for projections is required. See https://doc.geogirafe.org/docs/configuration`);
         }
         if (!config.map?.startZoom) {
-            throw new Error(`Configuration for projections is required. See https://doc.geomapfish.dev/docs/configuration`);
+            throw new Error(`Configuration for projections is required. See https://doc.geogirafe.org/docs/configuration`);
         }
         return {
             srid: config.map.srid,
@@ -179,10 +179,10 @@ class GirafeConfig {
     }
     initConfigShare(config) {
         if (!config.share?.createUrl) {
-            throw new Error(`Configuration for share.createUrl is required. See https://doc.geomapfish.dev/docs/configuration`);
+            throw new Error(`Configuration for share.createUrl is required. See https://doc.geogirafe.org/docs/configuration`);
         }
         if (config.share?.service === 'geogirafe' && !config.share?.getUrl) {
-            throw new Error(`Configuration for share.getUrl is required if service type is 'geogirafe'. See https://doc.geomapfish.dev/docs/configuration`);
+            throw new Error(`Configuration for share.getUrl is required if service type is 'geogirafe'. See https://doc.geogirafe.org/docs/configuration`);
         }
         return {
             service: config.share?.service ?? 'gmf',
@@ -204,7 +204,7 @@ class GirafeConfig {
     }
     initConfigPrint(config) {
         if (!config.print?.url) {
-            throw new Error(`Configuration for print.url is required. See https://doc.geomapfish.dev/docs/configuration`);
+            throw new Error(`Configuration for print.url is required. See https://doc.geogirafe.org/docs/configuration`);
         }
         config.print.attributeNames ??= ['title', 'comments', 'legend'];
         config.print.formats ??= ['pdf', 'png'];
@@ -212,10 +212,10 @@ class GirafeConfig {
     }
     initConfigSearch(config) {
         if (!config.search?.url) {
-            throw new Error(`Configuration for search.url is required. See https://doc.geomapfish.dev/docs/configuration`);
+            throw new Error(`Configuration for search.url is required. See https://doc.geogirafe.org/docs/configuration`);
         }
         if (!config.search.url.includes('###SEARCHTERM###')) {
-            throw new Error(`search.url is missing the expected pattern. See https://doc.geomapfish.dev/docs/configuration`);
+            throw new Error(`search.url is missing the expected pattern. See https://doc.geogirafe.org/docs/configuration`);
         }
         return {
             url: config.search.url,
@@ -301,7 +301,7 @@ class GirafeConfig {
     }
     initConfigThemes(config) {
         if (!config.themes?.url) {
-            throw new Error(`Configuration for themes.url is required. See https://doc.geomapfish.dev/docs/configuration.`);
+            throw new Error(`Configuration for themes.url is required. See https://doc.geogirafe.org/docs/configuration.`);
         }
         return {
             url: config.themes.url,
@@ -313,7 +313,7 @@ class GirafeConfig {
     }
     initConfigLanguages(config) {
         if (!config.languages) {
-            throw new Error(`Configuration for languages is required. See https://doc.geomapfish.dev/docs/configuration.`);
+            throw new Error(`Configuration for languages is required. See https://doc.geogirafe.org/docs/configuration.`);
         }
         return config.languages;
     }
@@ -343,14 +343,14 @@ class GirafeConfig {
             return undefined;
         }
         if (!config.gmfauth.url) {
-            throw new Error(`Configuration for gmfauth.url is required. See https://doc.geomapfish.dev/docs/configuration.`);
+            throw new Error(`Configuration for gmfauth.url is required. See https://doc.geogirafe.org/docs/configuration.`);
         }
         let gmfauthUrl = config.gmfauth.url;
         if (!config.gmfauth.url.endsWith('/')) {
             gmfauthUrl = `${config.gmfauth.url}/`;
         }
         if (!config.gmfauth.audience) {
-            throw new Error(`Configuration for gmfauth.audience is required. See https://doc.geomapfish.dev/docs/configuration.`);
+            throw new Error(`Configuration for gmfauth.audience is required. See https://doc.geogirafe.org/docs/configuration.`);
         }
         return {
             url: gmfauthUrl,
@@ -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 ?? []
         };
@@ -368,16 +369,16 @@ class GirafeConfig {
             return undefined;
         }
         if (!config.oauth.issuer.url) {
-            throw new Error(`Configuration for oauth.issuer.url is required. See https://doc.geomapfish.dev/docs/configuration.`);
+            throw new Error(`Configuration for oauth.issuer.url is required. See https://doc.geogirafe.org/docs/configuration.`);
         }
         if (!config.oauth.issuer.clientId) {
-            throw new Error(`Configuration for oauth.issuer.clientId is required. See https://doc.geomapfish.dev/docs/configuration.`);
+            throw new Error(`Configuration for oauth.issuer.clientId is required. See https://doc.geogirafe.org/docs/configuration.`);
         }
         if (!config.oauth.issuer.audience) {
-            throw new Error(`Configuration for oauth.issuer.audience is required. See https://doc.geomapfish.dev/docs/configuration.`);
+            throw new Error(`Configuration for oauth.issuer.audience is required. See https://doc.geogirafe.org/docs/configuration.`);
         }
         if (!config.oauth.geomapfish.userInfoUrl) {
-            throw new Error(`Configuration for oauth.geomapfish.userInfoUrl is required. See https://doc.geomapfish.dev/docs/configuration.`);
+            throw new Error(`Configuration for oauth.geomapfish.userInfoUrl is required. See https://doc.geogirafe.org/docs/configuration.`);
         }
         const issuerConfig = {
             url: config.oauth.issuer.url,
@@ -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,
@@ -445,7 +447,7 @@ class GirafeConfig {
         if (config.filtering?.gmfLayerMetadataUrl &&
             !(config.filtering.gmfLayerMetadataUrl.includes('###LAYERNAME###') &&
                 config.filtering.gmfLayerMetadataUrl.includes('###ATTRIBUTENAME###'))) {
-            throw new Error(`Configuration for filtering.gmfLayerMetadataUrl is missing the expected pattern. See https://doc.geomapfish.dev/docs/configuration`);
+            throw new Error(`Configuration for filtering.gmfLayerMetadataUrl is missing the expected pattern. See https://doc.geogirafe.org/docs/configuration`);
         }
         return config.filtering ?? undefined;
     }

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 {};