すべてのページに同じHTMLを読み込みます

Question

私はindex.htmlファイルにアプリケーションシェルを持っています。 /api/（AJAX呼び出し）で始まるURLを除くすべてのURLにこのアプリケーションシェルをロードします。これを達成するために私の設定をどのようにして設定しますか？あなたがやりたいだろう何

service-worker.js:

(function() { 

'use strict'; 

var filesToCache = [ 
    '.', 
    'index.html', 
    'pwa-stylesheets/css/styles-new.css' 
]; 

var staticCacheName = 'cache-v3'; 

self.addEventListener('install', function(event) { 
    event.waitUntil(
     caches.open(staticCacheName) 
     .then(function(cache) { 
      return cache.addAll(filesToCache); 
     }).then(function() { 
      self.skipWaiting(); 
     }) 
    ); 
}); 

self.addEventListener('fetch', function(event) { 
    var url = event.request.url; 
    if(url.indexOf("http://localhost:8080") > -1 
     && url.indexOf("http://localhost:8080/api/") == -1 
     && url.indexOf("http://localhost:8080/pwa-") == -1) { 
     // event.request.url = "http://localhost:8080/"; // not allowed 
     event.respondWith(
      caches.match(event.request).then(function(response) { 
       if(response) { 
        console.log('Found ', url, ' in cache'); 
        return response; 
       } 
       console.log('Network request for ', url); 
       return fetch(event.request).then(function(response) { 
        if(! response.ok) { 
         console.log("Network request failed."); 
         return null; 
        } 
        return caches.open(staticCacheName).then(function(cache) { 
         cache.put(event.request.url, response.clone()); 
         return response; 
        }); 
       }); 
      }) 
     ); 
    } 
}); 

self.addEventListener('activate', function(event) { 

    var cacheWhitelist = [staticCacheName]; 

    event.waitUntil(
     caches.keys().then(function(cacheNames) { 
      return Promise.all(
       cacheNames.map(function(cacheName) { 
        if(cacheWhitelist.indexOf(cacheName) === -1) { 
         return caches.delete(cacheName); 
        } 
       }) 
      ); 
     }) 
    ); 
}); 

})(); 

Answer 1

API呼び出しをキャッチするか、フィルタリングするために、あなたのフェッチイベントハンドラを設定しています。/api /を含むURLのリクエストが表示されたら、フェッチコールでネットワークにアクセスしたいと思うでしょう。正規表現を使用してリクエストURLを確認し、APIや他のURLに必要なキャッシュ戦略を適用します。