<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Shared Web Worker Demo</title>
</head>
<body>
<h1 id="resultContainer"></h1>
<input type="text" id="inputString" value="Hello" placeholder="Enter a string">
<button id="lengthButton">Get Length</button>
<script>
    var lengthWorker = new SharedWorker("calculateLengthWorker.js"),
            resultContainer = document.getElementById("resultContainer"),
            lengthButton = document.getElementById("lengthButton"),
            inputString = document.getElementById("inputString");

    lengthButton.addEventListener("click", function () {
        resultContainer.innerText = "";
        lengthWorker.port.postMessage({
            string:inputString.value
        });
    });
    //start the worker
    lengthWorker.port.start();
    //Success Handler for the worker
    lengthWorker.port.addEventListener("message", function (workerEvent) {
        var responseData = workerEvent.data,
                result = responseData.result;
        resultContainer.innerText = "Result: " + result;
    });
</script>
</body>
</html>
self.addEventListener("connect", function (event) {
    var port = event.ports[0];
    port.addEventListener("message", function (event) {
        var requestData = event.data,
            inputString = requestData.string,
            stringLength = inputString.length;
        port.postMessage({result:stringLength});
    }, false);
    port.start();
}, false);
Shared Web Worker