×

Get in touch with Binary

Binary Studio website uses cookies to enhance your browsing experience. By continuing to use our site, you agree to our Privacy Policy and use of cookies.

Learn more more arrow
Agree
Nikita Semenistyi Ex-CTO 15.07.2014

Solving the obscurity of sleeping devices in web applications


The age of smartphones has dramatically changed the rules of the software development in general and especially web development. According to statistics from Mobify

1.2 billion of people have access to web from their devices. This number obligates us to pay particular attention to the mobile part of the web development.

The subject of the mobile web development is mainly regarded in terms of responsive design. There are also some discussions around mobile networking led by Ilya Grigorik.

I would like to look at the matter from a different standpoint and check the state of bringing to web applications on mobile morethrow pillowfrom native mobile applications. Specifically in this article I would like to discuss the ways to know the visibility and if processor resources are being allocated for the web page in a browser on mobile during application runtime.

Managing application state is one of the fundamental tasks to be performed during mobile application development. Each OS suggests its own application state: Android

basic-lifecycle-paused.png

calls the states we look for paused and stopped, iOS has inactive and background states. These states allow the developer to control the application flow due to the knowledge of user interaction with it at the moment. I wanted to gain similar possibilities within web application.

W3C is keeping pace with the times so they proposed Page Visibility API (PVA) as a solution of this problem. Still it is not that widespread and is represented only in the latest versions of mobile browsers

caniuse

PVA is providing document.hidden boolean flag, document.visibilityState string value with such possible values:

“visible” – the page is in the foreground of non-minimized application.

“hidden” – either page tab is inactive or application is minimized.

“prerender” – page content is not visible due to rerendering.

Another part of Page Visibility API is visibilitychange event, which allows us to assign listener to it and to be aware of changes of page visibility. David Walsh has written a nice article about taming compatibility issues of PVA.

More advanced usage of PVA is implemented in visibilities. It has several time-driven methods with check of page visibility within them on each execution and much more. Library also aims to provide the fallback for browsers which are not supporting PVA through listening to focus/blur events. But it is obvious that this fallback is far from being perfect as blur event is fired not at the moment when the page is hidden but when another window is considered active at the moment, so page can be maximized almost to fullscreen, still considered hidden due to the click out of the browser.

Nevertheless, there might be cases when your application needs to show the user information only in the real time and you want to avoid showing it if the application on the page was suspended due to browser minification / phone lock etc.

Hypnos module is designed to solve such tasks. It is taking advantage of mechanisms of JS event queue, sets the timer to be executed in certain amount of time and then checks the real time of invocation and the estimated one. In case when time exceeds the defined error device is considered as sleeping. The implementation is pretty simple and may be implemented by each developer from the scratch:

The module can be used in case when your app has a chain of actions to be performed but that should happen just in case when the device was not sleeping. So when the returned from hypnos callback value is truthy, you may want to clear your execution queue.

Check the live demonstration of it on mobile. To see the sleeping result you should click the button and lock the device at once.

The problem of sleeping devices is the part of perceived performance. It once again proves that not only the actual page load time means much, but also the way you react on the certain actions of a user or the state of his browser.

If you are a student who just wishes someone would "write my essay" for me, let Essaystore.org be your solution! Our experienced writers are committed to helping every student succeed by providing them with 100% original custom essays that will help them maintain their grades and achieve the academic excellence they are working so hard for. We guarantee that when you come to us for essay writing help our proficient writers will exceed your expectations by providing you with a brilliant essay that includes all the specifications and requirements you give to us.