Feb 1, 2022

Hidden gems inside your browser, hiding in plain sight.

Mind-blowing browser features that are still underused.

Your browser can do some pretty awesome things that you probably didn’t know about.

I work with browsers every day and I’m still amazed at some of the stuff I find. Sometimes, I discover features that I thought were only possible in native apps and it seems I’m not the only one, because many of these are hardly even used in websites!

These features can make your website much more powerful and drastically improve the user-experience it provides.

Yet few website use these features effectively. Why is that?

Maybe developers don’t know they exist or don’t know how to implement them. Another reason could be browser support: some of these features are not available in all browsers so developers wait to implement them until they are, which is unfortunate by the way.

Let’s have a look at these hidden gems and start with an obvious one: geolocation.

Geolocation

Geolocation is a feature that has been in browsers for quite a while already. It enables websites to determine the location (coordinates) of a user’s device.

Although it’s been around for a while and is well-supported, a lot of websites still don’t use it.

I’ve been in this situation many times: I’m in the city and I need to find a store location near my current location.

I usually go to the website of the store to find the nearest location. Many times, instead of asking for my current location through the Geolocation API, I have to enter a zip code.

Now, when I’m at home this is not a real problem. But when I’m somewhere in a city, I have no clue what the zip code of my current location is.

A perfect use-case for Geolocation.

The API is quite simple:

navigator.geolocation.getCurrentPosition(({coords}) => {
  const {latitude, longitude} = coords;

  console.log(`your position is: ${latitude}, ${longitude}`);
}, ({code}) => {
  
  const reasons  = {
    1: 'no permission given',
    2: 'position not available',
    3: 'time-out trying to get position'
  };  console.error(`Geolocation error: ${reasons[code]}`);
});

When the user gives permission you can get his/her position and combine that with Google Maps for example and provide directions on how to get to the nearest store location.

Great user experience that you don’t need a native app for!

Available in all browsers.

Password-less login

Now that many or perhaps even most users have a device that can do facial recognition or read a fingerprint, there’s really no reason anymore to rely solely on passwords for authentication.

Passwords are notoriously cumbersome. People use too simple passwords they can easily remember and even reuse them with different accounts.

Password requirements, like a minimum length and usage of special characters has shown to be of limited use as these encourage reusing the same password and do little to make passwords easier to break.

But the main problem is that a password is a shared secret. You need to share it with some server every time you login.

And when you share it, it can be stolen. It’s something that happens daily.

While you should definitely keep using passwords for users that don’t have a device that can read biometric data, you can start using password-less login today for the users that do.

Web Authentication, WebAuthn for short, is supported in all modern browsers (including mobile) and enables you to login with just a username/email and your fingerprint or face.

WebAuthn relies on public key cryptography which means that no sensitive data is shared. Unlike a password, a public key is not a secret and even if it is stolen, it’s effectively useless without the corresponding private key.

You simply register the user’s username or email and the public key and from there on this user can login using the username and a fingerprint or facial recognition (for example FaceID).

Here’s a Github project with source code and a demo to get you started:

Offline support

Any website can work offline today, yet not too many offer this feature.

Why not?

My guess is that many developers simply don’t know this or view a website as something that just doesn’t work when you’re not online.

But when you add a Service Worker to your website, you can make it fully functional offline or at least provide a useful fallback.

A Service Worker is basically a proxy server that sits between your browser and the network. It can intercept requests and therefore serve cached responses and content.

This means you can cache content on the user’s device and serve that when the user is offline. It’s a feature that many native apps offer and your website can too.

Service Workers can do many more useful things and are supported in all modern browsers.

Here’s an article I wrote to get you started:

https://www.dannymoerkerke.com/blog/how-to-make-your-website-work-offline

(Push) Notifications

You can show notifications in any browser on desktop (MacOS, ChromeOS, Windows, Linux) and on Android devices.

On ChromeOS and Android, these notifications can also be delivered when the website is not open or the browser is not even running. These notifications are called Push Notifications.

Unfortunately, iOS and MacOS don’t support these Push Notifications that are delivered when the website is not open or the browser is not running, although support is slowly being added to Safari Tech Preview on MacOS.

The ability to receive notifications regardless of whether the website or browser is running or not, is obviously the greatest benefit of these notifications.

But another nice feature is that these notifications also show up in the notification centers of the OSes.

On Android, you can even make phones vibrate with a vibration pattern you define when a notification arrives.

Install your site as an app

On desktop, Android and iOS you can now install your site as an app.

These apps are called Progressive Web Apps (PWA) and enable your website to behave like a native app, including most of the features that native apps provide.

This means your site will have an icon on the user’s home screen, will display full-screen and can function fully offline. On Android and ChromeOS your app can receive notifications, even when it’s not running.

This also means that you don’t need to get your app into the App Store or Play Store for user’s to install it. You can just provide them a link to your site.

Whenever there’s an update in your app, user’s don’t have to manually download it. You just deploy the changes to the server where your site is hosted and the installed apps will update automatically.

PWAs are a whole subject in itself. I wrote an article explaining the basics and why I think PWAs will eventually replace native apps.

I also created What PWA Can Do Today, which is a collection of demos of what is possible with PWAs today.

This site is itself a PWA so you can install it to your device and see for yourself what is possible.

You can start today

All of these features are very useful to your users and since they are supported in all modern browsers, you can start implementing them today.

Don’t worry about full browser support!

Whenever a feature is not (fully) supported in a browser you can provide a graceful fallback to make sure those users also get the best experience possible.

Many websites don’t provide these features and instead want you to install their native app. They’re in fact actively chasing users away that don’t want to install that app and there’s no need for that.

Your browser is ready and your website can be as well.