gpt4 book ai didi

javascript - 如何回退到浏览器在 event.respondWith() 中的默认提取处理?

转载 作者:行者123 更新时间:2023-11-29 18:54:20 24 4
gpt4 key购买 nike

在服务 worker 中,我的获取处理程序如下所示:

self.addEventListener('fetch', function (event) {
event.respondWith(
caches.match(event.request).then(function (response) {
return response || fetch(event.request); //<-- is this the browser's default fetch handling?
})
);
});

方法 event.respondWith() 迫使我自己处理所有请求,包括 xhr 请求,这不是我喜欢做的。我只希望缓存的资源在可用时返回,让浏览器使用浏览器的默认提取处理来处理其余资源。

fetch(event.request) 我有两个问题:

  1. 只有在打开 devtools 时它才会生成 error。同时获取地址栏中可见的初始 URL https://test.de/x/#/page。它在初始安装和每次重新加载时都会发生:

    Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'ServiceWorkerGlobalScope': 'only-if-cached' can be set only with 'same-origin' mode`

    我不明白为什么,因为我没有设置任何东西

  2. 它似乎违反了 HTTP 协议(protocol),因为它试图请求一个带有 anchor 的 URL:

    Console: {"lineNumber":0, "message":"The FetchEvent for \"https://test.de/x/#/page\" resulted in a network error response: the promise was rejected.", "message_level":2, "sourceIdentifier":1, "sourceURL":""}`

fetch() 与浏览器的默认提取处理有何不同?这些差异是导致这些错误的原因吗?

附加信息和代码:

我的应用程序还利用与服务 worker 并行的好旧的 appCache(为了向后兼容)。我不确定 appcache 是否会在初始页面加载时干扰 service worker 安装。其余代码非常简单:

我在 https://test.de/x/#/page 的 index.html 使用了 appcache 和一个 base-href:

<html manifest="appcache" lang="de">
<head>
<base href="/x/"/>
</head>
...

在正文脚本中注册 Service Worker

window.addEventListener('load', {
navigator.serviceWorker.register('/x/sw.js')
});

安装并激活事件

let MY_CACHE_ID = 'myCache_v1';
let urlsToCache = ['js/main.js'];
self.addEventListener('install', function (event) {
event.waitUntil(
caches.open(MY_CACHE_ID)
.then(function (cache) {
return cache.addAll(
urlsToCache.map(url => new Request(url,
{credentials:'include'}))
)
})
);
});

self.addEventListener('activate', function (event) {
//delete old caches
let cacheWhitelist = [MY_CACHE_ID];
event.waitUntil(
caches.keys().then(function (cacheNames) {
return Promise.all(
cacheNames.map(function (cacheName) {
if (cacheWhitelist.indexOf(cacheName) === -1) {
return caches.delete(cacheName);
}
})
);
})
);
});

最佳答案

fetch(event.request) 应该非常接近默认值。 (你可以通过根本不调用 respondWith() 来获得实际的默认值。它应该大部分是不可观察的,但是有 CSP 和一些引用位。)

鉴于此,我不确定您是如何以 1 结尾的。这应该是不可能的。不幸的是,您没有提供足够的信息来调试正在发生的事情。

至于 2,它将片段传递给 service worker,但不会包含在最终的网络请求中。这与 Fetch 的定义和完成方式相匹配,以便为服务 worker 提供一些有时可能有用的额外上下文。

关于javascript - 如何回退到浏览器在 event.respondWith() 中的默认提取处理?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50062084/

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