by Marcin Chudy
Web applications are adapting to face the challenges of 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.
There are many proposals and specifications that 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) although 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 way of communication with peripheral devices was always available on websites as users have to interact with them using mice, touchscreens, and keyboards. However, some new proposals take it to a completely 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 restrictions built-in. The API requires the user to give explicit permission to connect to a single 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.
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.
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. By creating interactive web tutorials, the initial effort required to get started with learning or teaching programming microcontrollers 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 kind of 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 here.
The ability to interact with digital musical instruments has always been limited to native applications, but this is also beginning to change. 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.
While Web Bluetooth and Web USB are very powerful API 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.
Streamline your checkout process
Efficient and well-designed checkout processes are critical for gaining user retention. Unfortunately, they are very repetitive, tend to vary a lot between different websites, and sometimes can be even 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 case of Safari and Apple Pay here (under the demo section).
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 a secure, in-browser storage for user credentials. Where it differs from password managers (such as LastPass or 1Password) is that 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 with 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 useful 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 modern mobile devices, such as accelerometer, gyroscope, magnetometer, or ambient light sensor. You can find some interesting demos showcasing those APIs prepared by Intel.
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 which enabled websites to run offline or show push notifications. Thus the term Progressive Web Apps (PWAs) — websites which can look and behave like native mobile apps. New experimental, exciting APIs which will make PWAs more powerful.
Web applications often have to deal with slow and flaky internet connection. The experience when trying to do something on the web can be frustrating in such situations. Periodic Background Sync API enables web applications to periodically download and synchronize content in the background. It is available experimentally in Chrome, but it has some limitations — it does not guarantee the synchronization interval to always be called at the specified time and is limited only to applications that are frequently opened by the user.
Push notifications are not that new when it comes to web applications, but there is a new interesting extension to them. Notification Trigger API scheduling 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’ behaviour 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.
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 have 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 which provides the ability to convert voice signal 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).
Create AR and VR scenes
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.
So… can I actually use all of that in my apps?
As mentioned earlier, Chromium and browsers based on its engine (Chrome, Edge, Opera) are usually the early adopters of new web’s 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 being open for PWAs for some time now makes web applications appear indistinguishable from the 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 to not yet implement many of the most interesting APIs. 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.
Project Fugu is a Chromium initiative with big tech companies Samsung, Microsoft, and Intel also taking part. It focuses on closing the gap between the web and the native. They say that they believe web apps should be able to do anything native apps can. By running a few step process (dev trial, origin trial, stable), the new APIs can be first tested by developers and public users before becoming universally available for everyone. Although some APIs can be considered unacceptable to use in a project because of the lack of support in some browsers, it can be leveraged in corporate or industrial environments in which hardware and software being used can be controlled. All in all, we expect the web to become more and more capable and provide features which haven’t been possible until very recently.