如何創建服務工作來存儲Progressive WEB APP中的動態內容？

Question

我開發了一個具有靜態內容的漸進式Web應用程序，其工作正常，但是當我們動態地從MS SQL數據庫中獲取數據時，它不起作用。請指導我如何解決此問題，或者需要在Service Worker中爲動態數據進行任何更改。

感謝

var version = "1.0::"; 

var offlineResources = [ 
"/", 
"style.css", 
"image/logo.png", 
"image/logo.jpg" 
]; 

self.addEventListener("install", function(event) { 
event.waitUntil(
    caches 
     .open(version + "static") 
     .then(function(cache) { 
      cache.addAll(offlineResources); 
     }) 
); 
}); 

self.addEventListener("activate", function(event) { 
event.waitUntil(
    caches.keys().then(function(keys) { 
     return Promise.all(keys 
      .filter(function (key) { 
       return key.indexOf(version) !== 0; 
      }) 
      .map(function (key) { 
       return caches.delete(key); 
      }) 
     ); 
    }) 
); 
}); 

function isOfflineOrigin(origin) { 
return origin === location.origin || origin.indexOf("netlify") !== -1; 
} 

self.addEventListener("fetch", function(event) { 
var request = event.request; 
var url = new URL(request.url); 

// Only worry about GET requests and certain domains 
if (request.method !== "GET" || !isOfflineOrigin(url.origin)) { 
    return; 
} 

// For HTML try the network first, fall back to the cache, and then 
// finally the offline page 
if (request.headers.get("Accept").indexOf("text/html") !== -1) { 
    event.respondWith(
     fetch(request) 
      .then(function(response) { 
       var copy = response.clone(); 
       caches.open(version + "pages") 
        .then(function(cache) { 
         cache.put(request, copy); 
        }); 
       return response; 
      }) 
      .catch(function() { 
       return caches.match(request) 
        .then(function(response) { 
         return response || caches.match("/offline/"); 
        }); 
      }) 
    ); 
    return; 
} 

// For non-HTML requests look in the cache first, and fall back to 
// the network 
event.respondWith(
    caches.match(request) 
     .then(function(response) { 
      return response || fetch(request); 
     }) 
); 
}); 

Answer 1

我可以找出你只緩存靜態資源。 What about the dynamic content like the responses from a remote API or service? 您必須爲所有動態需求實現運行時緩存。

sw-toolbox來得方便，它可以靈活地實現處理遠程或動態資源的運行時緩存的請求處理程序。