服务工作者发展的5个基本技巧_极简慕枫

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

无论您是想确保访问者在通过火车隧道时仍然可以阅读您的网站，或者您想要创建不需要互联网连接的应用程序，服务工作者都能提供完美的解决方案。郑州高端网页设计

和服务工作者一样，当你第一次开始对它们进行编码时，会有一些阻碍你进度的障碍 - 除非你知道这些障碍是在前面。本教程将为您提供服务工作者开发的五个基本技巧，我们希望他们能帮助您避免这些打嗝并避免相关的故障排除问题。

1.将您的服务工作者脚本放在根目录中

当您编写第一个服务工作者时，最早可能导致您失误的问题是您可能会执行您经常执行的操作并将您的脚本放入名为js或的子目录中scripts。但是，对于服务人员来说，这种普遍的行动可能会有问题。

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

这种有限的范围反过来意味着您将无法为您的大部分网站提供离线后备广告。为了使您的服务工作者能够处理来自您网站任何部分的任何请求，其范围必须是无所不包的。

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

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

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

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

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

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

3.不要使用硬重装

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

当您的服务工作者注册并处于活动状态时，任何使用“Hard Reload”都将完全绕过它。您可能很难重新加载您的网站，看到您的代码没有以您期望的方式执行并认为您犯了一个错误，只是意识到以后脚本从未运行过。

所以坏消息是“Hard Reload”和“Empty Cache and Hard Reload”在服务工作者开发过程中不受限制，引导我们进入下一个问题：

如果您不能使用“Hard Reload”或“Empty Cache and Hard Reload”，如何正确刷新页面并测试服务工作者代码更改？

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

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

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

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

要确保始终加载最新版本的脚本，请转到“ 应用程序”选项卡，然后选中“ 重新加载时更新”框。这确保了每次重新加载页面时（并且记住，只使用正常的重新加载，而不是硬重新加载），浏览器将自动为您更新服务工作者。

注意：还有一个附加选项可以单击注册服务工作者旁边显示的“ 更新”链接，但在重新加载时使用自动方法通常更容易。

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

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

在“ 应用程序”选项卡的左侧列中，您将看到标记为“ 高速缓存存储”的区域。如果展开此区域，您将能够看到存储中保存的与当前URL相关的任何缓存对象。

单击这些项目中的任何一项，您都可以检查其内容，这对于验证您希望脱机服务的资源是否正由服务工作者正确添加到缓存非常有用。

要删除不再需要的缓存对象，只需右键单击一个对象并选择“ 删除”。

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

总结一下

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

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

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

• 检查“ 应用程序”选项卡 中的“ 重新加载时更新”框，以确保已注册的服务工作者是最新的。
  

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

郑州高端网页设计