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" }}
        )
        );
    }
});

这就是我在网页上得到的内容：

无法访问此网站

无法访问此网站

localhost拒绝连接。

在Google上搜索localhost 8443

ERR_CONNECTION_REFUSED

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

07：42：35.401导航到chrome-error：// chromewebdata /

07：42：36.453获取脚本时发生未知错误。

07：42：36.453 localhost：8443 / serviceworker.js无法加载资源：

净:: ERR_CONNECTION_REFUSED

Answer 1

你的问题是什么？： - ）

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

如果您的目标是缓存网站，那么您必须这样做。现在SW没有这样做。

我建议您阅读有关该主题的Google's Web Fundamentals指南，并查看serviceworke.rs中的一些实际示例。 你应该真正阅读指南，而不仅仅是开始黑客攻击一些代码 - 有很多东西要错过，可能导致各种错误。

服务工作者创建问题：ERR_CONNECTION_REFUSED

1 个答案: