培养 Service Worker：不容错过的 5 个重要技巧

浏览器的 service worker api 允许 web 设计者为访问者提供他们以前从未有过的东西：即使在离线状态下（无论是短时间还是长时间）也可以访问网站或 web 应用程序。

p>

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

尽管 Service Worker 非常出色，但当您第一次开始对其进行编码时，会有一些障碍可能会减慢您的进度 – 除非您预先意识到这些障碍是什么。本教程将为您提供 Service Worker 开发的五个基本技巧，我们希望它们能够帮助您避免这些问题，并让您免于相关的故障排除麻烦。

开始之前

如果您是 Service Worker 新手，请查看我们的初学者课程《离线网站的简单 Service Workers》和 Jeremy Keith 的书《Going Offline》，这两本书都可以在 Envato Elements 上找到。

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

当您编写第一个服务时可能会遇到的最早问题
工人，你可能会做你一直做的事情并把你的脚本
进入名为 js 或 scripts 的子目录。然而，对于服务人员来说，这种普通的操作可能会出现问题。

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

这种有限的范围反过来意味着您将无法为网站的大部分内容提供离线后备。为了使您的 Service Worker 能够处理来自站点任何部分的任何请求，其范围必须是包罗万象的。

注意：您实际上可以在注册时覆盖 Service Worker 的默认范围，例如

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