Service-Mitarbeiter-Caching nicht Timeout als Funktion zu erkennen

Question

Ich beobachtete Steve Sanderson's NDC presentation on up-and-coming web features, und sah seine Caching-Beispiel als Hauptkandidat für eine Anwendung, die ich entwickle. Ich konnte den Code nicht finden, also habe ich ihn so gut wie möglich aus dem Youtube-Video getippt.

Leider funktioniert es nicht in Chrome (das ist auch, was er in der Demo verwendet) Es schlägt mit Uncaught TypeError: fetch(...).then(...).timeout is not a function at self.addEventListener.event.

ich durch Steve's Github surften, und fand keine Spur davon, noch ich etwas auf der NDC-Konferenz Seite

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

Soweit ich die holen lesen() Dokumentation, gibt es keine Timeout-Funktion finden konnte, also meine Annahme ist, dass die Timeout-Funktion in der util.js hinzugefügt wird, die nie in der Präsentation gezeigt wird ... kann jemand dies bestätigen? und hat jemand eine Vorstellung davon, wie dies umgesetzt wird?

Answer 1

Zukunft:

Es kommt.

Nach Jake Archibald's comment auf whatwg/fetch die Zukunft Syntax sein wird:

die Abbruch Syntax verwenden, werden Sie in der Lage zu tun:

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; 
// … 

Wenn Sie nur wollen Timeout die Anfrage, nicht die Antwort, hinzufügen:

clearTimeout(timeoutId); 
// … 

Und von einem anderen Kommentar:

Edge-& Firefox implementieren bereits. Chrome wird in Kürze starten.

Jetzt:

Wenn Sie die Lösung, um zu versuchen, die jetzt arbeitet, der vernünftigste Weg ist this module zu verwenden.

Es ermöglicht Sie, Syntax verwenden wie:

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