为什么即使我禁用它，我的服务工作者也会缓存页面？答案

【问题标题】：Why does my service worker cache pages even if I disable it?为什么即使我禁用它，我的服务工作者也会缓存页面？
【发布时间】：2020-11-08 19:42:04
【问题描述】：

我使用Eleventy 开发静态网站francoscarpa.com。该网站使用服务工作者为用户提供离线功能。我所有的页面都是通过这个模板呈现的：

<!DOCTYPE html>
<html>
   <head>...</head>
   <body>
   ...
   <footer>...</footer>
   {% include "swRegistration.html" %}
   </body>
</html>

swRegistration.html有这个内容：

<script>
   if ("serviceWorker" in navigator) {
      window.addEventListener("load", function () {
         ...
         navigator.serviceWorker.register("/sw.js");
      });
   }
</script>

它基本上让我可以使用服务人员。 sw.js 文件的内容是这样的：

const CACHE_NAME = "static12";
const STATIC_FILES = [ ... ]; // the resources to cache

self.addEventListener("install", function (event) { ...  });
self.addEventListener("activate", function (event) { ... });
self.addEventListener("fetch", function (event) { ... });

我不明白的是，为什么即使我从生成的 HTML 文件中禁用 {% include "swRegistration.html" %} 行，服务工作者也会缓存资源：

<html>
   <head>...</head>
   <body>
   ...
   <footer>...</footer>
   <!-- {% include "swRegistration.html" %} -->
   </body>
</html>

如果我注释掉该行，则渲染的 HTML 页面不会正确显示它，并且当我在开发期间启动 Eleventy 的实时重载 Web 服务器时，该行不存在：

但是使用 Firefox 的 Inspector 分析页面，我看到每次页面刷新后 static12 缓存仍然存在，即使我手动删除它：

【问题讨论】：

标签： javascript caching service-worker static-site eleventy

【解决方案1】：

Service Worker 的生命周期独立于页面访问期间执行的正常 JavaScript 代码。注册服务工作者后，它不会因为您注释掉注册它的代码而被删除。因此，在您的情况下，服务工作者可能已经注册，这就是为什么您在注释掉注册代码后仍然看到正在创建缓存的原因。

您可以通过转到 Firefox 的 DevTools 中的 Application 选项卡并检查您的服务工作者是否显示为已注册来检查是否是这种情况。在这种情况下，您还应该看到一个手动取消注册的按钮。在旧版本的 Firefox 中（Application 标签是最近添加的），您可以改为在新标签中打开 about:debugging，它还会显示已注册的 Service Worker 列表。

如果您的 Service Worker 已经在实时站点上使用并且您想将其删除，您应该将一些代码输入到programmatically unregister the service worker。

【讨论】：