Many of the following features 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

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.

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?

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.

 

 

Conclusion

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. So let’s not envy what developers can do on native platforms, let’s take full advantage of the Web’s capabilities today.

Thanks to CreativeBloq for some of the info above.