Which Browser Features Can You Use to Build Your Next Web App?

Web applications are adapting to face the challenges of a competitive native environment.

After reading this article you will learn:

• If your browser is capable of connecting with the IoT devices;
• How to streamline the checkout process with simple Web API integration;
• What are the other creative examples of using Web API with AR, speech control, NFC, and Machine Learning algorithms?

Web technologies have come a long way since the WWW protocol was first introduced in 1989. Starting from simple documents with minimal styling, the Web has become a fully interactive and incredibly powerful platform for all kinds of applications. And yet, it does not seem to be stopping. 

Many proposals and specifications aim to provide new features for web developers that can close the gap with native apps. What is promising is that most of these features are already available in Chromium-based browsers (Google Chrome, Edge, Opera). However, some of them have to be explicitly enabled by users in browser settings. Let’s take a look at what’s already possible (or might be in the near future) with web technologies.

Connect to external devices

Some limited communication methods with peripheral devices were always available on websites as users had to interact with them using mice, touchscreens, and keyboards. However, some new proposals take it to an entirely new level.

Web Bluetooth allows websites to communicate with nearby Bluetooth devices. That means no need to install any dedicated native app to connect to a beacon, heart rate monitor, smart light bulb, or any other Bluetooth Low Energy device. There seems to be a lot of controversy regarding potential privacy and security ramifications, even though Web Bluetooth has some built-in restrictions. The API requires the user to give explicit permission to connect to a specific device which is not the case with native apps. With a myriad of Bluetooth devices available now on the market, the use cases for Web Bluetooth seem endless. There are a bunch of demo apps prepared by Google to get familiar with Web Bluetooth possibilities.

Native Google Chrome UI for connecting with Bluetooth devices (https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web)

Web USB provides an API for websites to connect to USB devices. For security reasons, some devices which are used for sensitive data (such as USB keyboard or mouse) are not accessible to WebUSB. An interesting working example is Android Flash Tool created by Google for Pixel users. They can use that website to install Android builds on their phones without a need to install any native app.

Android Flash Tool, a practical application of Web USB.

If Web Bluetooth and Web USB already sound a bit over the top, the Web can go even further. Web Serial makes it possible to interact with devices connected to a serial port, such as microcontrollers (e.g., Arduino). Web Serial has a lot of potential in the educational sector. The initial effort required to get started with learning or teaching programming microcontrollers by creating interactive web tutorials is greatly reduced.

Web NFC gives the Web a possibility to read and write data to NFC tags. One could think of it as an opportunity to make many experiences more interactive without the need to install a native app. Think about galleries, museums, exhibitions, or any event - installing a native app only for a short period of time can be a bit of a hassle, which many users might not be willing to take. Opening a website with a tag seems to be a much more fluid experience. You can find some cool demos of Web NFC.

The ability to interact with digital musical instruments has always been limited to native applications, but this is also changing. Web MIDI enables connecting to various MIDI devices such as synthesizers, samplers, or drum machines. MIDI is a widely adopted communication protocol for the musical world. Web MIDI opens a lot of possibilities to make music-making software and interactive musical education more easily accessible.

