First working example with background geolocation, that is: working on Android, not tested on iOS and needing a fallback on the web.

package-lock.json

@@ -9,6 +9,7 @@
       "dependencies": {
         "@awesome-cordova-plugins/core": "^5.44.0",
         "@awesome-cordova-plugins/geolocation": "^5.44.0",
+        "@capacitor-community/background-geolocation": "^1.2.4",
         "@capacitor/android": "4.1.0",
         "@capacitor/app": "4.0.1",
         "@capacitor/core": "4.1.0",
@@ -2007,6 +2008,14 @@
       "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw=="
     },
+    "node_modules/@capacitor-community/background-geolocation": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@capacitor-community/background-geolocation/-/background-geolocation-1.2.4.tgz",
+      "integrity": "sha512-C3Q4/Qg5U/l8ZXUXwyweOI+W1HHxzXy1OmL8KxS1IvJUXKAlX4fNroEMwJ9b9DrcG8A2cbxIEGh1Wd1YyiiVZA==",
+      "peerDependencies": {
+        "@capacitor/core": ">=3.0.0"
+      }
+    },
     "node_modules/@capacitor/android": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/@capacitor/android/-/android-4.1.0.tgz",
@@ -19307,6 +19316,12 @@
       "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw=="
     },
+    "@capacitor-community/background-geolocation": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@capacitor-community/background-geolocation/-/background-geolocation-1.2.4.tgz",
+      "integrity": "sha512-C3Q4/Qg5U/l8ZXUXwyweOI+W1HHxzXy1OmL8KxS1IvJUXKAlX4fNroEMwJ9b9DrcG8A2cbxIEGh1Wd1YyiiVZA==",
+      "requires": {}
+    },
     "@capacitor/android": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/@capacitor/android/-/android-4.1.0.tgz",

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@awesome-cordova-plugins/core": "^5.44.0",
     "@awesome-cordova-plugins/geolocation": "^5.44.0",
+    "@capacitor-community/background-geolocation": "^1.2.4",
     "@capacitor/android": "4.1.0",
     "@capacitor/app": "4.0.1",
     "@capacitor/core": "4.1.0",

src/components/live-map.tsx

@@ -1,8 +1,12 @@
 import react from 'react';
 import { useState, useEffect } from 'react';
 import { Map, Marker, ZoomControl } from 'pigeon-maps';
-import { Geolocation } from '@awesome-cordova-plugins/geolocation';
 import LiveOverlay from './live-overlay';
+import { registerPlugin } from '@capacitor/core';
+import { BackgroundGeolocationPlugin } from '@capacitor-community/background-geolocation';
+const BackgroundGeolocation = registerPlugin<BackgroundGeolocationPlugin>(
+  'BackgroundGeolocation'
+);
 
 const LiveMap: react.FC = () => {
   const initialCenter: [number, number] = [44.73574, 6.18981];
@@ -23,13 +27,76 @@ const LiveMap: react.FC = () => {
   let [track, setTrack] = useState(emptyTrack);
 
   useEffect(() => {
-    Geolocation.getCurrentPosition().then((position) => {
+    console.log('com.dyomedea.dyomedea  LOG', ' - Adding the watcher');
-      setCenter([position.coords.latitude, position.coords.longitude]);
+    BackgroundGeolocation.addWatcher(
-      setPosition([position.coords.latitude, position.coords.longitude]);
+      {
-      track.geometry.coordinates = [
+        // If the "backgroundMessage" option is defined, the watcher will
-        [position.coords.longitude, position.coords.latitude],
+        // provide location updates whether the app is in the background or the
-      ];
+        // foreground. If it is not defined, location updates are only
-      setTrack(track);
+        // guaranteed in the foreground. This is true on both platforms.
+
+        // On Android, a notification must be shown to continue receiving
+        // location updates in the background. This option specifies the text of
+        // that notification.
+        backgroundMessage: 'Cancel to prevent battery drain.',
+
+        // The title of the notification mentioned above. Defaults to "Using
+        // your location".
+        backgroundTitle: 'Tracking You.',
+
+        // Whether permissions should be requested from the user automatically,
+        // if they are not already granted. Defaults to "true".
+        requestPermissions: true,
+
+        // If "true", stale locations may be delivered while the device
+        // obtains a GPS fix. You are responsible for checking the "time"
+        // property. If "false", locations are guaranteed to be up to date.
+        // Defaults to "false".
+        stale: false,
+
+        // The minimum number of metres between subsequent locations. Defaults
+        // to 0.
+        distanceFilter: 1,
+      },
+      function callback(location, error) {
+        console.log('com.dyomedea.dyomedea  LOG', ' - Callback');
+        if (error) {
+          if (error.code === 'NOT_AUTHORIZED') {
+            if (
+              window.confirm(
+                'This app needs your location, ' +
+                  'but does not have permission.\n\n' +
+                  'Open settings now?'
+              )
+            ) {
+              // It can be useful to direct the user to their device's
+              // settings when location permissions have been denied. The
+              // plugin provides the 'openSettings' method to do exactly
+              // this.
+              BackgroundGeolocation.openSettings();
+            }
+          }
+          return console.error('com.dyomedea.dyomedea  LOG', ' - error: ', error);
+        }
+        console.log(location);
+        if (location !== undefined) {
+          setCenter([location.latitude, location.longitude]);
+          setPosition([location.latitude, location.longitude]);
+          track.geometry.coordinates.push([location.longitude, location.latitude]);
+          setTrack(track);  
+        }
+ 
+        return console.log('com.dyomedea.dyomedea  LOG', ' - location: ', location);
+      }
+    ).then(function after_the_watcher_has_been_added(watcher_id) {
+      // When a watcher is no longer needed, it should be removed by calling
+      // 'removeWatcher' with an object containing its ID.
+      console.log('com.dyomedea.dyomedea  LOG', ' - Watcher added');
+      /*BackgroundGeolocation.removeWatcher({
+        id: watcher_id,
+      }); */
+    }).catch((reason) => {
+      console.error('com.dyomedea.dyomedea  LOG', ' - reason: ', reason)
     });
   }, [track]);
 

trapeze.config.yaml

@@ -10,4 +10,5 @@ platforms:
           <uses-permission android:name="android.permission.INTERNET" />
           <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
           <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
-          <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
+          <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />          
+          <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />