服务人员强制更新新 Assets

Question

我一直在阅读html5rocks Introduction to service worker文章并创建了一个基本的服务工作线程来缓存页面、JS 和 CSS，它按预期工作:

var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [
  '/'
];

// Set the callback for the install step
self.addEventListener('install', function (event) {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function (event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }

        // IMPORTANT: Clone the request. A request is a stream and
        // can only be consumed once. Since we are consuming this
        // once by cache and once by the browser for fetch, we need
        // to clone the response
        var fetchRequest = event.request.clone();

        return fetch(fetchRequest).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 2 stream.
            var responseToCache = response.clone();

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

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

当我对 CSS 进行更改时，此更改不会被拾取，因为服务工作线程正确地从缓存返回 CSS。

我遇到的问题是，如果我要更改 HTML、JS 或 CSS，我如何确保服务工作人员从服务器加载较新的版本(如果可以的话)而不是从缓存加载？我尝试过在 CSS 导入中使用版本标记，但这似乎不起作用。

Answer 1

一种选择是仅使用服务工作人员的缓存作为后备，并始终尝试转到 network-first通过fetch()。不过，您会失去缓存优先策略所带来的一些性能提升。

另一种方法是使用 sw-precache作为网站构建过程的一部分生成您的 Service Worker 脚本。

它生成的服务工作线程将使用文件内容的哈希值来检测更改，并在部署新版本时自动更新缓存。它还将使用缓存清除 URL 查询参数来确保您不会意外地使用 HTTP 缓存中的过时版本填充服务工作线程缓存。

实际上，您最终会得到一个使用性能友好的缓存优先策略的服务工作人员，但缓存将在页面加载后“在后台”更新，以便下次访问时，所有内容很新鲜。如果你愿意的话，就是possible to display a message让用户知道有可用的更新内容并提示他们重新加载。