介绍

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

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

。

会尝试详细解释。

这两个之间的共同点是

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

Web Worker

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

服务人员

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

Service Worker 的生命周期

1。登记

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

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

if（导航器中的“serviceWorker”）{ // 将其包装在 try/catch/promises 中 等待 navigator.serviceWorker.register('/service-worker.js') }

2.安装

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

下面的代码我们需要写在service-worker.js

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

self.addEventListener('安装', (事件) => { // 进行你的操作 })

3.激活

安装后会跳转到这里

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

self.addEventListener('激活', (事件) => { // 执行你的操作 })

4。闲置的

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

5。获取/消息

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

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

self.addEventListener('fetch', (event) => { // 执行你的操作 })

6。终止

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

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

例子：-

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

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

chrome://serviceworker-internals/

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

笔记：-

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

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

1。获取事件

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

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

self.addEventListener('fetch', event => { // 处理获取事件 });

2.信息

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

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

self.addEventListener('消息', (事件) => { // 处理消息事件 })

3.推

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

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

self.addEventListener('push', (event) => { // 处理推送事件 })

4。同步事件

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

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

self.addEventListener('同步', (事件) => { // 处理后台同步事件 })

参考

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