Dịch vụ-công nhân lực cập nhật tài sản mới

Question

Tôi đã đọc qua bài viết html5rocks Introduction to service worker và đã tạo ra một nhân viên dịch vụ cơ bản mà lưu trữ trang, JS và CSS trong đó hoạt động như mong đợi:

var CACHE_NAME = 'my-site-cache-v1'; 
var urlsToCache = [ 
    '/' 
]; 

// Set the callback for the install step 
self.addEventListener('install', function (event) { 
    // Perform install steps 
    event.waitUntil(
    caches.open(CACHE_NAME) 
     .then(function(cache) { 
     console.log('Opened cache'); 
     return cache.addAll(urlsToCache); 
     }) 
); 
}); 

self.addEventListener('fetch', function (event) { 
    event.respondWith(
    caches.match(event.request) 
     .then(function(response) { 
     // Cache hit - return response 
     if (response) { 
      return response; 
     } 

     // IMPORTANT: Clone the request. A request is a stream and 
     // can only be consumed once. Since we are consuming this 
     // once by cache and once by the browser for fetch, we need 
     // to clone the response 
     var fetchRequest = event.request.clone(); 

     return fetch(fetchRequest).then(
      function(response) { 
      // Check if we received a valid response 
      if(!response || response.status !== 200 || response.type !== 'basic') { 
       return response; 
      } 

      // IMPORTANT: Clone the response. A response is a stream 
      // and because we want the browser to consume the response 
      // as well as the cache consuming the response, we need 
      // to clone it so we have 2 stream. 
      var responseToCache = response.clone(); 

      caches.open(CACHE_NAME) 
       .then(function(cache) { 
       cache.put(event.request, responseToCache); 
       }); 

      return response; 
      } 
     ); 
     }) 
    ); 
}); 

Khi tôi làm thay đổi đối với CSS, thay đổi này không được chọn khi nhân viên dịch vụ trả lại đúng CSS từ bộ nhớ cache.

Trường hợp tôi bị kẹt là nếu tôi thay đổi HTML, JS hoặc CSS, làm cách nào để đảm bảo rằng nhân viên dịch vụ tải phiên bản mới hơn từ máy chủ nếu nó có thể thay vì từ bộ nhớ cache? Tôi đã thử sử dụng tem phiên bản trên CSS nhập khẩu nhưng điều đó dường như không hoạt động.

Answer 1

Một tùy chọn chỉ là sử dụng bộ nhớ cache của nhân viên dịch vụ làm dự phòng và luôn cố gắng truy cập network-first qua số fetch(). Bạn mất một số lợi ích hiệu suất mà một chiến lược bộ nhớ cache đầu tiên cung cấp, mặc dù.

Cách tiếp cận khác sẽ là sử dụng sw-precache để tạo tập lệnh công nhân dịch vụ của bạn như là một phần của quá trình xây dựng trang web của bạn.

Nhân viên dịch vụ mà nó tạo sẽ sử dụng hàm băm của nội dung của tệp để phát hiện thay đổi và tự động cập nhật bộ nhớ cache khi triển khai phiên bản mới. Nó cũng sẽ sử dụng tham số truy vấn URL chặn truy xuất bộ nhớ cache để đảm bảo rằng bạn không vô tình điền bộ nhớ cache của nhân viên dịch vụ của bạn với phiên bản lỗi thời từ bộ nhớ cache HTTP.

Trong thực tế, bạn sẽ kết thúc với nhân viên dịch vụ sử dụng chiến lược bộ nhớ cache thân thiện với hiệu suất, nhưng bộ nhớ cache sẽ được cập nhật "ở chế độ nền" sau khi tải trang để lần truy cập tiếp theo, mọi thứ đều tươi mới. Nếu bạn muốn, đó là possible to display a message cho người dùng cho họ biết rằng có sẵn nội dung cập nhật và nhắc họ tải lại.

Answer 2

Một cách làm mất hiệu lực bộ nhớ cache sẽ là bump phiên bản CACHE_NAME bất cứ khi nào bạn thay đổi bất kỳ thứ gì trong các tệp được lưu trong bộ nhớ cache. Vì thay đổi đó sẽ thay đổi trình duyệt service-worker.js sẽ tải phiên bản mới hơn và bạn sẽ có cơ hội xóa bộ nhớ cache cũ và tạo bộ nhớ cache mới. Và bạn có thể xóa bộ nhớ cache cũ trong trình xử lý activate. Đây là chiến lược được mô tả trong prefetch sample. Nếu bạn đã sử dụng một số loại tem phiên bản trên các tệp CSS, hãy đảm bảo rằng chúng tìm đường vào tập lệnh của nhân viên dịch vụ.

Điều đó tất nhiên không thay đổi thực tế là các tiêu đề bộ nhớ cache trên tệp CSS cần phải được đặt chính xác. Nếu không, nhân viên dịch vụ sẽ chỉ tải tệp đã được lưu trong bộ nhớ cache của trình duyệt.