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 开发者工具并转到“应用程序”选项卡->“服务工作者”，您将看到有关服务工作者状态的所有信息。

动图

安装

我们要做的最基本的例子是缓存所有文件。此外，您还可以定义要缓存的文件。因此，我们可以在安装步骤中处理这个问题。

在上面的代码中，我们所做的是：

1. 为我们的缓存定义一个名称（mullinstack.com-v1）。
2. 定义要缓存的文件。我们定义了一个数组。
3. 在安装 eventListener 内部，我们告诉浏览器等待承诺得到解决，并且在该函数内部，我们打开了一个将以 mullinstack.com-v1 名称存储的缓存。
4. 最后，我们将之前定义的所有文件添加到缓存中。

删除所有不需要的缓存

现在，我们需要删除所有不需要的旧版本缓存。

返回响应

如果我们无法返回缓存内容，以上这些都无关紧要。所以，你可能想返回一个缓存的响应，对吧？

这在我们现在要创建的 fetch 事件中是可能的。

完整代码

感谢阅读！如果觉得这个故事有趣，请分享给你的朋友，我会非常感激。

欢迎通过我的博客和Medium与我联系