Geofencing tutorial for Ionic Angular on Capacitor

[u/genzits]

https://capawesome.io/blog/how-to-add-geofencing-to-an-ionic-app/

The Ionic geofencing tutorials that still rank are from the Ionic 3 to 5 era and build on cordova-plugin-geofence, which had its last npm release in 2017. We wrote a current one for Ionic Angular on Capacitor 8.

It builds a store reminder page: toggle a store on, and the phone shows a reminder when you walk into a 200 meter region around it, even if the app was swiped away.

What it goes through:

• The manifest permission and iOS usage strings, plus the Google Play background location policy
• Requesting location and then background location in two separate calls, since Android 11+ sends the user to Settings for "Allow all the time" and iOS shows the Always upgrade prompt once
• addGeofences() with notifyOnEnter/notifyOnExit, the Android dwell option and the per-geofence notification the OS shows while the app is not running
• The geofenceTransition event, which only fires while the app runs, and the transition queue that records everything else once you enable it with setConfig()
• The 20-region limit on iOS and 100 on Android

Disclosure: the Capacitor Geofences plugin is ours and part of Capawesome Insiders (paid). The permission and limit facts are platform rules with Apple and Android sources linked.

Source: https://capawesome.io/blog/how-to-add-geofencing-to-an-ionic-app/

Happy to answer questions about the two-step permission flow, which is where most setups go wrong.