Service Worker 缓存未将超时识别为一项功能

Question

我正在观看 Steve Sanderson's NDC presentation on up-and-coming web features，并将他的缓存示例视为我正在开发的应用程序的主要候选者。我找不到代码，所以我尽我所能从 Youtube 视频中输入了代码。

不幸的是，它在 Chrome 中不起作用（这也是他在演示中使用的）它因 Uncaught TypeError: fetch(...).then(...).timeout is not a function at self.addEventListener.event 而失败。

我翻遍了 Steve's Github，没有找到任何相关信息，在 NDC 会议页面上也找不到任何内容

//inspiration: 
//            https://www.youtube.com/watch?v=MiLAE6HMr10

//self.importScripts('scripts/util.js');

console.log('Service Worker script running');
self.addEventListener('install', event => {
    console.log('WORKER: installing');
    const urlsToCache = ['/ServiceWorkerExperiment/', '/ServiceWorkerExperiment/scripts/page.js'];
    caches.delete('mycache');
    event.waitUntil(
            caches.open('mycache')
            .then(cache => cache.addAll(urlsToCache))
            .then(_ => self.skipWaiting())
            );
});
self.addEventListener('fetch', event => {
    console.log(`WORKER: Intercepted request for ${event.request.url}`);
    if (event.request.method !== 'GET') {
        return;
    }

    event.respondWith(
            fetch(event.request)
            .then(networkResponse => {
                console.log(`WORKER: Updating cached data for ${event.request.url}`);
                var responseClone = networkResponse.clone();
                caches.open('mycache').then(cache => cache.put(event.request, responseClone));
                return networkResponse;
            })
            //if network fails or is too slow, return cached data
            //reference for this code: https://youtu.be/MiLAE6HMr10?t=1003
            .timeout(200) 
            .catch(_ => {
                console.log(`WORKER: Serving ${event.request.url} from CACHE`);
                return caches.match(event.request);
            })
            );
});

就我阅读的 fetch() 文档而言，没有超时功能，所以我的假设是超时功能添加在 util.js 中，而在演示文稿中从未显示过......可以有人证实这一点吗？有没有人知道这是如何实施的？

Answer 1

未来：

它来了。

根据 whatwg/fetch 上的 Jake Archibald's comment，未来的语法将是：

Using the abort syntax, you'll be able to do:

const controller = new AbortController();
const signal = controller.signal;

const fetchPromise = fetch(url, {signal});

// 5 second timeout:
const timeoutId = setTimeout(() => controller.abort(), 5000);
const response = await fetchPromise;
// …

If you only wanted to timeout the request, not the response, add:

clearTimeout(timeoutId);
// …

来自另一条评论：

Edge & Firefox are already implementing. Chrome will start shortly.

现在：

如果您想尝试现在有效的解决方案，最明智的方法是使用 this module。

它允许您使用如下语法：

return fetch('/path', {timeout: 500}).then(function() {
  // successful fetch
}).catch(function(error) {
  // network request failed / timeout
})

Service Worker 缓存未将超时识别为一项功能

Service Worker caching not recognizing timeout as a function

timeout

fetch

service-worker