Làm sáng tỏ Vòng đời của Nhân viên Dịch vụ

Nhân viên dịch vụ đóng một role rất quan trọng trong Ứng dụng web tiến bộ (PWA), vì họ chịu trách nhiệm lưu vào bộ nhớ đệm offline , thông báo đẩy, đồng bộ hóa nền, v.v. Trong bài viết này, ta sẽ làm rõ vòng đời của nhân viên dịch vụ và những gì có thể được thực hiện ở mỗi giai đoạn của vòng đời.

Để sử dụng hiệu quả nhân viên dịch vụ, sự hiểu biết về vòng đời của dịch vụ là điều cần thiết. Vòng đời của nhân viên dịch vụ chủ yếu bao gồm 3 giai đoạn, đó là:

Đăng ký
Cài đặt
Kích hoạt

Ta hãy xem xét từng người trong số họ.

Đăng ký

Service worker về cơ bản là một file JavaScript. Một điều khác biệt giữa file service worker với file JavaScript thông thường, là service worker chạy trong nền, ngoài chuỗi giao diện user chính của trình duyệt. Trước khi có thể bắt đầu sử dụng service worker, ta phải đăng ký nó như một quy trình . Đây là giai đoạn đầu tiên của vòng đời. Vì service worker chưa được hỗ trợ trong tất cả các trình duyệt, trước tiên ta phải kiểm tra đảm bảo trình duyệt hỗ trợ service worker. Dưới đây là mã ta có thể sử dụng để đăng ký nhân viên dịch vụ:

app.js

if ('serviceWorker' in navigator) {     navigator.serviceWorker.register('/sw.js')     .then(function (registration) {         console.log('Service worker registered!');     })     .catch(function (err) {         console.log('Registration failed!');     }) }

Đầu tiên, ta kiểm tra xem trình duyệt có hỗ trợ service worker hay không, tức là đối tượng navigator có thuộc tính serviceWorker . Chỉ khi nó được hỗ trợ, ta mới đăng ký nhân viên dịch vụ. Phương thức register() nhận đường dẫn đến tập lệnh service worker và trả về một lời hứa.

Tại thời điểm đăng ký service worker, ta cũng có thể xác định phạm vi của service worker. Phạm vi của service worker xác định các trang mà service worker có thể kiểm soát. Theo mặc định, phạm vi được xác định bởi vị trí của tập lệnh service worker.

app.js

if ('serviceWorker' in navigator) {     navigator.serviceWorker.register('/sw.js', {         scope: '/blog/'     })     .then(function (registration) {         console.log('Service worker registered!');     })     .catch(function (err) {         console.log('Registration failed!');     }) }

Ngoài việc chấp nhận đường dẫn đến tập lệnh service worker, phương thức register() cũng có thể chấp nhận một đối tượng tùy chọn, nơi ta có thể xác định scope của service worker. Ở đây, ta xác định phạm vi của service worker thành /blog/ , điều này sẽ giới hạn service worker chỉ trong folder blog .

Cài đặt

Thực tế là một service worker đã được đăng ký thành công không nghĩa là nó đã được cài đặt. Đó là lúc giai đoạn cài đặt của vòng đời bắt đầu hoạt động. Sau khi đăng ký thành công service worker, tập lệnh được download và sau đó trình duyệt sẽ cố gắng cài đặt service worker. Service worker sẽ chỉ được cài đặt trong một trong hai trường hợp sau:

Nhân viên dịch vụ chưa được đăng ký trước đây
Tập lệnh của service worker thay đổi (ngay cả khi nó bằng một byte).

Khi một service worker đã được cài đặt, sự kiện install sẽ được kích hoạt. Ta có thể lắng nghe sự kiện này và thực hiện một số tác vụ dành riêng cho ứng dụng. Ví dụ: tại thời điểm này, ta có thể lưu nội dung tĩnh của ứng dụng vào cache :

sw.js

const assetsToCache = [     '/index.html',     '/about.html',     '/css/app.css',     '/js/app.js', ]  self.addEventListener('install', function (event) {     event.waitUntil(         caches.open('staticAssetsCache').then(function (cache) {               return cache.addAll(assetsToCache);         })       ); });

Ở đây, ta đang sử dụng phương thức open() của Cache API, phương thức này chấp nhận tên của cache ( staticAssetsCache trong trường hợp này) để mở (nếu nó đã tồn tại) hoặc tạo và trả về một lời hứa. Khi lời hứa được giải quyết, nghĩa là bên trong then() , ta lại sử dụng addAll() của Cache API, chấp nhận một mảng URL vào bộ nhớ cache. Vì phương thức open() sẽ trả về một lời hứa, ta cần bọc nó bên trong event.waitUntil() , điều này sẽ làm trì hoãn quá trình cài đặt service worker cho đến khi lời hứa được giải quyết. Nếu lời hứa bị từ chối, sự kiện install không thành công và nhân viên dịch vụ sẽ bị loại bỏ.

Kích hoạt

Nếu quá trình cài đặt thành công, service worker sẽ chuyển sang trạng thái installed (mặc dù chưa hoạt động), trong thời gian này, nó chờ kiểm soát trang từ service worker hiện tại. Sau đó, nó chuyển sang giai đoạn tiếp theo trong vòng đời, đó là giai đoạn kích hoạt. Nhân viên dịch vụ không được kích hoạt ngay lập tức khi cài đặt. Service worker sẽ chỉ hoạt động (nghĩa là được kích hoạt) trong bất kỳ trường hợp nào sau đây:

Nếu không có nhân viên dịch vụ hiện đang hoạt động
Nếu self.skipWaiting() được gọi trong trình xử lý sự kiện install của tập lệnh service worker
Nếu user làm mới trang

Ví dụ về việc sử dụng phương thức skipWaiting() để kích hoạt nhân viên dịch vụ có thể giống như dưới đây:

sw.js

self.addEventListener('install', function (event) {     self.skipWaiting();      event.waitUntil(            // static assets caching       ); });

Sự kiện activate khi nhân viên dịch vụ đang hoạt động. Giống như sự kiện install , ta cũng có thể lắng nghe sự kiện activate và thực hiện một số tác vụ cụ thể của ứng dụng. Ví dụ: xóa bộ nhớ cache:

sw.js

const cacheVersion = 'v1';  self.addEventListener('activate', function (event) {      event.waitUntil(          caches.keys().then(function (cacheNames) {             cacheNames.map(function (cacheName) {                 if (cacheName.indexOf(cacheVersion) < 0) {                      return caches.delete(cacheName);                    }                  });              });         })      );  });

Đoạn mã trên lặp lại tất cả các cache được đặt tên và xóa bất kỳ cache nào hiện có nếu bộ nhớ đệm không thuộc về service worker hiện tại.

Khi service worker đã được kích hoạt, nó hiện có toàn quyền kiểm soát các trang. Với service worker đang hoạt động, nó hiện có thể xử lý các sự kiện như fetch , push và sync .

sw.js

 self.addEventListener('fetch', function (event) {     event.respondWith(caches.match(event.request))     .then(function (response) {         return response || fetch(event.request);     }); });

Nếu service worker sau khi hoạt động, không nhận được bất kỳ sự kiện chức năng nào được đề cập ở trên, nó sẽ chuyển sang trạng thái idle . Sau khi không hoạt động một thời gian, nhân viên dịch vụ chuyển sang trạng thái terminated . Điều này không nghĩa là service worker đã được gỡ cài đặt hoặc hủy đăng ký. Trên thực tế, nhân viên dịch vụ sẽ trở nên nhàn rỗi ngay khi bắt đầu nhận các sự kiện hư cấu.

Dưới đây là tóm tắt trực quan về vòng đời của nhân viên dịch vụ:

Vòng đời của Nhân viên Dịch vụ

Kết luận

Trong bài viết này, ta đã xem xét vòng đời của service worker, các sự kiện được phát ra ở giai đoạn cuối của vòng đời. Ngoài ra, ta đã xem xét một số điều có thể có với một nhân viên dịch vụ bằng cách kết nối vào một số sự kiện này.

Tags:

Các tin liên quan