サービスワーカーでのajaxリクエストの無視

Question

私はHTML、CSS、JSの基本的な 'シェル'を持つアプリを持っています。ページの主な内容は、複数のajax呼び出しを介して、私のアプリケーションが実行されている別のURLにあるAPIにロードされます。私は、アプリケーションのメイン 'シェル'をキャッシュするためのサービスワーカーを設定しました。要求されたときにキャッシュされたバージョンで応答します。私が抱えている問題は、私のajax呼び出しの応答もキャッシュされていることです。私は、サービスワーカーのfetchイベントにコードを追加する必要があると確信していますが、キャッシュを調べるのではなく、常にネットワークから取得するようにしています。私はAPIへの要求を無視することができるかどうかはわかりません

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

：

は、ここに私のfetchイベントです。

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

が、クローム開発ツールでネットワーク]タブによると、これらの応答のすべてが、まだサービスワーカーから来ている：私はこれをやってみました。

Answer 1

無視する要求を処理するのに、event.respondWith(fetch(request))を使用する必要はありません。あなたがevent.respondWithブラウザを呼び出さずに戻ると、あなたのためのリソースがフェッチされます。

あなたのような何かを行うことができます限り、あなたは、あなたがちょうどハンドラから復帰することができ、要求を処理しないことを同期を決定し、デフォルトの要求処理を取るようにさせることができますよう

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

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

IOWを以上。 Check out this example.