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

This commit is contained in:
Eric van der Vlist 2022-09-02 23:41:55 +02:00
parent ff32b75480
commit 194b46bad0
4 changed files with 93 additions and 9 deletions

15
package-lock.json generated
View File

@ -9,6 +9,7 @@
"dependencies": { "dependencies": {
"@awesome-cordova-plugins/core": "^5.44.0", "@awesome-cordova-plugins/core": "^5.44.0",
"@awesome-cordova-plugins/geolocation": "^5.44.0", "@awesome-cordova-plugins/geolocation": "^5.44.0",
"@capacitor-community/background-geolocation": "^1.2.4",
"@capacitor/android": "4.1.0", "@capacitor/android": "4.1.0",
"@capacitor/app": "4.0.1", "@capacitor/app": "4.0.1",
"@capacitor/core": "4.1.0", "@capacitor/core": "4.1.0",
@ -2007,6 +2008,14 @@
"resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz", "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
"integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==" "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": { "node_modules/@capacitor/android": {
"version": "4.1.0", "version": "4.1.0",
"resolved": "https://registry.npmjs.org/@capacitor/android/-/android-4.1.0.tgz", "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", "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
"integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==" "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": { "@capacitor/android": {
"version": "4.1.0", "version": "4.1.0",
"resolved": "https://registry.npmjs.org/@capacitor/android/-/android-4.1.0.tgz", "resolved": "https://registry.npmjs.org/@capacitor/android/-/android-4.1.0.tgz",

View File

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

View File

@ -1,8 +1,12 @@
import react from 'react'; import react from 'react';
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { Map, Marker, ZoomControl } from 'pigeon-maps'; import { Map, Marker, ZoomControl } from 'pigeon-maps';
import { Geolocation } from '@awesome-cordova-plugins/geolocation';
import LiveOverlay from './live-overlay'; 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 LiveMap: react.FC = () => {
const initialCenter: [number, number] = [44.73574, 6.18981]; const initialCenter: [number, number] = [44.73574, 6.18981];
@ -23,13 +27,76 @@ const LiveMap: react.FC = () => {
let [track, setTrack] = useState(emptyTrack); let [track, setTrack] = useState(emptyTrack);
useEffect(() => { 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]); }, [track]);

View File

@ -10,4 +10,5 @@ platforms:
<uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <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_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" />