This article has been written by Joan Rueda, who is a Front End Developer in the Post Sales team in Veeepe.
In the recent DEVELOPER WEEK 2021 I was able to attend several exciting talks within the 3-day Javascript conference.
However, I would like to review here one talk that I found interesting because it brought to light some modern web APIs, and even some of them are still in an early stage.
This topic was covered in the talk “Wait…can My Browser Do That??” by Francesco Leardini. Thus, in the next lines I am going to enumerate some APIs discussed in this talk:
Page Visibility API
Offers the possibility to know when a document becomes visible or not via events, and also allows to know the visibility state of the page at any time.
This can be useful when the website is displaying a carousel of pictures or a video and detects that the user minimizes the browser or changes to another tab. The carousel or the video can be paused, for example, and continued when the user comes back. This can also be applied to advertising strategies.
Browser compatibility: https://caniuse.com/pagevisibility
Screen Wake Lock API
Using this API, the developer can prevent devices from dimming or locking the screen when it is decided that an application has to keep running.
There are plenty of examples for keeping a screen on, including reading an ebook, map navigation, following a recipe, presenting to an audience, scanning a QR/barcode or applications that use voice or gesture control, rather than tactile input (the default way to keep a screen awake).
Browser compatibility: https://caniuse.com/wake-lock
Ambient Light Sensor
With this interface of the Sensor API, the intensity of the ambient light around the device can be known.
In order to use this sensor, the user must grant permission through the Permissions API.
A widely known application on using dynamically a dark mode theme (or a light one) would be Google Maps app theme adapting to the ambient light.
Browser compatibility: https://caniuse.com/ambient-light
File System Access API:
Provides new features to manipulate local files and thus improves the experience of our users as a native app. It is not required to download the file each time the user wants to edit it, since it can be saved directly. An auto-save functionality can even be implemented.
This increases the current file capabilities of a browser and allows developers to create software to open and save files. Some of the examples would be IDE’s, photo or video editors and text editors.
Needless to say, the access to file/directory data is not allowed unless the user specifically permits it.
Browser compatibility: https://caniuse.com/native-filesystem-api
Web Share API
The navigator.share() method of the Web Share API invokes the native sharing mechanism of the device.
It allows sharing an object containing at least one of the following fields: urls, text, title and an array of files.
Browser compatibility: https://caniuse.com/web-share
Contact Picker API
This API fills another important gap between web and native apps, allowing access to the address book on a mobile device. With it we can retrieve details like: contact name, contact profile image, email address, phone number, street address.
Browser compatibility: https://developer.mozilla.org/en-US/docs/Web/API/Contact_Picker_API#browser_compatibility
Online/Offline events
In order to build a good offline-capable web application, this API gives the possibility to know when a web application is offline, and when it returns to an ‘online’ status again.
Unfortunately, these events aren’t fully reliable yet. If the developer needs greater reliability, other signals to detect if the website is offline can be used, including service workers and responses from XMLHttpRequest.
Browser compatibility: https://caniuse.com/online-status
Vibration API
Offers the navigator.vibrate() method to interact with the vibration hardware on the smartphone. It is possible to define a single vibration or a more complex pattern, composed by vibrations and pauses.
It can be helpful when the developer wants to emphasize a notification that is sent to the user.
Browser compatibility: https://caniuse.com/vibration
To sum up, it is interesting to keep updated on the modern web APIs, and to follow their evolution on the market, even though some of them are still in an early stage.
Also, I would like to mention that from the point of view of a mobile developer it may not seem like a big improvement, but these new APIs provide good steps to unify the user experience.
Resources:
- Repository with a gallery of examples of some modern browser APIs https://github.com/pacoita/modern-web
- MDN Web Docs Moz://a Web APIs https://developer.mozilla.org/en-US/docs/Web/API