Web-based drum machine interface using Web MIDI (http://webaudiodemos.appspot.com/MIDIDrums/index.html)

While Web Bluetooth and Web USB are very powerful APIs, they are also very low-level and hard to use. Therefore additional standards were created to ease integration with some classes of devices. WebHID (Human Interface Device) is a higher-level API for handling devices such as virtual reality controls, flight simulators, or medical equipment. Gamepad API gives developers an easy way to access signals from game controllers.

Ergometer Space app (https://ergometer-space.org/) which uses WebHID to communicate with rowing ergometers.

Streamline your checkout process

Efficient and well-designed checkout processes are critical for gaining user retention. Unfortunately, they are very repetitive, vary a lot between different websites, and sometimes can even be confusing for users. Payment Request API attempts to standardize the whole checkout process on the Web. 

When using this new API, all user data such as personal information, delivery addresses, and payment method can be remembered in the browser and reused across multiple websites. The merchant’s website does not need to provide any checkout forms, all work can be delegated to the browser. The whole procedure from the user’s perspective is very fast, consistent, and secure. Payment Request API is already supported by most major browsers i.e. Chrome, Edge, Safari, Opera. Firefox supports it experimentally in nightly builds, so it should be available there also real soon. You can see how it works on Chrome here or in the case of Safari and Apple Pay here (under the demo section).

Payment Request UI in Google Chrome

Optimize the sign-in flow

Another cross-cutting concern for almost all web applications is the sign-in process. Remembering passwords and typing them in countless times - we all know it’s necessary but hardly enjoyable. Credential Management API provides access to secure, in-browser storage for user credentials. It differs from password managers (such as LastPass or 1Password) because it gives web developers tools to implement the auto sign-in feature and completely do away with login forms on subsequent visits to the website. Users can also save multiple accounts’ credentials and then choose with which they would like to sign in upon visiting the site.

Leverage mobile devices’ hardware

Modern mobile devices contain a lot of interesting hardware inside them that can be used to improve user experience. Its usage used to be limited to native apps only, but this is changing as well.

Vibration API enables giving physical feedback to the user by vibrating their device.

Device Orientation API provides information about the physical orientation and motion of the host device. It can be used, for example, in gaming or turn-by-turn navigation systems. Screen Orientation API provides the ability to read the screen orientation state (i.e., if it is portrait or landscape) and lock the orientation to a specific state. Device Memory API makes it possible to read the amount of RAM available on the device. It might be helpful for some performance optimizations, for example, showing a simplified version of the website on lower-end devices. Generic Sensors API allows reading data from typical sensors available in most mobile devices, such as accelerometer, gyroscope, magnetometer, or ambient light sensor.You can find some interesting demos showcasing those APIs prepared by Intel.

Accessing sensor data in mobile devices can be attractive e.g. to game developers to create some controls based on movement and rotation of the device.

Perform operations in the background

For some kinds of applications, it is necessary that they listen to some events or perform some computations in the background. This never really clicked well with the Web, as once you closed the tab with some website, it was gone and there was no way of interacting with it anymore. All of that has changed with the introduction of Service Workers - special kinds of scripts that enabled websites to run offline or show push notifications. Thus the term Progressive Web Apps (PWAs) - websites that can look and behave like native mobile apps. New experimental, exciting APIs will make PWAs more powerful.

Web applications often have to deal with slow and flaky internet connections. The experience when trying to do something on the Web can be frustrating in such situations. Periodic Background Sync API enables web applications to download and synchronize content in the background periodically. It is available experimentally in Chrome, but it has some limitations - it does not guarantee the synchronization interval always to be called at the specified time. It is limited only to applications that the user frequently opens.

Push notifications are not that new for web applications, but there is a new interesting extension to them. Notification Trigger API schedules local notifications according to time - or location-based triggers. That means applications can show notifications every time a user enters some location or, for example, every day at 9 am. Right now, time-based triggers are already available as an experimental feature, and geolocation-based triggers are still in the planning stage.

Incorporate ML elements into your website

Machine learning is a really hot topic right now. ML solutions can make your apps predict and adjust to users’ behavior and gather tons of interesting insights, but they have always been associated with native platforms. It turns out there are some ready-made APIs available in browsers that you can use to make your web applications take advantage of new technologies.

Images are ubiquitous on the Web. Some of them carry a lot of interesting information that can be computationally extracted with current technology, such as faces, QR codes, or text. Although it is technically possible to run those computations in pure JavaScript, it is extremely inefficient. Shape Recognition API gives web apps access to hardware-accelerated ML features in the form of 3 interfaces: FaceDetector, TextDetector, and BarcodeDetector. Only the BarcodeDetector is available now in stable versions of some browsers (including Chrome), but we hope to see it being available more broadly in the near future. Possible use cases for shape recognition are broad, from easy user registration with QR codes to fun real-time face filters. You can find a video showing barcode detection in action here and face detection here.

Voice-based interaction with electronic devices is not that much of a new thing, but only until recently did it become reliable enough to really make its way to our lives. Talking to voice assistants such as Alexa, Siri, or Google Assistant has become an everyday routine thing for many people. Web Speech API aims to bring that experience to the Web. It consists of two components:

• SpeechRecognition provides the ability to convert voice signals to text
• SpeechSynthesis which converts text to voice signal (text to speech)

SpeechSynthesis is already supported by all major browsers while SpeechRecognition is for now only available in Chrome. You can check out how the Web Speech API works in practice in this demo (works only in Chrome).

Web Speech API demo by Google (https://www.google.com/intl/en/chrome/demos/speech.html)

Create AR and VR scenes

The immersive web is a term coined to describe bringing virtual reality experiences to the browser. With WebXR API, the successor of now deprecated Web VR, web developers can connect to virtual reality (VR) and augmented reality (AR) devices, read movement data from those devices, and render 3D scenes to them. Gaming is the most widely-known application of the immersive web, but it can have a lot of potential uses in e-commerce, real estate, tourism, education, or healthcare industries. You can watch a demo from Mozilla to see what it is capable of.

“Hello WebXR” demo from Mozilla (https://blog.mozvr.com/hello-webxr/)

Can I use it in my apps?

As mentioned earlier, Chromium and browsers based on its engine (Chrome, Edge, Opera) are usually the early adopters of new web capabilities. What Web Can Do Today website provides an up-to-date overview of modern web capabilities and how they are currently supported. Google Play Store has been open for PWAs for some time now, making web applications appear indistinguishable from native apps. Webkit, however, the browser engine used by Safari, is not so keen on implementing many of the new web experimental APIs. Due to concerns regarding privacy and fingerprinting, they have decided not to implement many of the most interesting APIs yet. While some of the concerns might seem valid, it is hard not to realize that this decision severely limits the possibilities of PWAs on iOS and does not make them yet a full-fledged alternative to native apps.