为什么我的 Service Worker 会缓存页面，即使我禁用了它？

Question

我开发静态网站francoscarpa.com using Eleventy。本网站使用 Service Worker 为用户提供离线功能。我所有的页面都是通过这个模板呈现的：

<!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>

它基本上让我可以使用 service worker。 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" %} 行，为什么 service worker 仍缓存资源：

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

如果我注释掉该行，呈现的 HTML 页面不会正确显示它，并且当我在开发过程中启动 Eleventy 的实时重新加载 Web 服务器时，该行不存在：

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

Answer 1

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

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

如果你的 service worker 已经在现场使用过，你想删除它，你应该在 programmatically unregister the service worker.

中输入一些代码

为什么我的 Service Worker 会缓存页面，即使我禁用了它？

Why does my service worker cache pages even if I disable it?

javascript

caching

service-worker

static-site

eleventy