1

我正在尝试创建我的第一个服务人员（已将我的本地服务器离线以测试该状态）。我在一个名为 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 上搜索本地主机 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

4

1 回答 1

4

你的问题是什么？:-)

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

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

我建议您阅读有关该主题的 Google 网络基础指南并查看serviceworke.rs中的一些工作示例。您应该真正阅读指南，而不仅仅是开始一起编写一些代码 -有很多事情要错过，可能会导致各种错误。

于 2017-11-02T12:32:06.537 回答