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非常方便，可以灵活地实现处理远程或动态资源的运行时缓存的请求处理程序。

如何创建Service Work以在Progressive WEB APP中存储动态内容？

1 个答案: