Allez directement au contenu principal

Localisation : "Geolocalisation de Fond d'écran" plugin Capacitor

Suivi de localisation de fond précis avec geofencing natif iOS et Android ainsi que des webhooks de transition

Installer

bun add @capgo/capacitor-background-geolocation bunx cap sync
npm, pnpm ou yarn
  • npm install @capgo/capacitor-background-geolocation
  • pnpm add @capgo/capacitor-background-geolocation
  • yarn add @capgo/capacitor-background-geolocation

Guide

Comment utiliser la géolocalisation de fond dans Capacitor

Tester sur appareil

Télécharger l'application Capgo, puis scanner le code QR code.

Prévisualisation du plugin de géolocalisation de fond QR code

Utilisation de @capgo/background-geolocation

Une géolocalisation de fond précise et un géofencing natif pour les applications Capacitor sur iOS et Android. Utilisez-le pour diffuser des mises à jour de localisation précises, surveiller des régions circulaires et transmettre les transitions d'entrée/sortie de la zone géofence vers JavaScript ou votre serveur.

Installer

bun add @capgo/background-geolocation
bunx cap sync

Ce que ce plugin expose

  • start - Diffuser des mises à jour de localisation précises en arrière-plan ou en avant-plan.
  • stop - Arrêter la traçabilité active de la localisation.
  • openSettings Ouvrez les paramètres natifs pour résoudre les problèmes de permissions de localisation.
  • setPlannedRoute - Jouer un son natif lorsque l'utilisateur quitte un itinéraire planifié.
  • setupGeofencing Configurez les paramètres de geofence natifs par défaut et la livraison facultative de webhook de transition.
  • addGeofence - Suivez une région de geofence circulaire iOS ou Android.
  • removeGeofence / removeAllGeofences - Arrêtez la surveillance d'une ou de toutes les régions enregistrées.
  • getMonitoredGeofences - Liste d'identifiants de région surveillée.
  • geofenceTransition écouteur - Recevoir les événements d'entrée et de sortie tout en gardant l'application active.
  • geofenceError - listener - Gérez les erreurs de surveillance native séparément des événements de transition.

- Exemple d'utilisation

start

- Pour commencer à écouter les changements de la position du dispositif, appelez cette méthode. Un Promesse est retournée pour indiquer qu'elle a terminé l'appel. Le callback sera appelé chaque fois qu'une nouvelle position sera disponible, ou si une erreur se produisait lors de l'appel de cette méthode. N'ayez pas confiance dans la rejet de la promesse pour cela.

import { BackgroundGeolocation } from '@capgo/background-geolocation';

await BackgroundGeolocation.start(
  {
    backgroundMessage: "App is using your location in the background",
    backgroundTitle: "Location Service",
    requestPermissions: true,
    stale: false,
    distanceFilter: 10
  },
  (location, error) => {
    if (error) {
      console.error('Location error:', error);
      return;
    }
    if (location) {
      console.log('New location:', location.latitude, location.longitude);
    }
  }
);

stop

Arrête les mises à jour de localisation.

import { BackgroundGeolocation } from '@capgo/background-geolocation';

await BackgroundGeolocation.stop();

openSettings

Ouvre la page de paramètres de localisation du dispositif. Utile pour guider les utilisateurs pour activer les services de localisation ou ajuster les permissions.

import { BackgroundGeolocation } from '@capgo/background-geolocation';

// Direct user to location settings
await BackgroundGeolocation.openSettings();

setPlannedRoute

- Jouez un fichier audio lorsque l'utilisateur dévie de la route planifiée. Cela devrait être utilisé pour jouer un son (en arrière-plan également, uniquement pour natif).

import { BackgroundGeolocation } from '@capgo/background-geolocation';

await BackgroundGeolocation.setPlannedRoute({
  soundFile: "notification.mp3",
  route: [[-74.0060, 40.7128], [-118.2437, 34.0522]]
});

- Geofencing natif

Surveillez les magasins, les sites de travail, les zones de livraison, les campus ou les zones de vérification avec des bornes géographiques natives iOS et Android. url Permettre aux code natifs d'envoyer des payloads de transition POST pendant que le WebView est suspendu.

import { BackgroundGeolocation } from '@capgo/background-geolocation';

await BackgroundGeolocation.setupGeofencing({
  url: 'https://api.example.com/geofences',
  notifyOnEntry: true,
  notifyOnExit: true,
  payload: { userId: '123' },
});

await BackgroundGeolocation.addGeofence({
  identifier: 'warehouse',
  latitude: 40.7128,
  longitude: -74.006,
  radius: 200,
});

const listener = await BackgroundGeolocation.addListener(
  'geofenceTransition',
  (event) => console.log(event.identifier, event.transition),
);

const errorListener = await BackgroundGeolocation.addListener(
  'geofenceError',
  (event) => console.error(event.identifier, event.message),
);

await BackgroundGeolocation.removeGeofence({ identifier: 'warehouse' });
await listener.remove();
await errorListener.remove();

Sur Android, ajoutez ACCESS_BACKGROUND_LOCATION to your app manifest only when you need background geofencing:

<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />

Référence complète

Continuez de l'étape Utiliser @capgo/geolocalisation-de-fond

Si vous utilisez Utiliser @capgo/geolocalisation-de-fond pour planifier le travail du plugin natif, connectez-l’avec @capgo/geolocalisation de fond pour le détail d'implémentation dans @capgo/geolocalisation de fond d'écran, Prise en main pour le détail d'implémentation dans Prise en main Répertoire des plugins Capgo pour le flux de travail du produit dans Répertoire des plugins Capgo, Plugins Capacitor par Capgo pour le détail d'implémentation dans Plugins Capacitor par Capgo, et Ajouter ou mettre à jour des plugins pour le détail d'implémentation dans Ajouter ou mettre à jour des plugins.

FAQ

FAQ du plugin de géolocalisation de fond d'écran

Comment installer le plugin de géolocalisation de fond dans une application Capacitor?

Exécutez « bun add @capgo/capacitor-background-geolocation » (ou « npm install @capgo/capacitor-background-geolocation »), puis exécutez « bunx cap sync » afin que les projets iOS et Android prennent en compte le projet natif code. Importez-l’à partir de « @capgo/capacitor-background-geolocation » dans votre application code.

Le plugin @capgo/capacitor-background-geolocation fonctionne-t-il avec React, Vue et Angular ?

Oui. Le plugin de géolocalisation de fond est un paquet Capacitor, il fonctionne donc avec tout framework web qui tourne à l'intérieur de Capacitor, y compris Ionic, React, Vue, Angular, Svelte et JavaScript pur.

Quelle version de Capacitor est prise en charge par @capgo/capacitor-background-geolocation ?

Capgo des plugins suivent la version majeure de Capacitor : utilisez la version majeure du plugin qui correspond à votre version majeure de Capacitor (par exemple, plugin v8 avec Capacitor 8). La table de compatibilité dans le README du GitHub liste les versions maintenues.

Est-ce que @capgo/capacitor-geolocalisation de fond est gratuit et open source ?

Oui. Le code source de code est public sur GitHub à https://github.com/Cap-go/capacitor-geolocalisation-de-fond/ et le package est gratuit pour l'installation depuis npm. Les rapports de bogues et les demandes de mise à jour sont les bienvenus.

Puis-je mettre à jour code qui utilise la Geolocalisation de fond sans passer par une revue de l'App Store ?

L'installation ou la mise à jour du plugin modifie la code native, elle nécessite donc une nouvelle construction de l'application. Après cela, les modifications JavaScript, HTML et CSS qui appellent le plugin peuvent être déployées instantanément avec les mises à jour Capgo.

Expédiez les modifications de la géolocalisation de fond sans attendre la révision de l'application

Une fois le plugin est dans votre magasin de build, Capgo les mises à jour en temps réel poussent vos modifications JavaScript, HTML et CSS chez les utilisateurs en quelques minutes.

Commencez avec Capgo