0

我使用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) { ... });

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

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

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

在此处输入图像描述

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

在此处输入图像描述

4

1 回答 1

0

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

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

如果您的 service worker 已经在实时站点上使用并且您想将其删除，您应该输入一些代码以编程方式取消注册 service worker。

于 2020-07-30T13:34:05.103 回答