What is the 'navigator' in progressive web apps?

How the 'navigator' enables progressively enhancing your web apps

Tom • Progressive Web Apps, Learning •

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'
}

javascriptLanguageCheck out all coding posts

Some information the “navigator” enables you to consume in your app:

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.

Actions

Feedback

Suggested Posts