Service worker 服务工作者-始终从网络和缓存资源提供服务

这有点困难，所以任何帮助都将不胜感激

event.respondWith(
    fetch(event.request)
        .then(response => {
            // Loads from network
            debug(`Loading from network: ${response.url}`);

            caches.open(config.cayg.key + config.version)
                .then(cache => {
                    cache.put(event.request, response.clone());
                });

            return response;
        })
        .catch(response => {
            // try cache
            debug(`Loading from cache: ${response.url}`);
            caches.match(event.request)
                .then(response)
                .catch(() => caches.match('/offline/')); // otherwise show offline
        })
);

我们运行的网站经常使用CMS进行更新，但希望缓存页面以供脱机/慢速使用

我们有点不知道如何从网络上为资源提供服务，但在这样做的时候还要缓存它（或更新缓存的版本）

到目前为止，这是我们的代码，但它似乎只是从缓存中加载CSS、JS和其他页面

非常感谢您的任何建议

event.respondWith(
    fetch(event.request)
        .then(response => {
            // Loads from network
            debug(`Loading from network: ${response.url}`);

            caches.open(config.cayg.key + config.version)
                .then(cache => {
                    cache.put(event.request, response.clone());
                });

            return response;
        })
        .catch(response => {
            // try cache
            debug(`Loading from cache: ${response.url}`);
            caches.match(event.request)
                .then(response)
                .catch(() => caches.match('/offline/')); // otherwise show offline
        })
);

---

Mozilla封装了大多数用例，并提供了不同配方/策略的示例和说明。尝试“网络或缓存”策略：

（UI有点不直观，演示/代码链接位于页面顶部）