Service Workers 创建问题：ERR_CONNECTION_REFUSED

Question

我正在尝试创建我的第一个服务工作者（已将我的本地服务器置于离线状态以测试该状态）。我在下面的一个名为 app.js:

的文件的顶部编写了代码

if ("serviceWorker" in navigator){
    navigator.serviceWorker.register("serviceworker.js")
    .then(function(registration){
        console.log("Service Worker registered with scope:", registration.scope);
    }).catch(function(err){
        console.log("Service Worker registration failed:", err);
    });
}

然后在 serviceworker.js 文件中我有：

self.addEventListener("fetch", function(event){
    if (event.request.url.includes("bootstrap.min.css")) {
    event.respondWith(
        new Response(
            ".hotel-slogan {background: green!important;} nav { display:none }",
            { headers: { "Content-Type": "text/css" }}
        )
        );
    }
});

这是我在网页上得到的：

无法访问此站点

This site can’t be reached

localhost refused to connect.

Search Google for localhost 8443

ERR_CONNECTION_REFUSED

这是我在 Chrome 控制台中看到的消息：

07:42:35.401 Navigated to chrome-error://chromewebdata/

07:42:36.453 An unknown error occurred when fetching the script.

07:42:36.453 localhost:8443/serviceworker.js Failed to load resource:

net::ERR_CONNECTION_REFUSED

Answer 1

你的问题是什么？ :-)

这是完全正常的。如果您想让您的网站脱机可用，那么 SW 脚本不会为您做这件事。您的 SW 所做的是：如果由 SW 控制的客户端请求 bootstrap.min.css，则 SW 在代码中使用该字符串进行响应。否则它什么都不做。

如果您的目标是缓存站点，那么您必须这样做。现在SW不做了

我建议你阅读 Google's Web Fundamentals guide on the topic and check some working examples from serviceworke.rs。 你真的应该阅读指南，而不是只是开始一起破解一些代码 – 有很多东西要遗漏，可能会导致各种错误.

Service Workers 创建问题：ERR_CONNECTION_REFUSED

Service Workers creation issue: ERR_CONNECTION_REFUSED

javascript

service-worker

progressive-web-apps

service-worker-events