Nhân viên dịch vụ không cập nhật

Question

Tôi có nhân viên dịch vụ được cài đặt trong trang web của mình, mọi thứ đều hoạt động tốt, ngoại trừ khi tôi cập nhật các tệp được lưu trong bộ nhớ cache, trên thực tế; họ ở lại đánh bắt mãi mãi và tôi dường như không thể làm mất hiệu lực bộ nhớ cache, trừ khi tôi bỏ đăng ký người lao động từ 'chrome: // ServiceWorker-internals/

const STATIC_CACHE_NAME = 'static-cache-v1'; 
const APP_CACHE_NAME = 'app-cache-#VERSION'; 

const CACHE_APP = [ 
    '/', 
    '/app/app.js' 
] 
const CACHE_STATIC = [ 
    'https://fonts.googleapis.com/css?family=Roboto:400,300,500,700', 
    'https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css' 
] 

self.addEventListener('install',function(e){ 
    e.waitUntil(
     Promise.all([caches.open(STATIC_CACHE_NAME),caches.open(APP_CACHE_NAME)]).then(function(storage){ 
      var static_cache = storage[0]; 
      var app_cache = storage[1]; 
      return Promise.all([static_cache.addAll(CACHE_STATIC),app_cache.addAll(CACHE_APP)]); 
     }) 
    ); 
}); 

self.addEventListener('activate', function(e) { 
    e.waitUntil(
     caches.keys().then(function(cacheNames) { 
      return Promise.all(
       cacheNames.map(function(cacheName) { 
        if (cacheName !== APP_CACHE_NAME && cacheName !== STATIC_CACHE_NAME) { 
         console.log('deleting',cacheName); 
         return caches.delete(cacheName); 
        } 
       }) 
      ); 
     }) 
    ); 
}); 

self.addEventListener('fetch',function(e){ 
    const url = new URL(e.request.url); 
    if (url.hostname === 'static.mysite.co' || url.hostname === 'cdnjs.cloudflare.com' || url.hostname === 'fonts.googleapis.com'){ 
     e.respondWith(
      caches.match(e.request).then(function(response){ 
       if (response) { 
        return response; 
       } 
       var fetchRequest = e.request.clone(); 

       return fetch(fetchRequest).then(function(response) { 
        if (!response || response.status !== 200 || response.type !== 'basic') { 
         return response; 
        } 
        var responseToCache = response.clone(); 
        caches.open(STATIC_CACHE_NAME).then(function(cache) { 
         cache.put(e.request, responseToCache); 
        }); 
        return response; 
       }); 
      }) 
     ); 
    } else if (CACHE_APP.indexOf(url.pathname) !== -1){ 
     e.respondWith(caches.match(e.request)); 
    } 
}); 

nơi #VERSION là một phiên bản được gắn vào tên bộ nhớ cache tại thời gian biên dịch; lưu ý rằng STATIC_CACHE_NAME không bao giờ thay đổi vì các tệp được cho là tĩnh mãi mãi.

Ngoài ra, hành vi này là thất thường, tôi đã kiểm tra chức năng xóa (phần mà nó đăng nhập) và nó vẫn ghi nhật ký về xóa bộ nhớ cache đã bị xóa (được cho là). khi tôi chạy caches.keys().then(function(k){console.log(k)}) tôi nhận được toàn bộ các bộ nhớ cache cũ cần được xóa.

Answer 1

Sau khi googling và xem một số video trên udacity, tôi thấy rằng hành vi dự định của nhân viên là ở lại cho đến khi trang điều khiển được đóng và mở lại khi nhân viên dịch vụ mới có thể kiểm soát.

Giải pháp là bắt buộc kiểm soát dựa trên https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/skipWaiting giải quyết vấn đề sau, ngay cả khi cần 2 lần tải lại để nhân viên mới phản ánh thay đổi (điều đó có ý nghĩa vì ứng dụng được tải trước phiên bản mới công nhân thay thế trước đó).

self.addEventListener('install',function(e){ 
    e.waitUntil(
     Promise.all([caches.open(STATIC_CACHE_NAME),caches.open(APP_CACHE_NAME),self.skipWaiting()]).then(function(storage){ 
      var static_cache = storage[0]; 
      var app_cache = storage[1]; 
      return Promise.all([static_cache.addAll(CACHE_STATIC),app_cache.addAll(CACHE_APP)]); 
     }) 
    ); 
}); 

self.addEventListener('activate', function(e) { 
    e.waitUntil(
     Promise.all([ 
      self.clients.claim(), 
      caches.keys().then(function(cacheNames) { 
       return Promise.all(
        cacheNames.map(function(cacheName) { 
         if (cacheName !== APP_CACHE_NAME && cacheName !== STATIC_CACHE_NAME) { 
          console.log('deleting',cacheName); 
          return caches.delete(cacheName); 
         } 
        }) 
       ); 
      }) 
     ]) 
    ); 
});