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

Service Worker not getting updated automatically in Progressive Web Application

本文关键字:更新 应用 Worker 渐进式 Web Service      更新时间:2023-09-26

当我改变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);
          })
        );
    }
});

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

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

应该在这里加注释。我的service-worker类也被缓存,每次刷新后它也从缓存中挑选它。

service worker中的更改将在第二次刷新页面时反映出来。如果它在第二次刷新时没有更新,那么在Chrome开发者控制台寻找service worker错误(我希望你已经使用它)。它会在

下面

Applications -> Service Worker

在chrome开发工具(最新稳定的chrome版本)。

打开Chrome开发工具点击Ctrl + Shift + IRight click -> Inspect Element

注意:如果你想让service worker在第一次刷新时更新,那么将你的install事件更改为-

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