问在渐进式Web应用程序中，Service Worker未自动更新
EN

Stack Overflow用户

提问于 2016-09-06 05:55:51

回答 2查看 4.3K关注 0票数 3

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

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

回答 2

Stack Overflow用户

发布于 2016-09-08 12:58:38

感谢您的回复。实际问题与filesToCache.The根目录有关，即"/“

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

应该在这里注解。我的服务工作者类也被缓存了，每次刷新后它都会从缓存中提取它。

票数 3

Stack Overflow用户

发布于 2016-09-06 07:07:50

服务工作线程中的更改将反映在页面的第二次刷新中。如果它甚至在第二次刷新时都没有更新，那么在Chrome开发人员控制台中查找服务工作者错误(我希望你已经在使用它)。它将会在

Applications ->服务工作进程

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