如何从服务工作者缓存中获取最新资源(现在第二个负载资源正在更新)?

时间:2017-02-17 05:28:12

标签: javascript service-worker

如何从服务工作者缓存中获取最新资源,我正在尝试更新第一次刷新的缓存资源,截至目前我的资源仅在第二次刷新时更新,任何帮助都可以很好地更新资源第一次刷新。

var CACHE_NAME = 'Bcache-E4'; 
var FilesToCache = [
  '/'
];
 
// Install SW
self.addEventListener('install', function (e) { 
    console.log('[Service Worker] Install');
    e.waitUntil(
      caches.open(CACHE_NAME).then(function (cache) { 
          //console.log('[Service Worker] Caching app shell');
          return cache.addAll(FilesToCache);
      }).then(function(e){
        return self.skipWaiting();
      })
    );
});

// Activating service worker
self.addEventListener('activate', function(e) {
  console.log('[Service Worker] Activate');
  e.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        // Removing old cache
        if (key !== CACHE_NAME) {
          console.log('[Service Worker] Removing old cache', key);
          return caches.delete(key);
        }
      }));
    })
  );
  return self.clients.claim();
});

// Fetch resources & Check Returning source
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
          if (response) {
              console.log(
                '[fetch] Returning from Service Worker cache: ',
                event.request.url
              );
              return response;
          }
          console.log('[fetch] Returning from server: ', event.request.url);
          return fetch(event.request);
      }
    )
  );
  
    event.waitUntil(
        update(event.request)
        .then(refresh)
     );
});

// TO Update Request
function update(request) {
  return caches.open(CACHE_NAME).then(function (cache) {
    return fetch(request).then(function (response) {
      return cache.put(request, response.clone()).then(function () {
        return response;
      });
    });
  });
} 

// TO Refresh Response
function refresh(response) {
  return self.clients.matchAll().then(function (clients) {
    clients.forEach(function (client) {
      var message = {
        type: 'refresh',
        url: response.url,
        eTag: response.headers.get('ETag')
      };
    client.postMessage(JSON.stringify(message));
    });
  });
}
 

强文

0 个答案:

没有答案