Question

当我更改服务工作者中的某些代码时，我希望更新浏览器中的前一个服务工作者。我已经读过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);
          })
        );
    }
});

Answer 1

感谢您的回复。实际问题是filesToCache。根目录即“/”

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

应该在这里评论。我的服务工作者类也被缓存，并且每次刷新后都从缓存中选择它。

Answer 2

服务工作者的更改将反映在页面的第二次刷新中。如果在第二次刷新时没有更新，而不是在Chrome Developer Console中查找服务工作者错误（我希望您已经使用过它）。它将在

之下

应用程序 - ＆gt;服务工作者

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

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

注意：如果您希望服务工作者在首次刷新时更新，请将安装事件更改为 -

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();
      })
    );
});

服务工作者未在Progressive Web Application中自动更新

2 个答案: