Web Worker 与 Service Worker

介绍

当我第一次听说这些术语时，我想，好吧，他们正在用单独的线程做同样的事情。那么为什么我们需要这两个术语？

但说实话，这两个术语及其行为方式之间存在巨大差异。

会尝试详细解释。

这两者之间的共同点是

1. 它们在单独的线程中运行，不会阻塞 Javascript 的主单线程。

网络工作者

• 这里工作线程可以在不干扰主线程的情况下执行任务。
• 这些用于需要大量 CPU 的任务，例如图像操作/处理、繁重计算和数据处理。
• 它没有访问 DOM 的能力，并且无法拦截网络请求。
• 它没有生命周期

服务人员

• 它是一种具有附加功能的 Web Worker。
• 它可以独立于浏览器运行/即使浏览器关闭时也是如此。
• 它是 PWA 的核心组件，因为它们用于启用离线支持、后台同步和推送通知等功能。
• 它就像位于浏览器和网络之间的代理服务器。

Service Worker 的生命周期

1。报名

• 在这里，我们将告诉浏览器我们的 Service Worker javascript 文件所在的位置。

if ('serviceWorker' in navigator) {
// wrap it in try/catch / promisses
   await navigator.serviceWorker.register('/service-worker.js')
}

2。安装

• 当浏览器认为 Service Worker 是新的时，会触发 install 事件。

下面的代码我们需要将其写入service-worker.js

self.addEventListener('install', (event) => {
// do your operations
})

3。激活

• 安装后会跳转到这里

 self.addEventListener('activate', (event) => {
// Do your Operation
})

4。空闲

• 当 Service Worker 不执行任何操作时，它处于空闲状态。

5。获取/消息

• 每当发出网络请求/消息时，Service Worker 就会醒来并接管控制权

  self.addEventListener('fetch', (event) => {
  // Do your Opeation
})

6。终止

• 如果不使用，浏览器将终止 Service Worker 以节省内存。但当我们不知道时。

它将让服务人员保持很长时间。

示例：-

在 chrome 中打开此链接，您将看到许多 Service Worker 挂起，您可以执行很多操作，例如检查/启动和发送消息。

chrome://serviceworker-internals/

即使浏览器关闭，我们如何唤醒服务工作人员。

注意：-
对于这个具体我们可以使用push来唤醒，但是这个使用必须给Browser授予Notification权限，否则没办法。

当浏览器仍然打开时，其他方法也是相关的

1。获取事件

• 每当发出获取请求时都会触发此事件。

  self.addEventListener('fetch', event => {
  // Handle fetch event
});

2。留言

• 当从另一个脚本收到消息时会触发此事件。 （通信发生在 Service Worker + 其他 Javascript 文件中）

   self.addEventListener('message', (event) => {
// Handle message Event
})

3。推

• 收到推送消息时会触发此事件

  self.addEventListener('push', (event) => {
// Handle Push Event
})

4。同步事件

• 收到后台同步事件时会触发此事件。

  self.addEventListener('sync', (event) => {
// handle background Sync Event
})

参考

1. https://frontendmasters.com/courses/background-javascript

以上是Web Worker 与 Service Worker的详细内容。更多信息请关注PHP中文网其他相关文章！