5 things you didn't know your browser can do

Ahead of his talk at Generate Sydney, John Allsopp reveals five things you probably didn't know your browser can do.

John Allsopp

John Allsopp will be speaking at Generate Sydney - buy your ticket today!

Don't miss John Allsopp's opening session - Predict the future with this one weird old trick - at Generate Sydney on 5 September. Wrong hemisphere? There are Generate conferences coming up in San Francisco and London too!

It's a lament you not infrequently hear that the web's capabilities move forward at a glacial pace, while those of native platforms surge ahead in leaps and bounds.

But no small part of this perception is while Apple at WWDC, or Google at I/O can take the wraps off a brand new platform feature or API that had not even been hinted at (such as a brand new language like Swift in 2014 at WWDC, which actually began development in 2010), new features of the web platform appear in public (if you know where to look) at times years before a company might announce them.

This means new web platform features often seem a bit old hat by the time we're able to actually use them. But that doesn't mean the web as a platform isn't constantly evolving, nor that there aren't features you can use right now, which you might well have overlooked.

So let's take a look at a few of my favourite features of the Web platform, some older than others, but all under-utilised in my opinon.

Few if any are supported in every browser on every device, but the great thing about the Web as we know is if we use features to progressively enhance our user's experience, even some of the very newest features of the platform can be used today.

01. Take photos

You can access a device's camera (or photo roll) directly from the browser, without even any JavaScript, using simply

  • the humble input element of type file
  • the boolean capture attribute to indicate the device should allow the browser to capture some input
  • an accept attribute with a value of image/*, to indicate we expect an image

iPhone camera

Harness your device's browser directly from the browser

Now on devices and browsers which support this, we can take a photo using the familiar camera UI for that device (and for devices or browsers which don't support this feature it's still a vanilla file element, allowing the user to select a file from their local system as they always could).

02. Read files off your local system

But wait, there's more!

Now you've got an image from the camera (or a file form the local file system), unlike with HTML 4, we an now actually get details about the file (such as its name, last modified date or file size), and we can even read the contents of the file, or use the file itself wherever a URL is used (for example as the src of a source or img element).

And while we can't read and write to the local file system (as apps on native platforms become more and more sandboxed, native file systems make less and less sense anyway) we also have access to really simple offline datastore with Web Storage, and more sophisticated offline database with IndexedDB, getting us closer to parity with those platforms.

03. Send system notifications

Whether its on desktop systems, or mobile/tablet devices, we're all used to the idea of applications sending us notifications within the system – perhaps when a new message has arrived or a lengthy task has been completed.

Chart

Web Notifications is now supported by the majority of browsers

But our browsers can hook into this capability too on increasingly more platforms using the Web Notifications API, which according to Can I Use, is supported by over 60% of browsers in the wild (the notable absences for now being Internet Explorer/Edge and Safari on iOS).

And if the feature's not supported? Not a problem, our solution just needs to ensure there's another way the user is notified of anything vital. Progressive enhancement as ever is your friend.

04. Vibrate the device

OK, it's a cheap trick, but no longer the preserve of just native apps anymore, we can now vibrate a device that supports vibration (ok, and this new API) with a single call to the navigator.vibrate() method. Supported in Firefox Mobile, Android and Chrome, just a little more evidence that perhaps the gap between native and Web capabilities isn't quite as yawning as it's sometimes made out to be.

05. Guess what you're doing

For our last trick, the browser will attempt to guess what you're doing right now. Are you travelling in a car? Train? Walking down the street? Relaxing in your favourite cafe?

Map

Browsers can do more and more with your geographical location these days

The combination of data from a device's gyroscopes and accelerometers (widely supported in phones and tablets, and the occasional laptop device), geolocation (extremely widely supported, even when a device lacks GPS – indeed, the use of wifi triangulation is typically more accurate in most settings than GPS) and a healthy bit of guess work can allow us to get a better sense of where our user is right now, and even what they're doing.

If nothing else, some idea of our user's location might eliminate a number of tedious steps in filling out a form.

Cheap tricks?

You might think most of these things I've outlined here are simple, rather cheap tricks. But I think taken together they demonstrate that the Web is capable of a lot more than we usually give it credit for.

And I've barely scratched the surface here, not mentioning current offline technologies like AppCache, let alone the next generation of offline technologies like Service Worker and Web Manifests, which will make what Alex Russell calls "Progressive Web Apps" a reality.

So let's not envy what developers can do on native platforms, let's take full advantage of the Web's capabilities today.

John Allsop will be discussing the future of the web and suggesting where you should be directing your efforts over the next few years at Generate Sydney on 5 September. Book now!

ABOUT THE AUTHOR

John Allsopp is an author, developer, Web Directions organizer and great grandfather of RWD.

Topics