服务工作者可以做什么,网络工作者不能？

Question

服务工作者可以做什么,网络工作者不能？或相反亦然？

Web工作者似乎是服务工作者功能的一个子集.它是否正确？

Answer 1

它们的用途有很大不同:

网络工作者

Web Workers为Web内容提供了一种在后台线程中运行脚本的简单方法.工作线程可以在不干扰用户界面的情况下执行任务.此外,他们可以使用XMLHttpRequest执行I/O(尽管responseXML和channel属性始终为null).一旦创建,工作人员就可以通过将消息发布到由该代码指定的事件处理程序来向创建它的JavaScript代码发送消息(反之亦然).

来源 - 使用Web Workers

服务人员

服务工作者本质上充当代理服务器,位于Web应用程序,浏览器和网络(如果可用)之间.它们旨在(除其他外)能够创建有效的离线体验,拦截网络请求并根据网络是否可用以及更新的资产驻留在服务器上采取适当的操作.它们还允许访问推送通知和后台同步API.

来源 - Service Worker API

因此,Web Workers可以在不导致用户界面冻结的情况下运行昂贵的脚本,而Service Workers可用于修改网络请求的响应(例如,在构建脱机应用程序时).

Answer 2

Buksy的答案是正确的,但在我看来,它没有回答原来的问题,即:"服务工作者可以做什么,网络工作者不能做什么？反之亦然？"

它们的生命周期和每个原点的实例数量存在根本差异.简而言之:

               | Web Workers  | Service Workers  |
|--------------|--------------|------------------|
| Instances    | Many per tab | One for all tabs |
| Lifespan     | Same as tab  | Independent      |
| Intended use | Parallelism  | Offline support  |

Buksy的答案基本上是表格的最后一行.图片来源:我从第35张幻灯片开始,从Nolan Lawson的" 揭秘网络工作者和服务工作者"中取得了这个表格.

特别是,以下是如何生成和终止Web worker:

使用Web Workers

而服务工作者有自己的生命周期,这无疑是他们"最复杂的部分":

服务工作者生命周期

因此,生命周期是两者之间的一个根本区别(其预期用途的结果).

以前在浏览器支持方面存在巨大差异:直到11.3(2018年3月29日),Safari for iOS中的服务工作者根本无法使用,请参阅我可以使用服务工作者吗？相比之下,网络工作者在2012年已经有了更好的浏览器支持:我可以使用网络工作者吗？

跨浏览器的API支持存在细微差别,请参阅HTML5 Worker Test(也是Nolan Lawson).在特定的浏览器中,一种工作者可能支持某种API调用而另一种则不支持.访问该页面并测试您自己的浏览器!

Answer 3

服务人员

Service Worker 是浏​​览器和网络之间的代理。通过拦截文档发出的请求，服务工作者可以将请求重定向到缓存，从而实现离线访问。

/* main.js */

navigator.serviceWorker.register('/service-worker.js');



/* service-worker.js */

// Install 
self.addEventListener('install', function(event) {
    // ...
});

// Activate 
self.addEventListener('activate', function(event) {
    // ...
});

// Listen for network requests from the main document
self.addEventListener('fetch', function(event) {
    // ...
});

网络工作者

Web Worker 是通用脚本，使我们能够从主线程卸载处理器密集型工作。

/* main.js */

// Create worker
const myWorker = new Worker('worker.js');

// Send message to worker
myWorker.postMessage('Hello!');

// Receive message from worker
myWorker.onmessage = function(e) {
  console.log(e.data);
}

原帖在这里