gpt4 book ai didi

javascript - 服务 worker : No FetchEvent for javascript triggered request?

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:32:04 25 4
gpt4 key购买 nike

我使用的是 Chrome 稳定版 46。

我有一个非常基本的网站。一个按钮。单击那个 fetch('a')和一个<a>打开 b 的标签.两个网址 ab不存在,我打算在 service worker 中捕获它们并返回一个 new Response() .

如果我点击获取 a 的按钮,服务人员不参与,我收到 404 错误。
但是,如果我单击转到 b 的链接,服务 worker 获取并返回响应。

问题:为什么 service worker 没有为 fetch('a') 获取任何 FetchEvent|要求?

查看下面的文件

HTML

<html>
<body>
<p><button onclick="fetch('a');">fetch a</button></p>
<p><a href="b">go to b</a></p>
<script src="js.js" defer></script>
</body>
</html>

js.js

navigator.serviceWorker.register('sw.js');

sw.js

self.onfetch = function(event) {
var request = event.request;
event.respondWith(
caches.match(request).then(function(response) {
return new Response('here is your onfetch response');
})
);
};

最佳答案

Service Worker 的 fetch 事件处理程序不会在您第一次加载页面时被调用,因为 Service Worker 尚未“认领”该页面,这意味着它不在 Service Worker 的控制之下.默认情况下,当您第一次访问注册了 Service Worker 的网站时,Service Worker 的 install(可能还有 activate)事件处理程序将运行,但是 fetch 在 service worker 取得控制权之前不会被触发。下次您导航到 Service Worker 范围内的页面时,或者您重新加载当前页面时,就会发生这种情况。

您可以通过在 activate 事件处理程序中调用 self.clients.claim() 来覆盖此默认行为并让服务 worker 在初始导航期间控制。

我还想指出,您示例中的 fetch 事件处理程序存在一些问题 — 如果您是总是计划返回一个新的 Response 对象。更重要的是,您需要对 event.request.url 值进行某种检查,如果它与您的“特殊”URL 之一匹配,则只返回新的 Response,在您的例子中是 ab。现在的实现方式是,您的fetch 处理程序将无条件返回虚拟Response,即使它是对您的主页的后续请求(index.html)。这可能不是您想要的。

我放了一个gist together修改您的服务人员代码以完成我认为您正在尝试的工作。你可以试试 live version感谢 RawGit。为了后代,这里是修改后的服务 worker 代码:

self.addEventListener('install', event => {
// Bypass the waiting lifecycle stage,
// just in case there's an older version of this SW registration.
event.waitUntil(self.skipWaiting());
});

self.addEventListener('activate', event => {
// Take control of all pages under this SW's scope immediately,
// instead of waiting for reload/navigation.
event.waitUntil(self.clients.claim());
});

self.addEventListener('fetch', event => {
// In a real app, you'd use a more sophisticated URL check.
if (event.request.url.match(/a|b$/)) {
event.respondWith(new Response('here is your onfetch response'));
}
});

关于javascript - 服务 worker : No FetchEvent for javascript triggered request?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33978993/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com