Implementing Geolocation in a PWA

Demo

Install the app, open it from your homescreen/desktop. Then tap the button below to get your location and plot it on the map.

How it works

Under the hood, the Geolocation API utilizes a combination of technologies including GPS, Wi-Fi, and cellular network data to determine the device's physical location. It gathers information from available sources, triangulates the position, and provides the latitude and longitude coordinates to your PWA.

Use cases

You can use the Geolocation API to display a user's location on a map, calculate directions to a destination, or show personalized content relevant to their location.

There are two ways to access a user's location:

1. With navigator.geolocation.getCurrentPosition(), you can get the device's current location. The demo on this page uses this method to render it on a map powered by Leaflet.js and OpenStreetMap (see code below).
2. With navigator.geolocation.watchPosition(), you can monitor the user's position and know whenever their position changes. Be aware that for privacy purposes, this function may stop reporting the user's location to your PWAs when the screen of the device is turned off.

There are many examples of PWAs using the Geolocation API, as it is easy to implement and can improve user experience. For example, in January 2020, I built The Coronavirus App to enable users to track the spread of COVID-19 — my app used the Geolocation API to center the view around the user's country.

Browser support

The Geolocation API is supported by all major browsers. A Progressive Web App can use this feature on almost any device regardless of its installation status.

Code

Links & Documentation

• Geolocation API Documentation on MDN
• OpenStreetMap API (free)
• Google Maps API (paid)
• Leaflet.js documentation