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:
- 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:
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
Finally, if you know another great API, it would be beneficial to share it with us.