JavaScript 服务工作者可视化
什么是 Service Worker？
关于服务人员需要考虑的事实
Service Worker 如何工作？概览
Service Worker 生命周期
最常见的用例
Web 推送
更复杂的用例
亲自动手，精通技艺
返回响应
完整代码
最初发表于Medium
想必大家或多或少都听说过 JavaScript 生态系统中的新成员——Service Worker。它可是现代 Web 开发中不可或缺的一部分。近年来，它们备受瞩目，这都得益于渐进式 Web 应用（PWA）的流行。
当我听到这个消息时，我最大的疑问是：“我们应该什么时候使用服务工作者？我们可以在哪些场景或环境下应用它们？”
在本文中，我们将看到一些实际案例，它们能够很好地服务于我们的最终用户。最终的目标是让他们真正满意，对吧？
话虽如此，在开始讨论实际案例之前，我认为最好先了解一下服务工作者的一些基础知识。对于新手来说，这是一个很好的总结，为了向他们致敬，我们将其整理成一个表格。
什么是 Service Worker？
Service Worker 本质上是浏览器在后台运行的脚本。请记住，它完全独立于它正在处理或服务的网页。
实际上，它们充当着代理服务器的角色，位于 Web 应用程序、浏览器和网络之间。还有什么疑问吗？希望没有。
服务工作者使 Web 应用程序能够像原生应用程序一样运行。
关于服务人员需要考虑的事实
- 它们不能直接访问 DOM。它使用一种通过 postMessage 接口发送消息来响应的机制。
- 不使用时终止。这意味着它们是事件驱动的。
- 利用 ES6 承诺。
- 由于它们功能强大，因此只需通过 HTTPS 即可使用，除非在本地主机上无需 HTTPS 即可使用。但是，如果您上传到远程服务器，则需要安装 HTTPS。
Service Worker 如何工作？概览
基本上，它们赋予应用程序拦截网络请求、缓存这些请求的能力，从而提升应用程序的性能。这种性能提升是因为你之前已经缓存了所有内容。
然而，“一图胜千言”，所以，为了更好地理解，让我们看下一张图片。
Service Worker 生命周期
正如我之前提到的，Service Worker 的工作方式独立于它所控制的页面。如果你想在你的 Web 应用中安装 Service Worker，首先要做的就是注册它。
完成后，启动 Service Worker 安装的浏览器将进入后台。为了更好地理解，我们来看下图。
最常见的用例
现在我们对服务工作者的工作方式有了更好的了解，现在是时候了解它们的最常见用途了。
缓存支持
Service Worker 可以在一系列缓存策略下使用。关于这些缓存策略，有以下用例：
-
仅缓存——您拥有永远不会改变的静态内容。
-
网络或缓存——如果您想向用户显示最新的内容，唯一的条件/愿望就是更快地加载它。
-
缓存和更新——您希望立即显示内容，并且不介意暂时与服务器不同步。
-
缓存、更新和刷新——您希望在后台检索新内容时立即显示内容。一旦新内容可用，您希望以某种方式显示它。
Web 推送
Web 推送允许应用程序发送推送通知，然后在收到通知后带回内容。
-
推送和检索有效载荷——您希望在内容到达时将其传送并带回。
-
推送有效载荷——您不仅希望传递文本，还希望传递不同类型的有效载荷，从而使您的信息更加丰富。
-
推送丰富内容 — 您希望显示图像、振动以及任何其他可以丰富您想要传递的信息的内容。
-
推送客户端——您希望根据应用程序的状态显示不同的通知。
更复杂的用例
API 分析
我有一个 Web 应用。因此，我想添加跟踪其使用情况的功能，并使用同步 API 定期上传收集到的数据。
负载均衡器
您希望根据服务器可用性动态选择最佳内容提供商。在这种情况下，您需要一个 Service Worker 来拦截对资源的请求，并根据其可用性选择最合适的内容提供商。
我强烈建议您查看ServiceWorke.rs上有关如何使用服务工作者的完整集合、实际示例以及更多内容。
亲自动手，精通技艺
正如我常说的：“跳入水中，看看你是否会游泳。”阅读这篇文章很有趣，但真正的乐趣始于你弄脏手指的时候。
注册 Service Worker
如果我们快速回顾一下上面描述 Service Worker 生命周期的图片，首先要做的就是安装它。为此，需要注册它的步骤。
现在，您可以访问 Chrome://inspect/#service-workers 检查所有服务工作线程是否正在运行（Chrome 检查图像）。
另外，如果您打开 Chrome 开发者工具并转到“应用程序”选项卡->“服务工作者”，您将看到有关服务工作者状态的所有信息。
安装
我们要做的最基本的例子是缓存所有文件。此外，您还可以定义要缓存的文件。因此，我们可以在安装步骤中处理这个问题。
在上面的代码中，我们所做的是：
- 为我们的缓存定义一个名称（mullinstack.com-v1）。
- 定义要缓存的文件。我们定义了一个数组。
- 在安装 eventListener 内部，我们告诉浏览器等待承诺得到解决，并且在该函数内部，我们打开了一个将以 mullinstack.com-v1 名称存储的缓存。
- 最后，我们将之前定义的所有文件添加到缓存中。
删除所有不需要的缓存
现在，我们需要删除所有不需要的旧版本缓存。
返回响应
如果我们无法返回缓存内容，以上这些都无关紧要。所以，你可能想返回一个缓存的响应，对吧？
这在我们现在要创建的 fetch 事件中是可能的。
完整代码
感谢阅读！如果觉得这个故事有趣，请分享给你的朋友，我会非常感激。
欢迎通过我的博客和Medium与我联系
文章来源：https://dev.to/blarzhernandez/javascript-service-workers-visualized-1683