mdk5基本使用技巧_服务人员发展的5个基本技巧

mdk5基本使用技巧

用于浏览器的Service Worker API使Web设计人员可以为访问者提供以前从未有过的东西：访问站点或Web应用程序，即使是脱机，无论是短期还是长期。

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

就像服务人员一样出色，当您第一次开始对它们进行编码时，会有一些障碍会减慢您的进度，除非您不知道这些障碍是什么。 本教程将为您提供服务人员开发的五个基本技巧，我们希望它们能帮助您避免这些麻烦，并避免您因相关的故障排除而感到头疼。

开始之前

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

当您编写第一个服务工作者时，最早可能使您失望的是，您可能会做所有事情，然后将脚本放入名为js或scripts的子目录中。 但是，对于服务人员，这种常规操作可能会出现问题。

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

这种有限的范围又意味着您将无法为大多数网站提供离线后备。 为了使服务人员能够处理来自站点任何部分的任何请求，其范围必须是无所不包的。

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

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

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

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

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

尽管所有主要浏览器都支持服务人员，但目前可以说Chrome或Chromium是开发它们的最佳浏览器。这是由于开发人员工具中非常有用的“ 应用程序”面板所致。 在进行开发过程时，几乎可以使用以下选项卡：

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

3.不要使用硬重装

除了不将脚本放在子目录中之外，将服务人员组合在一起时，您还必须打破另一种开发习惯，即使用“硬重载”或“空缓存和硬重载”。 在测试站点时，您可能已经完成了数千次此操作，使用该功能清除了缓存并确保您看到开发更改的准确反映。 但是对于服务人员，这将无法获得理想的效果。

当您注册并处于活动状态的服务人员时，任何对“ Hard Reload”的使用都将完全绕过它。 您可能很难重新加载您的站点，看到您的代码没有按照您期望的方式执行，并认为您犯了一个错误，但后来才意识到脚本从未在最初运行过。

因此，坏消息是在服务人员开发期间，“硬重载”和“空缓存和硬重载”已超出范围，这使我们想到了下一个问题：

如果无法使用“硬重载”或“空缓存和硬重载”，如何正确刷新页面并测试服务人员代码更改？

该问题的答案在于以下两个技巧：

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

默认情况下，当刷新要在其上测试服务人员的页面时，实际上不会看到任何代码更改的结果。 这是因为您最初注册的脚本版本是即使在重新加载页面后仍在浏览器中保持活动的版本，除非您采取显式操作进行更新。

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

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

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

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

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

在“ 应用程序”选项卡的左列中，您将看到一个标签为Cache Storage的区域。 如果扩展此区域，您将能够查看存储中与当前URL相关的所有缓存对象。

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

要摆脱不再需要的缓存对象，只需右键单击一个对象并选择Delete即可 。

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

总结

• 通常，将服务工作者脚本放在项目的根目录中，以便整个站点都在其范围内。
  
• 在开发过程中使用Chrome / Chromium的“应用程序”标签。
• 不要使用硬重载或空缓存和硬重载 。
  
• 选中“ 应用程序”选项卡中的“ 重新加载时更新”框，以确保注册的服务工作者是最新的。
  
• 根据需要，通过“ 应用程序”选项卡的“ 缓存存储”部分手动删除缓存对象，您还可以在其中检查缓存对象的内容。
  

有关服务工作者的更多信息，请查看我们的新课程《离线网站的简单服务工作者》以及Jeremy Keith的书《脱机》，该书现已在Envato Elements上提供。

翻译自: https://webdesign.tutsplus.com/tutorials/5-essential-tips-for-service-worker-development--cms-31424

mdk5基本使用技巧