Giới thiệu về Công nhân dịch vụ JavaScript

Bạn đã bao giờ tự hỏi làm thế nào một số trang web dường như tiếp tục hoạt động ngay cả khi bạn ngoại tuyến? Bí mật rất đơn giản: những trang web này có nhân viên phục vụ.

Nhân viên dịch vụ là công nghệ quan trọng đằng sau nhiều tính năng giống như ứng dụng gốc của các ứng dụng web hiện đại.

Nhân viên dịch vụ là gì?

Service worker là một loại nhân viên web JavaScript chuyên biệt. Service worker là một tệp JavaScript có chức năng giống như một máy chủ proxy. Nó bắt các yêu cầu mạng gửi đi từ ứng dụng của bạn, cho phép bạn tạo các phản hồi tùy chỉnh. Ví dụ: bạn có thể cung cấp các tệp đã lưu trong bộ nhớ cache cho người dùng khi họ ngoại tuyến.

Nhân viên dịch vụ cũng cho phép bạn thêm các tính năng như đồng bộ hóa nền vào các ứng dụng web của bạn.

Tại sao Nhân viên Dịch vụ?

Các nhà phát triển web đã cố gắng mở rộng khả năng của các ứng dụng của họ trong một thời gian dài. Trước khi nhân viên dịch vụ ra đời, bạn có thể sử dụng nhiều giải pháp khác nhau để thực hiện điều này. Một đặc biệt đáng chú ý là AppCache, làm cho các tài nguyên bộ nhớ đệm trở nên thuận tiện. Thật không may, nó có các vấn đề khiến nó trở thành một giải pháp không thực tế cho hầu hết các ứng dụng.

AppCache dường như là một ý tưởng hay vì nó cho phép bạn chỉ định nội dung để lưu vào bộ nhớ cache thực sự dễ dàng. Tuy nhiên, nó đưa ra nhiều giả định về những gì bạn đang cố gắng làm và sau đó bị phá vỡ một cách khủng khiếp khi ứng dụng của bạn không tuân theo chính xác những giả định đó. Đọc Ứng dụng Cache của Jake Archibald (có tiêu đề nhưng được viết tốt) là một Douchebag để biết thêm chi tiết. (Nguồn: MDN)

Nhân viên dịch vụ là nỗ lực hiện tại để giảm các hạn chế của ứng dụng web mà không có nhược điểm của công nghệ như AppCache.

Các trường hợp sử dụng cho nhân viên dịch vụ

Vậy chính xác thì nhân viên dịch vụ để bạn làm gì? Nhân viên dịch vụ cho phép bạn thêm các tính năng đặc trưng của ứng dụng gốc vào ứng dụng web của bạn. Họ cũng có thể cung cấp trải nghiệm bình thường trên các thiết bị không hỗ trợ nhân viên dịch vụ. Các ứng dụng như thế này đôi khi được gọi là Ứng dụng web tiến bộ (PWA).

Dưới đây là một số tính năng mà nhân viên dịch vụ có thể thực hiện:

• Cho phép người dùng tiếp tục sử dụng ứng dụng (hoặc ít nhất là một phần của ứng dụng) khi họ không còn kết nối với Internet. Nhân viên dịch vụ đạt được điều này bằng cách cung cấp nội dung được lưu trong bộ nhớ cache theo yêu cầu.
• Trong các trình duyệt dựa trên Chromium, nhân viên dịch vụ là một trong những yêu cầu để có thể cài đặt ứng dụng web.
• Nhân viên dịch vụ là cần thiết để ứng dụng web của bạn có thể triển khai thông báo đẩy.

Vòng đời của một nhân viên dịch vụ

Nhân viên dịch vụ có thể kiểm soát các yêu cầu cho toàn bộ trang web hoặc chỉ một phần các trang của trang web. Một trang web cụ thể chỉ có thể có một nhân viên dịch vụ đang hoạt động và tất cả nhân viên dịch vụ đều có vòng đời dựa trên sự kiện. Vòng đời của một service worker thường trông như thế này:

1. Đăng ký và tải xuống công nhân. Vòng đời của service worker bắt đầu khi tệp JavaScript đăng ký nó. Nếu đăng ký thành công, nhân viên dịch vụ tải xuống, sau đó bắt đầu chạy bên trong một chuỗi đặc biệt.
2. Khi một trang do service worker kiểm soát được tải, service worker sẽ nhận được sự kiện ‘cài đặt’. Đây luôn là sự kiện đầu tiên mà service worker nhận được và bạn có thể thiết lập một trình lắng nghe cho sự kiện này bên trong worker. Sự kiện ‘cài đặt’ thường được sử dụng để tìm nạp và / hoặc lưu vào bộ nhớ cache bất kỳ tài nguyên nào mà nhân viên dịch vụ cần.
3. Sau khi nhân viên dịch vụ cài đặt xong, nó sẽ nhận được sự kiện ‘kích hoạt’. Sự kiện này cho phép worker dọn dẹp các tài nguyên dư thừa được sử dụng bởi service worker trước đó. Nếu bạn đang cập nhật nhân viên dịch vụ, sự kiện kích hoạt sẽ chỉ kích hoạt khi an toàn để thực hiện việc này. Đây là khi không có trang nào được tải vẫn sử dụng phiên bản cũ của service worker.
4. Sau đó, service worker có toàn quyền kiểm soát tất cả các trang đã được tải sau khi nó được đăng ký thành công.
5. Giai đoạn cuối cùng của vòng đời là dự phòng, xảy ra khi service worker bị xóa hoặc thay thế bằng phiên bản mới hơn.

Cách sử dụng Service worker trong JavaScript

API Service Worker (MDN) cung cấp giao diện cho phép bạn tạo và tương tác với các service worker trong JavaScript.

if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
console.log('Service worker registration succeeded:', registration);
}).catch((error) => { console.log('Service worker registration failed:', error); });
} else {
console.log('Service workers are not supported.');
}

self.addEventListener('install', (event) => {
event.waitUntil(new Promise((resolve, reject) => {
console.log("doing setup stuff")
resolve()
}))
console.log("Service worker finished installing")
})
self.addEventListener('activate', (event) => {
event.waitUntil(new Promise((resolve, reject) => {
console.log("doing clean-up stuff!")
resolve()
}))
console.log('activation done!')
})
self.addEventListener('fetch', (event) => {
console.log("Request intercepted", event)
});