Web Capabilities — What’s new coming in the Web
The web is everywhere, it’s fast, accessible and secure, everything we do today we do it on the web, checking our emails and calendar, meeting friends and family, news and updates, media and entertainment, writing documents and presentations and etc. etc.
The web is an open ecosystem which anyone can use and build on, and in the past 30 years, the web capability grows tremendously with things like Geolocation, Storage, Real-time communication, Camera, Offline Mode, Speech Recognition, Motion, Vibration and many more. But let’s be honest when compared to natively developed apps web does have some limitations and there are some apps are not possible to build on the web today, for example, if you want to build something that interacts with the local file system, you simply can’t do it.
This is called the app gap, the gap between native apps vs web apps which simply means what possible on the web today and what possible on native. The community and browsers are in the pursuit to change that gap with one goal in mind, that on the web you can do everything which is possible to do on native.
What about security?
The web being an open ecosystem which anyone can build upon security is a major concern. Enabling web apps to do anything native apps can by exposing the capabilities of native platforms to the web platform cause serious threats to user security, privacy, trust and other core tenets of the web. With all the security majors in mind, the goal is to make the web safer than native so opening a web page can never become scary to anyone.
The community and browsers are enabling these capabilities in a controlled measure so nothing can be accessed directly, everything can be based on permission which web apps require from the user prior to use these capabilities, keeping the user in control and easily revocable and also making it clear to the user when and how these capabilities are being used in their devices.
To know more about these security measures, check out the X41-Browser-Security-White-Paper attached or Cure53’s Browser Security White Paper
How it’s being done?
The community and browsers have taken a safer route to enable capabilities on the web. For Chromium, they have created a web app to log these capability request which lets community to participate what they think is right to be available on the web platform.
Guiding a capability from an idea to a standardized API to ship in the browser is very important so they are building these capabilities as web standards by involving the community and the browsers in the process. The process is very simple and intuitive, they first identify the need for a capability in the web which then explained and written on the web app either by proper himself or the community. Which then available for the community to provide feedback and iterate on the explainer. Once the feedback process is done a formal specification is created and launch for the user’s trial to collect real user feedbacks on these capabilities to reiterate, after that it ship to the browser.
What are the new capabilities?
There are many capabilities are being proposed in the Chromium, the few which have launched recently are as follows:
PWA Desktop (Shipped - Chrome 73)
Similar to mobile PWA, PWA for Desktop can be installed and look more like native desktop apps.
To read more about PWA Desktop follow the link below:
Web Share (Shipped - Chrome 61)
Sharing content from the web app requires some third-party integration which is limited to sharing your content only on social channels and emails. The new Web Share capability enables users to share content from the web app to all the available share channels on the user’s device similar to native apps. Which also lets you share files as well.
The APIs to Web Share
if (navigator.share) {
navigator.share({
title: 'Ashok Vishwakarma',
text: 'GDE-Web Technologies & Angular',
url: 'https://medium.com/@avishwakarma',
})
.then(() => console.log('Successful share'))
.catch((error) => console.log('Error sharing', error));
}To know more about the Web Share API find the below article
Registering as a Share Service (Shipped - Chrome 71+)
Now as the web app are able to support Web Share your web app also need the capability to register as a service on which content can be shared.
All you have to do is register your web app as a share target using manifest.json file
"share_target": {
"action": "/share-target/",
"method": "GET",
"enctype": "application/x-www-form-urlencoded",
"params": {
"title": "title",
"text": "text",
"url": "url"
}
}Find the below article to read more on share target
Media Session API (Shipped - Chrome 57)
Enable the integration for your media with the device’s control panel and notification bar for a smooth experience, which also supports physical hardware keys for media control on both background mode and in fullscreen.
You can clearly see how the Media Session API changes the notification for a playing media on the web. The left screen is without Media Session API and the right screen is with Media Session API.
The Media Session API
if ('mediaSession' in navigator) {
navigator.mediaSession.metadata = new MediaMetadata({
title: 'Never Gonna Give You Up',
artist: 'Rick Astley',
album: 'Whenever You Need Somebody',
artwork: [
{ src: 'https://dummyimage.com/96x96', sizes: '96x96', type: 'image/png' },
{ src: 'https://dummyimage.com/128x128', sizes: '128x128', type: 'image/png' },
{ src: 'https://dummyimage.com/192x192', sizes: '192x192', type: 'image/png' },
{ src: 'https://dummyimage.com/256x256', sizes: '256x256', type: 'image/png' },
{ src: 'https://dummyimage.com/384x384', sizes: '384x384', type: 'image/png' },
{ src: 'https://dummyimage.com/512x512', sizes: '512x512', type: 'image/png' },
]
});
navigator.mediaSession.setActionHandler('play', function() {});
navigator.mediaSession.setActionHandler('pause', function() {});
navigator.mediaSession.setActionHandler('seekbackward', function() {});
navigator.mediaSession.setActionHandler('seekforward', function() {});
navigator.mediaSession.setActionHandler('previoustrack', function() {});
navigator.mediaSession.setActionHandler('nexttrack', function() {});
}Enabling physical keys control on media
navigator.mediaSession.setActionHander('previoustrack', () => {
// control the previous key
});navigator.mediaSession.setActionHander('nexttrack', () => {
// control the next key
});navigator.mediaSession.setActionHander('play', () => {
// control the play key
});navigator.mediaSession.setActionHander('pause', () => {
// control the pause key
});
Read more about the Media Session APIs on the below article
Web Bluetooth (Origin Trials)
Bluetooth or BLE as wireless communication technology is available in many gadgets like sensors, speakers, mobile, toys and etc. to interact with Bluetooth a native app is required by Web Bluetooth enables the same capability to the web apps as well.
The APIs are very simple and easy to use on the web, it must be triggered by the user event
button.addEventListener('pointerup', async event => {
// Request bluetooh devices
const device = await navigator.bluetooth.requestDevice({
filters: [
// Filters the devices with name start with HUB
{namePrefix: 'HUB'}
]
});
console.log("Connected to", device.name);
});To know more about the APIs and implementation check out the nice article on developers.google.com
There are many web applications are built using the Web Bluetooth capability, check them out on the below link.
Shape Detection API (Origin Trials)
Most of the mobile devices have Shape Detection builtin for Face Recognition, Barcode Reading, Text Reading from images and etc. the web is missing this capability with the new Shape Detection API your web app can detect shapes from image and videos natively.
Feature detection
const supported = await (async () => 'FaceDetector' in window &&
await new FaceDetector().detect(document.createElement('canvas'))
.then(_ => true)
.catch(e => e.name === 'NotSupportedError' ? false : true))();Face Detection
const faceDetector = new FaceDetector({
// (Optional) Hint to try and limit the amount of detected faces
// on the scene to this maximum number.
maxDetectedFaces: 5,
// (Optional) Hint to try and prioritize speed over accuracy
// by, e.g., operating on a reduced scale or looking for large features.
fastMode: false
});
try {
const faces = await faceDetector.detect(image);
faces.forEach(face => console.log(face));
} catch (e) {
console.error('Face detection failed:', e);
}Barcode Detection
const barcodeDetector = new BarcodeDetector({
// (Optional) A series of barcode formats to search for.
// Not all formats may be supported on all platforms
formats: [
'aztec',
'code_128',
'code_39',
'code_93',
'codabar',
'data_matrix',
'ean_13',
'ean_8',
'itf',
'pdf417',
'qr_code',
'upc_a',
'upc_e'
]
});
try {
const barcodes = await barcodeDetector.detect(image);
barcodes.forEach(barcode => console.log(barcode));
} catch (e) {
console.error('Barcode detection failed:', e);
}Text Detection in Images
const textDetector = new TextDetector();
try {
const texts = await textDetector.detect(image);
texts.forEach(text => console.log(text));
} catch (e) {
console.error('Text detection failed:', e);
}To read more about the Shape Detection APIs please follow the below article
Badge API (Origin Trial)
The PWA’s you building and your users installing them on their devices can now have a cool badge application-wide to notify the user about any updates for unread-counts and etc.
Badges tend to be more user-friendly than notifications and can be updated with a much higher frequency since they don’t interrupt the user. And, because they don’t interrupt the user, there’s no special permission needed to use them.
The simple APIs for badges
// Setting a badge with a number
window.Badge.set(10);// Setting the badge with simple dot
window.Badge.set();// Clearing the badge
window.Badge.clear();// Setting the badge value to 0 will clear the badge
window.Badge.set(0)
Read more about the Badge API
File System API (Proposed, In-development)
Accessing local system file on the web is a dream and it’s going to be a reality soon with File System API which let your web app access user’s local files without uploading them. The application for this capability is endless. You can write a music player which directly access all the files from the desired storage location, a picture gallery with showing photos from the user’s local file system or maybe VSCode as a PWA.
The security is critical for these capabilities and as per the specification, it’s quite convincing and robust in terms of security. User will be able to choose what a web application can access and requires a user’s gesture to activate. Background file access will not be allowed in any case simply means the user will have full control of what web applications can have access to.
Still in iteration but the APIs specification may be as follows
const fileRef = await self.chooseFileSystemEntries(fileOpts);// Read the file
const file = await fileRef.getFile();
const image_data = await file.arrayBuffer(0;// Write to the file
const writer = await fileRef.getWriter();
await writer.write(0, new_image_data);
Read more about the File System APIs
Serial API (Proposed)
the capability to enable access to serial ports and devices on those ports like printers, microcontrollers, and other peripherals.
The API development in proposal state but it may be as follows
const requestOptions = {
// Filter on devices with Arduino USB vendor ID.
filetrs: [{ vendorId: 0x2341}]
};// Request and Arduino from the user
const port = await navigator.serial.requestPort(requestOptions);// Open and begin reading
await port.open({baudrate: 115200});
const reader = port.in.getReader();while (true) {
const {done, data} = await reader.read();
if(done) break;
console.log(data);
}
Read more about the proposal
More Capabilities…
There are lots of more capabilities are coming to the web, are in the very early draft state you can read their explainer below:
Contacts Picker
Font Access API
Clipboard APIs
SMS Verification
Notification Triggers
That’s all folks, there are many more on the way so be patent. If you wish to contribute in OriginTrials please follow the below link, your feedback matters.
Let me know what capability or feature you want to see on the web. Please share this article to your developer friends and don’t forget to clap :)
