Location Services
In this page you'll dive deeper into how to use the browser's location to bring a new level of contextuality to your messages.
Google Geocoding API Key
We use Google's Geocoding API in order to retrieve the device's country based on the latitude and longitude of the device. To use this API you will need to generate a API key here. Once you've generated the API key, make sure you include it in the config.json file as shown below:
{
"appHost": "http://localhost:3000",
"appVersion": "1.0",
"appKey": "PUT_APP_KEY_HERE",
"appSecret": "PUT_APP_SECRET_HERE",
"serviceWorker": "sw.js",
"serviceWorkerScope": "./",
"googleMapsAPIKey": "PUT_GMAPS_KEY_HERE",
"geolocationOptions": {
"timeout": 60000,
"enableHighAccuracy": true,
"maximumAge": 100000
}
}
Requesting Permission
The use of the browser's location is dependent on the user authorization. Once authorized, every time the user opens your website or moves significantly while using your web app, we will automatically collect the location and monitor visits to your regions (if applicable). Unlike native mobile apps location can only be retrieve while the user is browsing your website.
To initiate location services in your website, you should request it after a device has been registered, as shown below:
notificare.didRegisterDevice = (device) => {
//After this it is safe to start location updates
}
This will prompt the user with a permission dialog request to use location and if granted, our library will automatically collect the user location and start monitoring for the regions you've created via the dashboard or API.
But this might not always be the best approach, as you may want to let the user choose when to start these location updates. Consider the example below for a better approach to location updates:
...more code
let button = document.getElementById("enableLocation");
button.style.display = 'none';
notificare.didRegisterDevice = (device) => {
//After this it is safe to start location updates
//Let's check if permission has been given already
if (notificare.isLocationServicesEnabled()) {
notificare.startLocationUpdates();
} else {
//It's not let's on-board the user by showing the enable notifications button
button.style.display = 'block';
button.addEventListener('click', (e) => {
e.preventDefault();
notificare.startLocationUpdates();
});
}
}
...more code
Disable Location
Pretty much the same way you start location updates, you can also stop tracking the user location by invoking the following method:
notificare.stopLocationUpdates();
Location Callbacks
When using location services, the following callback methods are available for you in case you want to be informed about location changes or eventual errors:
notificare.didUpdateLocation = (position) => {
//Triggered every time a new location is retrieved
}
notificare.didFailToUpdateLocation = (error) => {
//Triggered is browser fails to retrieve a location
}