Question

我已经从Android上的Chrome和Firefox以及iOS上的Safari安装了PWA。当我在网站上更新代码时，在使用较早的缓存版本与使用最新的缓存版本方面，我看到PWA的行为大不相同-由Firefox创建的PWA似乎需要2-3次杀死并重启PWA，Chrome需要5秒钟-6，而且我无法在不删除PWA并从浏览器重新添加到主屏幕的情况下，使基于Safari的PWA开始显示最新版本。

是否有一个规范定义了获取较新的非缓存版本的条件？经过大量阅读后，我禁用了我的服务工作者的注册，这本应使PWA仅限于网络（没有服务工作者缓存），但是我继续在PWA中提供了旧版本的站点。普通的浏览器窗口似乎也需要多次深度刷新才能获得新版本，因此我认为除了服务人员之外，还有其他事情可以确定这一点？

Answer 1

关于软件保护和PWA的一些一般性考虑：一旦注册了Service Worker（SW），就必须取消注册以确保您获取最新/更新的版本，并且可以在Service Worker下的“应用程序”选项卡中进行操作。

然后

确保您获得PWA的最新/更新版本。在此之上您还可以做的是，您可以更改缓存存储的对象名称，如下所示：。

只要您保持对象名称相同，并且不取消注册软件并清除缓存存储，就必须刷新您的网站。如果您持续按住浏览器的刷新按钮几秒钟，还可以使用硬重载/清除缓存和硬重载选项，但是直到您取消注册服务人员后，它仍然无法使用。因此，简而言之，取消注册软件并手动清除缓存存储或更改缓存存储对象的名称即可解决问题。像任何其他技术/资产一样，也有利弊。如果我们使用不当，这是PWA的缺点之一，您的客户将永远无法获得最新版本，否则他获取该版本的时间可能为时已晚。干杯：）

Answer 2

考虑以下代码。我将其分为几部分：

   self.addEventListener('fetch', function(event) {
  event.respondWith(


    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }

        return fetch(event.request).then(
          function(response) {
            // Check if we received a valid response
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // IMPORTANT: Clone the response. A response is a stream
            // and because we want the browser to consume the response
            // as well as the cache consuming the response, we need
            // to clone it so we have two streams.
            var responseToCache = response.clone();

            caches.open(CACHE_NAME)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
    );
});

在此处使用缓存的第一个策略，每当您重新加载页面时，都会触发获取事件。

caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }

首先，它会检查所需的请求在缓存中是否可用，如果是，则它将返回响应，并且不会从网络获取。

 return fetch(event.request).then(
          function(response) {
            // Check if we received a valid response
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // IMPORTANT: Clone the response. A response is a stream
            // and because we want the browser to consume the response
            // as well as the cache consuming the response, we need
            // to clone it so we have two streams.
            var responseToCache = response.clone();

            caches.open(CACHE_NAME)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
    );

现在，如果缓存中不存在该文件，则此块进入网络，收集所需的文件，然后对其进行响应，并将其保存到缓存中以备将来使用。

考虑一下您有一个sample.html文件并被缓存的情况，现在您对该文件的代码进行了一些更改，但是这些更改将不会在您的浏览器上看到，因为它将看到sample.html（old ）已经存在于缓存中并对其进行响应。

如何控制PWA使用缓存版本还是获取最新版本？

2 个答案: