Note: It’s better to read this article from your mobile device to try all the cool stuff.
- Page Visibility API
Since all web browsers introduce tabs to allow users to browse many websites in the same window, it is hard for a developer to determine if his application is currently in use by the user. The Page Visibility API provides events which you can listen to in order to know if your page is visible to the user or not. When a user minimizes the browser or switches to another tab, this API sends a “visibilitychange” event. By listening to this event, you can execute some actions when your page is active or not. With such capability, a developer can change the application behavior in the runtime which can reflect on the application performance and user experience by scaling back work when the page is not active.
A potential use case for this API is when your application frequently sends ajax requests to your backend to keep the user’s dashboard up to date. Then you can pause these requests when the user is not browsing your application anymore. This way will reduce the traffic on your backend servers and also will make your application consume less memory and power which increases the user experience of your app. Another use case is to pause videos or audios that your application play when the user is switching taps or when his device is in the standby mode. Here is an example to pause a video when switching tabs:
A demo of the W3C Page Visibility API. In this example, the video should stop playing when you view another tab.daniemon.com
- Online and Offline Events
Not all the web applications handle the case when the user loses internet connection; maybe the application will show an alert message that the process failed but will not do anything about it. So, in order to make your application handle such situation in a right way, you should listen to the online and offline events which will help you to save current work status to the browser internal storage and resync all unfinished tasks when the connection back.
All of us have experienced that case when you fill a form and then when you try to submit it, you get an error message about lost connection and then you have to refill all the fields again. It would be a happy user experience to find all your information saved and refilled for you. Another use case I had before was to let users share comments over a document, and when a user loses the internet connection I show an alert message to tell the user he/she is offline and start to internally save and aggregate the written comments to push them to the backend as soon as the connection is back. Here is an example:
- Vibrate API
When we start talking about responsive web design, it comes to your mind resizable web elements that can fit mobiles and tablets screens. However, no one is taking a step further and leverage different features these devices provide such as the vibration. This API can give your web page the same feature a native mobile app can give to your users by vibrating their devices on specific events like errors or incoming messages or even music or audio themes.
A simple use case is when the user tries to login with wrong username or password beside showing a red error message you can trigger the vibration too. Another one is to vibrate it when a new comment, update or message is coming. Another cool feature this API provides is to control the vibration theme, for example, make your app doing the “super Mario theme” with vibration or “Go Go Power Rangers.” You can try these cool things here:
If your application provides any texts that a user needs to copy, then you definitely need this library. “Copying text to the clipboard shouldn’t be hard. It shouldn’t require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn’t depend on Flash or any bloated framework.” the official website said. The library is only 3KB and can easily be installed and used. The support of the browsers for the library is great since it is relying on both “Selection” and “execCommand” APIs where the Selection API is supported by all browsers, and execCommand API is supported by the majority of the modern browsers.
A personal use case I always face is when I try to select a couple of lines of text and fails to select the exact start and end points. I believe that you encountered this situation before.
Copy text to the clipboard shouldn't be hard. It shouldn't require dozens of steps to configure or hundreds of KBs to…clipboardjs.com
- WebVR and A-Frame
“WebVR is an open specification that makes it possible to experience VR in your browser. The goal is to make it easier for everyone to get into VR experiences, no matter what device you have.” the official website said.
However, to make it even easier to create a virtual reality experience in your application, there is A-Frame, an open source framework which makes creating VR experience in web apps straightforward and Mozilla and WebVR community primarily maintain it. I have to confess, VR is still limited to a specific kind of web apps, but I wonder when we will be able to shop from a nearby supermarket or pharmacy with their VR web interfaces.
Take a look at this museum simple interface.
A web framework for building virtual reality experiences. Make WebVR with HTML and Entity-Component. Works on Vive…aframe.io
- Device Orientation
Device orientation API allows your Web applications to have access to the gyroscope and compass data on user’s mobile devices in order to determine the static orientation of the device in all the three dimensions.
There are two events which you can detect to handle the orientation of a device. The first one is “DeviceOrientationEvent” which is fired when the device’s accelerometer detects a change to the orientation, and by using the data sent by this event, a developer can immediately use this data to make his/her application screens responsive. The second event is “ DeviceMotionEvent,” which is fired when a change in the device’s acceleration happened.
Detecting changes in the device orientation can be helpful in geolocation applications to provide step by step navigation. Also, in the gaming applications to handle the direction of the player’s character. Another simple use case is to kill the waiting time for your users by providing a simple waiting message that responds to movement. It will keep your users busy for a while playing around and make them feel that your application not so slow which is very useful if your application needs to preprocess a lot of data. Here is an example.
- Navigation Timing API
The Navigation Timing API provides data that can be used to measure the performance of a web site. Unlike…developer.mozilla.org
Finally, if you know another great API, it would be beneficial to share it with us.