Service Worker 没有在渐进式 Web 应用程序中自动更新答案

【问题标题】：Service Worker not getting updated automatically in Progressive Web ApplicationService Worker 没有在渐进式 Web 应用程序中自动更新
【发布时间】：2016-09-06 05:55:50
【问题描述】：

当我在 service worker 中更改一些代码时，我希望在浏览器中更新以前的 service worker。我已经读到 service-worker.js 中的任何更改都会在浏览器中自动刷新它这是我的服务人员代码：

var dataCacheName = 'demo-v5';

var filesToCache = [
  '/',
  '/Home/Index',
  '/Home/AboutUs'  
];
self.addEventListener('install', function (e) {
    console.log('[Service Worker] Install');
    e.waitUntil(
      caches.open(dataCacheName).then(function (cache) {
          console.log('[Service Worker] Caching app shell');
          return cache.addAll(filesToCache);
      })
    );
});
self.addEventListener('activate', function(e) {
    console.log('[ServiceWorker] Activated');
    caches.keys()
    e.waitUntil(

        // Get all the cache keys (cacheName)
        caches.keys().then(function(cacheNames) {
            return Promise.all(cacheNames.map(function(thisCacheName) {

                // If a cached item is saved under a previous cacheName
                if (thisCacheName !== dataCacheName) {

                    // Delete that cached file
                    console.log('[ServiceWorker] Removing Cached Files from Cache - ', thisCacheName);
                    return caches.delete(thisCacheName);
                }
                else
                {
                    console.log('Else- ', thisCacheName);
                }
            }));
        })
    ); // end e.waitUntil

  //  return self.clients.claim();
});

self.addEventListener('fetch', function (e) {
    console.log('[Service Worker] Fetch', e.request.url);
    var dataUrl = 'https://query.yahooapis.com/v1/public/yql';
    if (e.request.url.indexOf(dataUrl) > -1) {
      e.respondWith(
          caches.open(dataCacheName).then(function (cache) {
              return fetch(e.request).then(function (response) {
                  cache.put(e.request.url, response.clone());
                  return response;
              });
          })
        );
    } else {

        e.respondWith(
          caches.match(e.request).then(function (response) {
              return response || fetch(e.request);
          })
        );
    }
});

【问题讨论】：

标签： javascript service-worker progressive-web-apps

【解决方案1】：

感谢您的回复。实际问题出在filesToCache.根目录，即“/”

var filesToCache = [
//  '/',
'/Home/Index',
'/Home/AboutUs'  
 ];

应该在这里评论。我的 service-worker 类也被缓存了，每次刷新后它都会从缓存中提取它。

【讨论】：

关于缓存服务工作者的评论根本不正确，但它非常令人困惑。如果您在浏览器中加载服务工作人员 URL，服务工作人员将为服务工作人员本身提供一个 fetch 事件，您可以将其缓存在其中，但浏览器在检查更新之前永远不会使用缓存。
它从缓存中使用它。我可以在 chrome 开发者工具的网络标签中看到它
浏览器永远不会使用缓存中的服务工作者。我已经与 Chrome 工程师和规范作者讨论过这个问题..
好的，我可以举个例子。我将它与 .NET 应用程序一起使用。
@GauntFace 也许我的问题在于响应中没有 Cache-Control 标头：这种情况下的默认值是什么？可能 Chrome 会缓存 SW。我应该尝试使用明确的Cache-Control: no-cache。

【解决方案2】：

Service Worker 的更改将反映在您的页面的第二次刷新中。如果它在第二次刷新时也没有更新，而不是在 Chrome 开发者控制台中查找 service worker 错误（我希望你已经使用它）。它会在

应用程序 -> 服务工作者

在 chrome 开发者工具中（最新稳定的 Chrome 版本）。

点击Ctrl + Shift + I或Right click -> Inspect Element打开Chrome开发者工具。

注意：如果您希望 Service Worker 在第一次刷新时更新，请将您的安装事件更改为 -

self.addEventListener('install', function (e) {
    console.log('[Service Worker] Install');
    e.waitUntil(
      caches.open(dataCacheName).then(function (cache) {
          console.log('[Service Worker] Caching app shell');
          return cache.addAll(filesToCache);
      }).then(function(e){
        return self.skipWaiting();
      })
    );
});

【讨论】：