Web Worker Implementation: Generating Time triggered event

PUBLISHED 26 7월 2017

Introduction

Web worker is a JavaScript that runs in background, independently of other scripts, without affecting the performance of an HTML page. User can continue to do whatever he/she wants: clicking, selecting things, etc., while the web worker runs in background.

The HTML5 Web Worker defines an API for spawning background scripts in a web application. Web Worker allows doing things like: fire up long-running scripts to handle computationally intensive tasks without blocking the UI or other scripts to handle user interactions.

Tizen embraces the benefits of widely adopted cross-platform web technologies. Web worker boosts up the performance of high computational applications like video filtering, Graphics rendering, Image processing, etc. without blocking the UI. A real life example: suppose one have to change a number on a table via input field and for that the whole table has to be recomputed. Now, if a developer tries to implement plain JavaScript on his code, that will make the UI unresponsive for long time. But with web worker, all computations could be moved to background leaving the UI interacting with user. This document focuses on basic implementation of HTML5 web worker in Tizen web application where it would generate time triggered event while running on background.

Check Web Worker Support

The first step before creating a web worker, check whether the support is available:

var isSupported = 0; 
if (typeof(Worker) !== "undefined") { isSupported = 1; }
else { alert(“Web workers not supported!”); }

Creating worker Object

Web Worker runs as an isolated thread. As a result, the code that they execute needs to be contained in a separate file. But before we do that, the first thing to do is to create a new Worker object in main page. The constructor takes the name of worker script:

var worker = new Worker('worker.js');

Communication with a Worker via Message Passing

Communication between a worker and its parent page is done using an event model and the postMessage() method.

Below is an example of using a string to pass “Hello world, I’m web worker” to a worker in worker.js. The worker simply returns the message that was received.

Web Worker:

postMessage(“Hello world, I’m web worker”); // message sent from web worker running on background

Parent page:

worker.onmessage = function(event) {      // message receive event in parent page
    alert(event.data);
}

Web worker running on background & posting message

In the attached sample application, a web worker is created with the task of incrementing a variable ‘i’ and passing the variable as message to parent page.

Javascript setTimeout() function is used here to recursively call the function to increment ‘i’ at a particular time interval.

setTimeout():

The first parameter of setTimeout() is a function to be executed. The second parameter indicates the number of milliseconds before execution. (1000ms=1s)

In the sample application, at every 1 second of interval, the variable ‘i’ is incremented by 1 and the value is passed from web worker running on background to JS on front.

Worker.js

var i=0;
function timedCount() {
	i=i+1;
	postMessage(i);	
	setTimeout("timedCount()",1000);
}
timedCount();

Time triggered event: Vibration

Making a Tizen device vibrate is a good way to provide a subtle feedback to user or to interact with user even when the device volume is low. The vibration provides better user experience and therefore improves the perception of application.

In this sample application, the device will vibrate whenever a variable being incremented in background by the web worker reaches a specific value (Example case: if ‘i’ is divisible by 20). By this manner, a simple implementation of web workers in background of Tizen web application is achieved.

function Vibrate(){
    /* Vibrate for 1 second */
    navigator.vibrate(1000);
}

Power

Tizen enables the access of device's power resource though Power API. In general, background vibration (from screen off state) is not directly available for web apps unless Alarm API or Notification is used. To perform a vibration is not possible unless the screen is in ‘on’ state. So in the application, the screen would be turned on just before executing vibration.

To switch on the screen, turnScreenOn() method of the PowerManager interface has to be called.

tizen.power.turnScreenOn();

To request the CPU for web worker, request() method of PowerManager interface is used to assign the processor for web worker.

tizen.power.request("CPU","CPU_AWAKE");

Power privilege is required to be included in config.xml

<tizen:privilege name="http://tizen.org/privilege/power"/>

Once web worker is in action, the app will respond while minimized or being in background.

Termination of web worker

Once the purpose is served, a web worker can be terminated by using terminate() function. In example case, when ‘i’ reaches the value 99 the web worker is terminated.

worker.terminate();

Source Code

Please check the source code attached

Screenshots

After the app is launched, User has to tap the screen to generate a web worker. The web worker then will start a timer and post that count message to parent page and display on UI. When the number of received messages reach multiple of 20, the device vibrates and turn the screen on.