Ignora richieste Ajax nell'operatore di servizio

Question

Ho un'app con una "shell" di base di HTML, CSS e JS. Il contenuto principale della pagina viene caricato tramite più chiamate ajax a un'API che si trova su un altro URL rispetto a quello su cui è in esecuzione la mia app. Ho creato un servizio-lavoratore di memorizzare nella cache il 'guscio' principale dell'applicazione:

var urlsToCache = [ 
    '/', 
    'styles/main.css', 
    'scripts/app.js', 
    'scripts/apiService.js', 
    'third_party/handlebars.min.js', 
    'third_party/handlebars-intl.min.js' 
]; 

e di rispondere con la versione in cache quando richiesto. Il problema che sto avendo è che anche la risposta delle mie chiamate ajax viene memorizzata nella cache. Sono abbastanza sicuro di aver bisogno di aggiungere del codice all'evento fetch dell'operatore del servizio che li ottiene sempre dalla rete anziché cercare nella cache.

Ecco il mio fetch evento:

self.addEventListener('fetch', function (event) { 
    // ignore anything other than GET requests 
    var request = event.request; 
    if (request.method !== 'GET') { 
     event.respondWith(fetch(request)); 
     return; 
    } 

    // handle other requests 
    event.respondWith(
     caches.open(CACHE_NAME).then(function (cache) { 
      return cache.match(event.request).then(function (response) { 
       return response || fetch(event.request).then(function (response) { 
        cache.put(event.request, response.clone()); 
        return response; 
       }); 
      }); 
     }) 
    ); 
}); 

Non sono sicuro di come posso ignorare le richieste all'API. Ho provato a fare questo:

if (request.url.indexOf(myAPIUrl !== -1) { 
    event.respondWith(fetch(request)); 
    return; 
} 

ma secondo la scheda di rete in Chrome Dev Tools, tutte queste risposte sono ancora derivante dal servizio-lavoratore.

Answer 1

Non è necessario utilizzare event.respondWith(fetch(request)) per gestire le richieste che si desidera ignorare. Se torni senza chiamare il browser event.respondWith, la risorsa verrà recuperata automaticamente.

Si può fare qualcosa di simile:

if (request.methd !== 'GET') { return; } 
if (request.url.indexOf(myAPIUrl) !== -1) { return; } 

\\ handle all other requests 
event.respondWith(/* return promise here */); 

IOW finché è possibile determinare in modo sincrono che non si desidera per gestire la richiesta si può solo tornare dal gestore e lasciare che l'elaborazione della richiesta di default di prendere al di sopra di. Check out this example.