Ignorieren Ajax Anfragen in Service Worker

Question

Ich habe eine App mit einer grundlegenden 'Shell' von HTML, CSS und JS. Der Hauptinhalt der Seite wird über mehrere AJAX-Aufrufe an eine API geladen, die sich unter einer anderen URL befindet als die, auf der meine App läuft. Ich habe einen Service-Arbeiter eingerichtet, um die Haupt ‚Schale‘ der Anwendung cachen:

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

und mit der Cache-Version zu reagieren, wenn angefordert. Das Problem, das ich habe, ist, dass die Antwort meiner Ajax-Anrufe auch zwischengespeichert wird. Ich bin mir ziemlich sicher, dass ich Code zum fetch Ereignis des Service-Arbeiters hinzufügen muss, der sie immer vom Netz holt, anstatt im Cache zu suchen.

Hier ist meine fetch Veranstaltung:

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

Ich bin nicht sicher, wie ich die Anfragen an die API ignorieren kann. Ich habe versucht das zu tun:

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

aber nach dem Netzwerk-Registerkarte in Chrome Dev-Tools, alle diese Antworten kommen immer noch aus dem Servicemitarbeiter.

Answer 1

Sie müssen event.respondWith(fetch(request)) nicht verwenden, um Anforderungen zu behandeln, die Sie ignorieren möchten. Wenn Sie ohne Anruf event.respondWith zurückkommen, holt Browser die Ressource für Sie.

Sie können wie etwas tun:

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

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

IOW, solange Sie synchron bestimmen können, dass Sie nicht die Anfrage bearbeiten wollen Sie einfach nur aus dem Handler zurückkehren können und die Standard-Anforderungsverarbeitung lassen nehmen Über. Check out this example.