💡 A web proposal is the specification of a feature, API or any other addition to the official web standards, governed by the World Wide Web Consortium (W3C). These additions are typically developed in the open by volunteers and large browser vendors such as Apple, Google, Microsoft and Mozilla.

🛠 As a result, browsers such as Chrome and Firefox often let you try new features before they're ready to go public. In Chrome, you can enable experimental features by navigating to chrome://flags/#enable-experimental-web-platform-features and enabling the flag. Just make sure you're on the latest version!

Shape Detection

A few years ago, I helped develop an arcade machine for a large student festival in Trondheim, Norway. The machine had a camera that would scan for QR codes to identify the player. It ran on a Raspberry PI with a Chrome Web app, so the scanning would be implemented in JavaScript. Finding a suitable library was not an easy task. They were either slow, unstable, or unable to read the QR codes at all.

We had to go for the slow option. But soon, this and other, similar problems can be solved using the proposed Shape Detection API! While JavaScript solutions are typically heavy on the CPU, this proposal lets the browser access specialized hardware modules and SDKs that support both efficient scanning of both QR codes and traditional barcodes.

In addition to QR and barcodes, the Shape Detection API lets you do text recognition and even face recognition – directly in the browser! Using the API is also quite simple. Here's an example by Cassie Evans from CSSCamp 2019, showing how to retrieve faces from a webcam feed:

const findFace = async () => {
  const myWebcamFeed = document.querySelector(".player");
  const faceDetector = new FaceDetector();

  try {
    const faces = await faceDetector.detect(myWebcamFeed);
    console.log(faces);
  } catch (error) {
    console.log("oops, something went wrong with face detection.");
  }
};

🎥 In the video, Evans demonstrates what you can do once the browser has discovered a face!

The Shape Detection API is openly available on GitHub. Take a look for current browser and device support, examples and more!

Progressive Web Apps

Progressive Web Apps (PWAs) erase the boundaries between apps that live in your browser, and native apps you install on your OS. PWAs are actually a combination of at least two, new web proposals; The Web App Manifest lets you define a name, icon and colors for your app, and enables the app to be installed locally on the user's device. Using Service Workers, the app can work without a stable internet connection and send push notifications using the Push API.

PWAs have been around for a while, but the API support still varies a bit across browsers and devices. Creating a PWA from scratch is also a daunting task, given the long checklist of features to keep in mind. However, frameworks such as Gatsby for React or Gridsome for Vue makes the process as easy as installing a handful of plugins.

🎥 If you want to build a PWA, I recommend watching Maximiliano Firtman's talk from JSConf EU 2019 with an updated perspective on the matter.

Native File System

This is a big one. A team from Google is working on a Native File System API for the browser. Currently, web applications are very limited in terms of reading and writing files to your local storage. When they want to read a file, the user must manually choose the file using a native file explorer. Saving works in a similar fashion. This quickly becomes tedious when dealing with frequent file operations or handling multiple files simultaneously.

Using the Native File System API, the browser can (if given permission) gain access to local files like any other, native application. This opens a lot of possibilities for the Web. Combined with features of a Progressive Web App, there may be less need for bundlers such as Electron, which powers VSCode, Slack, Discord and many other desktop apps. Certainly an opportunity for ChromeOS, which mainly relies on web applications. But only time will show if the public wants this merge of the desktop and web, or if they want the browser to remain a separate, sandboxed corner of their operating system.

🚀 See it for yourself in this interactive demo, or read a thorough introduction at web.dev.

Picture-in-Picture

I found this while watching NRK TV, a streaming platform by the Norwegian, government-owned broadcasting company. While watching a video, I discovered a button that made it pop out of the browser, appearing in a stand-alone, sleek and resizable window.

As I later discovered, this is an implementation of the Picture-in-Picture API. While the proposal is mainly available in Chrome, many other browsers support a similar, proprietary implementation. Either way, this API can often be utilized even if the streaming platform has not yet implemented it – using a little JavaScript.

Assuming the streaming site contains an HTML5 video-tag, the following one-liner should drag the feed into a picture-in-picture window:

document.getElementsByTagName("video")[0].requestPictureInPicture();

Try it with the previousvideos – just paste the snippet into your console and press enter!

Wrapping it up

These are all relatively new web proposals, so don't assume they're available to users of your app just yet. I recommend checking the amazing caniuse.com for the current implementation status across all modern browsers. In any case, you can try experimenting locally on your own!

From all the JavaScript nerds here at Bekk, thank you for staying this far! It's been lovely to serve you articles every day this December. If you want to learn the nitty gritty of how these calendars were all made, stay tuned for a special article on bekk.christmas.

Until then – merry Christmas! 🎄🎅🏻