Service Worker开发的5个基本技巧

浏览器的Service Worker api允许网页设计师为访问者提供他们以前从未有过的东西：即使在离线时也可以访问网站或 Web 应用程序，无论是短期还是长期。

无论您是想确保访问者在通过火车隧道时仍能阅读您的网站，还是想创建不需要互联网连接的应用程序，服务人员都能提供完美的解决方案。

与服务人员一样出色，当您第一次开始编写代码时，会有一些障碍会减慢您的进度——除非您知道这些障碍是什么。本教程将为您提供五个关于 Service Worker 开发的基本技巧，我们希望它们能帮助您避免这些问题，并使您免于相关的故障排除难题。

在我们开始之前

如果您是服务工作者的新手，请查看我们的初学者课程 Simple Service Workers for Offline Websites和Jeremy Keith 的书 Going Offline，两者都可在 Envato Elements 上找到。

Service Workers 用于离线网页的简单 Service Workers Kezz Bracey

1.将你的 Service Worker 脚本放在根目录中

js当您编写第一个 Service Worker 时，最早可能会遇到的问题是，您可能会做您一直在做的事情，并将您的脚本放入名为or的子目录中scripts。但是，对于服务人员来说，这种普通的操作可能会出现问题。

原因是你的 Service Worker 的范围默认是由它的位置定义的。这意味着什么？这意味着如果您将脚本放在一个/js目录中，它的范围现在仅限于该/js目录。因此，它只能处理来自 的页面请求www.yoursite.com/js/，并且将完全忽略其他请求，例如那些通过www.yoursite.com或  www.yoursite.com/news/例如。

反过来，这种有限的范围意味着您将无法为您的大部分网站提供离线后备。为了让您的服务人员能够处理来自您网站任何部分的任何请求，它的范围需要是包罗万象的。

注意：您实际上可以在注册时覆盖您的服务工作者的默认范围，例如

navigator.serviceWorker.register('/sw.js', {
  scope: '/'
});

使用这种方法，如果这样做对您的项目非常重要，您仍然可以将所有脚本存放在子目录中。

但一般来说，最简单的方法是将你的 service worker 放在根目录中，从而自动将其范围设置为覆盖整个站点。

2.使用 chrome / Chromium Dev Tools 中的应用程序面板

虽然所有主要浏览器都支持服务工作者，但目前 Chrome 或 Chromium 可以说是开发它们的最佳浏览器。这是由于开发人员工具中的应用程序面板非常有用。当您完成开发过程时，您几乎将生活在此选项卡中：

在此选项卡中，有一个专门用于服务工作人员的部分，您可以在其中验证您的脚本是否已注册、处于活动状态并正在运行。您还可以使用此选项卡来模拟离线，暂时绕过您的服务人员，并手动取消注册您不再需要的以前的脚本。

3.不要使用硬重载

除了不将脚本放在子目录中之外，在将 Service Worker 放在一起时，您必须打破的另一个开发习惯是使用“Hard Reload”或“Empty Cache and Hard Reload”。在测试站点时，您可能已经这样做了数千次，使用该功能清除缓存并确保您看到开发更改的准确反映。但是对于服务人员来说，这不会得到预期的效果。

当您注册并激活了一个服务工作者时，任何“硬重载”的使用都将完全绕过它。您可能很难重新加载您的网站，看到您的代码没有按照您期望的方式执行并认为您犯了一个错误，但后来才意识到脚本从未运行过。

所以坏消息是“Hard Reload”和“Empty Cache and Hard Reload”在 Service Worker 开发过程中超出了范围，这导致我们进入下一个问题：

如果不能使用“Hard Reload”或“Empty Cache and Hard Reload”，如何正确刷新页面并测试 Service Worker 代码更改？

这个问题的答案在于以下两个提示：

4.选中“重新加载时更新”框

默认情况下，当您刷新正在测试 Service Worker 的页面时，您实际上不会看到任何代码更改的结果。这是因为您最初注册的脚本版本是在浏览器中保持活动状态的版本，即使在页面重新加载后也是如此，除非您采取明确的操作来更新它。

所以在这里，我们有一种情况，您可能正在刷新您的页面并想知道为什么您的代码更改没有生效，除非您知道服务人员的怪癖。

为确保您始终加载最新版本的脚本，请进入“应用程序”选项卡并选中“重新加载时更新”框。这样可以确保每次重新加载页面时（请记住，只使用正常重新加载，而不是硬重新加载），浏览器会自动为您更新 service worker。

注意：还有一个额外的选项可以单击您注册的服务人员旁边显示的更新链接，但使用重新加载的自动方法通常更容易。

5.检查并手动删除缓存对象

我们将要讨论的“应用程序”选项卡的最后一个非常方便的功能是能够查看存储在缓存中的对象，并根据需要手动删除它们。鉴于我们不想使用Empty Cache 和 Hard Reload，此功能将成为 service worker 开发过程的重要组成部分。

在Applications选项卡的左栏中，您将看到一个标有Cache Storage的区域。如果您扩展此区域，您将能够看到与当前 URL 相关的存储中保存的任何缓存对象。

单击这些项目中的任何一个，您可以检查它们的内容，这对于验证您要离线服务的资源是否被您的服务工作者正确添加到缓存中非常有帮助。

要删除不再需要的缓存对象，只需右键单击对象并选择Delete即可。

在此缓存对象删除功能和重新加载时更新复选框之间，您都可以坚持使用正常的页面重新加载，同时仍确保正确测试对工作的最新更改。

总结

• 一般来说，将服务工作者脚本放在项目的根目录中，以便整个站点都在其范围内。
  

• 开发时使用 Chrome / Chromium 的应用程序选项卡。

• 不要使用Hard Reload或Empty Cache 和 Hard Reload。
  

• 选中Application选项卡中的Update on Reload 框以确保注册的 service worker 是最新的。
  

• 根据需要通过应用程序选项卡的缓存存储部分手动删除缓存对象，您还可以在其中检查缓存对象内容。