What is the ‘navigator’ in web apps?
If supported, the global “window”-object in your web application provides access to the “navigator”-object. The “navigator” both contains potentially a lot of information about the app and can give you access to certain events to subscribe to. It helps you to write truly modern web apps that can feel almost native-like.
An instance of the “navigator” is directly tied to the user-agent, which is the application that runs your web app - the browser.
How the “navigator” can progressively enhance your app
“Progressively enhancing” means that the “navigator” offers a certain set of capabilities based on the browser that hosts the app. For instance, Google’s Chrome always had the most features implemented, even unstable ones, as Google pushes the boundaries of progressive web apps constantly.
As you’ll see in all examples in MDN’s documentation, you need to make sure that the variable or function you want to access is actually available on the “navigator”.
// Just a simple example of how
// to check for availability
// of features.
function checkNetwork(){
if("connection" in navigator){
// Now it's safe to use 'navigator.connection'.
// 👉 https://developer.mozilla.org/en-US/docs/Web/API/Navigator/connection
}
// Alternative if you're using:
// 'navigator?.connection'
}
Some information the “navigator” enables you to consume in your app:
- number of CPU-cores
- detailed network information
- battery status of the device that runs your app, for example the tablet or smartphone
- reading and tracking of the current geolocation
- using the host’s native menu for sharing content
- controlling the media session
You can actually see some of those features live and in action on this very PWA. Just scroll down to the end of any page, where you can see a few of the available hardware-metrics implementations, for example the number of CPU-cores.
Working with the “navigator”
This article only aims at giving you a very brief introduction to the possibilities that come with the “navigator” for progressive web apps. MDN has a great overview page as well as documentations on each of the available features.
For Google’s Chrome, there’s also “Project Fugu”, which implements experimental new features, only available behind a feature flag on Chromium-browsers.
