Internship

Learn about new Internship opportunities for 2020

Which browser features can you use to build your next web app?

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.

Author

Marcin Chudy

LeanCode

Senior Frontend Developer

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.

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-Web USB

Android Flash Tool, a practical application of Web USB (https://flash.android.com/)

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.

Web-based drum machine

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

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.

Ergometer Space app

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, 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).

Payment Request UI in Google Chrome

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 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.

Accesing sensor data in mobile devices

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 (https://hacks.mozilla.org/2015/04/mobile-game-development-with-the-device-orientation-and-vibration-apis/)

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’ 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. Right now only the BarcodeDetector is available 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 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).

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

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.

“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’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. 

logo

We build communities

Related services

IT Consulting

Web development

We start in simple 3 steps

step_icon

4h long workshop

During 4h we analyze the problem, assess solution and create the product roadmap.
step_icon

Proof of concept

Within next 3 days we prepare the technical proof of concept to check if it fits business.
step_icon

Recommendation

After the POC is accomplished we prepare the recommendation on how to implement the product with the offer.

Request the 5-STARS workshop

Discover new ways to build digital product that solves real life problems in just 4h
or send us your brief at hello@leancode.pl