việc sử dụng của `self.Clients.claim() là gì '

Question

Để đăng ký một nhân viên phục vụ, tôi có thể gọi

navigator.serviceWorker.register('/worker.js') 

Mỗi lần tải trang nó kiểm tra các phiên bản cập nhật của worker.js. Nếu tìm thấy bản cập nhật, nhân viên mới sẽ không được sử dụng cho đến khi tất cả các tab của trang được đóng lại và sau đó mở lại. Giải pháp tôi đọc là:

self.addEventListener('install', function(event) { 
    event.waitUntil(self.skipWaiting()); 
}); 
self.addEventListener('activate', function(event) { 
    event.waitUntil(self.clients.claim()); 
}); 

Tôi có thể hiểu phần skipWaiting, nhưng chính xác thì clients.claim() làm gì? Tôi đã thực hiện một số thử nghiệm đơn giản và có vẻ như hoạt động như mong đợi ngay cả khi không có nó.

Answer 1

Tôi excerpting sau đây từ một guide to the service worker lifecycle:

clients.claim

Bạn có thể nắm quyền kiểm soát của khách hàng không kiểm soát được bằng cách gọi clients.claim() trong lao động dịch vụ của bạn khi nó đã được kích hoạt.

Here's biến thể của bản trình diễn ở trên gọi clients.claim() trong sự kiện kích hoạt của nó. Bạn sẽ thấy một con mèo lần đầu tiên. Tôi nói "nên", bởi vì đây là thời gian nhạy cảm. Bạn sẽ chỉ thấy một con mèo nếu nhân viên dịch vụ kích hoạt và clients.claim() có hiệu lực trước hình ảnh cố gắng tải.

Nếu bạn sử dụng lao động dịch vụ của bạn để tải các trang khác với họ sẽ tải qua mạng, clients.claim() có thể trở nên khó chịu, như nhân viên phục vụ của bạn kết thúc việc kiểm soát một số khách hàng mà nạp mà không nó.

Lưu ý: Tôi thấy rất nhiều người bao gồm clients.claim() như boilerplate, nhưng tôi hiếm khi làm như vậy bản thân mình. Nó chỉ thực sự quan trọng trong lần tải đầu tiên và do tăng cường tiến bộ, trang thường hoạt động bình thường mà không cần nhân viên phục vụ.

Answer 2

Nhân viên dịch vụ nắm quyền kiểm soát từ next page-reload sau khi đăng ký. Bằng cách sử dụng self.skipWaiting() và self.clients.claim(), bạn có thể yêu cầu khách hàng kiểm soát nhân viên dịch vụ theo số first load.

ví dụ

Hãy nói rằng tôi cache một file hello.txt, và một lần nữa Nếu tôi thực hiện cuộc gọi cho hello.txt nó sẽ có cuộc gọi máy chủ làm mặc dù tôi có nguồn tài nguyên trong bộ nhớ cache của tôi. Đây là kịch bản khi tôi không sử dụng self.clients.claim(). Tuy nhiên, khi thực hiện cuộc gọi máy chủ cho hello.txt khi tải lại trang tiếp theo, nó sẽ phục vụ tài nguyên từ bộ nhớ cache.

Để giải quyết vấn đề này, tôi phải sử dụng kết hợp self.skipWaiting() và self.clients.claim() để nhân viên dịch vụ bắt đầu phân phối nội dung ngay sau khi được kích hoạt.

P.S:

next page-reload nghĩa là trang xem lại.

first load biểu thị thời điểm khi trang được truy cập lần đầu tiên.