WebWorker SharedWorker ServiceWorker

WebWorker 是什麼?

• 爲 JavaScript 引入線程技術 沒必要再用 setTimeout()、setInterval()、XMLHttpRequest 來模擬並行
• Worker 利用相似線程的消息傳遞實現並行。這很是適合您確保對 UI 的刷新、性能以及對用戶的響應。
• Web Worker 的三大主要特徵：可以長時間運行（響應），理想的啓動性能以及理想的內存消耗。

它容許在 Web 程序中併發執行多個 JavaScript 腳本，每一個腳本執行流都稱爲一個線程，彼此間互相獨立，而且有瀏覽器中的 JavaScript 引擎負責管理。這將使得線程級別的消息通訊成爲現實。使得在 Web 頁面中進行多線程編程成爲可能。

專用 Web Worker (Dedicated Web Worker) 提供了一個簡單的方法使得 web 內容可以在後臺運行腳本。一旦 worker 建立後，它能夠向由它的建立者指定的事件監聽函數傳遞消息，這樣該 worker 生成的全部任務就都會接收到這些消息。

WebWorker 的類型

一個是專用線程 Dedicated Worker(普通的Worker)，一個是共享 Shared Worker。
後來又有了Service Worker

Webworker的支持狀況

http://caniuse.com/#search=shared
Service Worker 支持狀況不佳 Chrome 40+ 才支持

使用入門

和windows線程通訊一個機制 發消息 接收消息

參考
http://www.html5rocks.com/zh/tutorials/workers/basics/
http://www.ibm.com/developerworks/cn/web/1112_sunch_webworker/
http://tutorials.jenkov.com/html5/web-workers.html

Debug

chrome://inspect/#workers Worker Debug頁
經過這個頁面能夠肯定

專用Worker Dedicated Worker

建立一個新的 worker 十分簡單。你所要作的就是調用 Worker() 構造函數，指定一個要在 worker 線程內運行的腳本的 URI，若是你但願可以收到 worker 的通知，能夠將 worker 的 onmessage 屬性設置成一個特定的事件處理函數。

var myWorker = new Worker("my_task.js");
myWorker.onmessage = function (oEvent) {
    console.log("Called back by the worker!\n");
};

或者，你也能夠使用 addEventListener()：

var myWorker = new Worker("my_task.js");
myWorker.addEventListener("message", function (oEvent) {
    console.log("Called back by the worker!\n");
}, false);
    myWorker.postMessage(""); // start the worker.

中止 Worker 的方法有兩種：在主網頁中調用 worker terminate()，或在 Worker 自己內部調用 self.close()。

Worker的做用域

self 和 this 指的都是 Worker 的全局做用域
所以下面兩種方式是相同的

self.addEventListener('message', function(e) {
      self.postMessage('Unknown command: ' + data.msg);
}, false);
addEventListener('message', function(e) {
      postMessage('WORKER STARTED: ' + data.msg);
}, false);

一些Demo參考 https://github.com/greenido/Web-Workers-Examples- (SharedWorker也包含在內)

import 和 子worker(Chrome並不支持)

import能夠引入其餘的JS

WebWorker限制

• DOM（非線程安全）
• window 對象
• document 對象
• parent 對象

SharedWorker

參考
https://github.com/mdn/simple-shared-worker
http://tutorials.jenkov.com/html5/web-workers.html
An ordinary web worker is only accessible by the page that created it. If you want to share a web worker between multiple pages, you can use a SharedWorker. A SharedWorker is accessible by all pages that are loaded from the same origin (domain).

The SharedWorker interface represents a specific kind of worker that can be accessed from several browsing contexts, such as several windows, iframes or even workers. They implement an interface different than dedicated workers and have a different global scope,

If SharedWorker can be accessed from several browsing contexts, all those browsing contexts must share the exact same origin (same protocol, host and port).

建立一個SharedWorker

var worker = new SharedWorker("/html5/web-worker-shared.js");
worker.port.addEventListener("message",
        function(event) {
            alert(event.data);
        }
        , false
);
worker.port.start();

或者使用

worker.port.onmessage = function(e){
            log.textContent = e.data;
            console.log(e.data);
        };

此種方式不須要worker.port.start(); 可是存在事件被覆蓋的問題

實現SharedWorker

onconnect = function (e) {
    var port = e.ports[0];
    port.postMessage('A new connection! The current connection number is ' + connect_number);
    port.onmessage = function (e) {
        var instruction = e.data.instruction || e.data;
        var results = execute_instruction(instruction);
        port.postMessage('...');
    };
    port.start();
};

Demo參考https://github.com/mdn/simple-shared-worker

SharedWorker 能夠作什麼

• load further scripts with importScripts()
• attach error handlers, and
• run the port.close() method to prevent further communication on a specific port.

Shared web workers probably won’t be a viable technology for a couple of years, but they raise exciting opportunities for the future of JavaScript development. Let’s hope browser vendors can supply a few decent tracing and debugging tools!

WebWorker和SharedWorker區別

Very basic distinction: a Worker can only be accessed from the script that created it, a SharedWorker can be accessed by any script that comes from the same domain.

SharedWorker's seem to have more functionality then Worker.
Among that functionality is :

• A shared global scope. All SharedWorker instances share a single global scope.
• A shared worker can work with multiple connections. It posts messages to ports to allow communication between various scripts.
• A dedicated worker on the other hand is simply tied to its main connection and cannot post messages to other scripts (workers).

ServiceWorker

A Service Worker inherits all the limitations and behaviors available to HTML5 Shared Workers. It can create XMLHttpRequests, use WebSockets, receive messages from windows and the browser, use IndexedDB, and post messages to other windows.

Service workers are expected to provide a function at global scope, named onconnect. The browser will invoke onconnect at startup time, passing in an event. The worker should access the ports property of this event to extract a stable communication port back to the browser, and persist it for the life of the worker

參考
http://www.w3ctech.com/topic/866
http://www.html5rocks.com/en/tutorials/service-worker/introduction/
http://www.html5online.com.cn/articles/2015051201.html
https://github.com/csbun/blog/blob/master/_posts/2015-06-02-service-worker.markdown

個人Demo

https://github.com/lumixraku/repo/tree/master/WebWorker/ServiceWorker

ServiceWorker 和 SharedWorker

The ServiceWorker is like a SharedWorker in that it:

• Runs in its own global script context (usually in its own thread)
• Isn't tied to a particular page
• Has no DOM access

Unlike a SharedWorker, it:

• Can run without any page at all
• Can terminate when it isn't in use, and run again when needed (e.g., it's event-driven)
• Has a defined upgrade model

• Is HTTPS only (more on that in a bit)

  關於第一點 若是全部引用SharedWorker的頁面都關了話 SharedWorker就不存在了 ServiceWorker不是

http://stackoverflow.com/questions/28882289/service-worker-vs-shared-worker

A service worker has additional functionality beyond what's available in shared workers, and it has a longer lifespan
serviceworker要比SharedWorker多一些功能 且有更長的生命週期
service和shared同樣能夠對 message 做響應
service還能夠處理fetch事件(能夠攔截網絡請求) 以及從cache中作出響應
還有個區別就是生命週期
一個service註冊到一個域名後 就是永久註冊 (若是相關文件改變了 service就會更新)

We can use ServiceWorker:

• To make sites work faster and/or offline using network intercepting
• As a basis for other 'background' features such as push messaging and background synchronization

如今service worker的最佳使用場景是提供離線能力。開發人員能夠註冊一個service worker做爲網絡代理提供網絡攔截。即便沒有可用的網絡時，這個代理也可以對緩存的數據和資源或者是已經生成的內容做出響應

和現有的HTML5數據緩存功能有很大的不一樣，service worker的離線能力是可編程的。Russell稱它是一個：「讓你作出選擇去作哪些事的、可編程的、瀏覽器內置的代理」。因爲service worker運行於後臺，它和當前的Web頁面徹底獨立

因爲安全問題，ServiceWorker 只能在 HTTPS 環境下運行, 另外localhost 也OK。

更新service worker

若是sw有更新 下次訪問的時候就會從新下載sw 且從新觸發install 可是此時舊的worker仍然在管理着cache 新sw處於waiting狀態 現有頁面關閉後舊的sw就會被清掉 新sw接管 觸發activate事件