Question

我的服务工作者遇到了麻烦。我已经使用Cache then Network技术实现了它，其中内容首先从缓存中获取，并且始终执行网络提取并且结果在成功时缓存。（受此解决方案的启发，CSS-Tricks）

当我对我的网络应用程序进行更改并点击刷新时，我当然是第一次获取旧内容。但在随后的刷新中，内容在新旧之间交替出现。我可以连续五次获得新内容或旧内容，也可能因每次请求而有所不同。

我一直在调试服务工作者一段时间，并没有更明智。有没有人知道实施的错误是什么？

修改

var version = 'v1::2';

self.addEventListener("install", function (event) {
    event.waitUntil(
      caches
        .open(version + 'fundamentals')
        .then(function (cache) {
            return cache.addAll([
                "/"
            ]);
        })
    );
});

self.addEventListener("fetch", function (event) {

    if (event.request.method !== 'GET') {
        return;
    }
    event.respondWith(
      caches
        .match(event.request)
        .then(function (cached) {
            var networked = fetch(event.request)
              .then(fetchedFromNetwork, unableToResolve)
              .catch(unableToResolve);

            return cached || networked;

            function fetchedFromNetwork(response) {
                var cacheCopy = response.clone();

                caches
                  .open(version + 'pages')
                  .then(function add(cache) {
                      cache.put(event.request, cacheCopy);
                  });

                return response;
            }

            function unableToResolve() {

                return new Response('<h1>Service Unavailable</h1>', {
                    status: 503,
                    statusText: 'Service Unavailable',
                    headers: new Headers({
                        'Content-Type': 'text/html'
                    })
                });
            }
        })
    );
});

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

    event.waitUntil(
      caches
        .keys()
        .then(function (keys) {
            return Promise.all(
              keys
                .filter(function (key) {
                    return !key.startsWith(version);
                })
                .map(function (key) {
                    return caches.delete(key);
                })
            );
        })
    );
});

Answer 1

我不知道你是如何设置版本的，但我认为仍然存在多个缓存（我可以看到你正在尝试删除以前的缓存但仍然）。 caches.match() is a convenience method并且订单无法保证（至少Chrome似乎首先查询最旧的）。 Chrome开发者工具会向您显示现有的缓存（应用程序/缓存/缓存存储）及其内容。如果要查询特定缓存，则需要执行以下操作：

caches.open(currentCacheName).then(function(cache) {...}

为in the example in the Cache documentation。

服务工作者，双缓存？

1 个答案: