Lớp học lập trình này cho bạn biết cách đăng ký trình chạy dịch vụ từ trong ứng dụng web và sử dụng Công cụ của Chrome cho nhà phát triển để quan sát hành vi của trình chạy đó. Khoá học này cũng đề cập đến một số kỹ thuật gỡ lỗi mà bạn có thể thấy hữu ích khi xử lý trình chạy dịch vụ.
Làm quen với dự án mẫu
Các tệp trong dự án mẫu phù hợp nhất với lớp học lập trình này là:
register-sw.jsbắt đầu trống, nhưng sẽ chứa mã dùng để đăng ký trình chạy dịch vụ. Mô-đun này đã được tải thông qua thẻ<script>bên trongindex.htmlcủa dự án.service-worker.jscũng trống theo cách tương tự. Đây là tệp chứa trình chạy dịch vụ cho dự án này.
Thêm mã đăng ký trình chạy dịch vụ
Bạn sẽ không thể sử dụng một trình chạy dịch vụ (ngay cả một trình chạy trống, chẳng hạn như tệp service-worker.js hiện tại) trừ phi trình chạy đó được đăng ký trước. Bạn có thể làm việc này thông qua cuộc gọi đến:
navigator.serviceWorker.register(
'/service-worker.js'
)
bên trong tệp register-sw.js.
Tuy nhiên, trước khi thêm mã đó, bạn cần lưu ý một vài điểm.
Thứ nhất, không phải mọi trình duyệt đều hỗ trợ trình thực thi dịch vụ. Điều này đặc biệt đúng với các phiên bản trình duyệt cũ hơn không tự động cập nhật. Vì vậy, cách tốt nhất là gọi navigator.serviceWorker.register() theo điều kiện sau khi kiểm tra xem navigator.serviceWorker có được hỗ trợ hay không.
Thứ hai, khi bạn đăng ký một trình chạy dịch vụ, trình duyệt sẽ chạy mã trong tệp service-worker.js và có thể bắt đầu tải các URL xuống để điền vào bộ nhớ đệm, tuỳ thuộc vào mã trong trình xử lý sự kiện install và activate của trình chạy dịch vụ.
Việc chạy thêm mã và tải các thành phần xuống có thể tốn hết tài nguyên có giá trị mà trình duyệt của bạn có thể dùng để hiển thị trang web hiện tại. Để tránh sự can thiệp này, bạn nên trì hoãn việc đăng ký một trình chạy dịch vụ cho đến khi trình duyệt hoàn tất quá trình hiển thị trang hiện tại. Một cách thuận tiện để ước tính khoảng thời gian này là đợi cho đến khi sự kiện window.load được kích hoạt.
Kết hợp hai điểm đó lại với nhau, hãy thêm mã đăng ký trình chạy dịch vụ đa năng này vào tệp register-sw.js:
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js');
});
}
Thêm một số mã ghi nhật ký của trình chạy dịch vụ
Tệp service-worker.js là nơi tất cả logic cho quá trình triển khai trình chạy dịch vụ thường diễn ra. Bạn sẽ sử dụng kết hợp các sự kiện vòng đời của trình chạy dịch vụ, API bộ nhớ bộ nhớ đệm và kiến thức về lưu lượng truy cập mạng của ứng dụng web để tạo một trình chạy dịch vụ hoàn hảo, sẵn sàng xử lý mọi yêu cầu của ứng dụng web.
Nhưng... đó là tất cả những gì cần làm để tìm hiểu sau. Ở giai đoạn này, trọng tâm là quan sát các sự kiện khác nhau của trình chạy dịch vụ và làm quen với việc sử dụng Công cụ cho nhà phát triển của Chrome để gỡ lỗi trạng thái của trình chạy dịch vụ.
Để đạt được mục tiêu đó, hãy thêm mã sau vào service-worker.js. Mã này sẽ ghi lại thông báo vào bảng điều khiển Công cụ cho nhà phát triển để phản hồi nhiều sự kiện (nhưng không làm gì khác):
self.addEventListener('install', (event) => {
console.log('Inside the install handler:', event);
});
self.addEventListener('activate', (event) => {
console.log('Inside the activate handler:', event);
});
self.addEventListener(fetch, (event) => {
console.log('Inside the fetch handler:', event);
});
Làm quen với bảng điều khiển Trình chạy dịch vụ trong Công cụ cho nhà phát triển
Bây giờ, bạn đã thêm mã vào tệp register-sw.js và service-worker.js, đã đến lúc truy cập vào phiên bản Trực tiếp của dự án mẫu và quan sát trình chạy dịch vụ hoạt động trong thực tế.
- Để xem trước trang web, hãy nhấn vào View App (Xem ứng dụng), sau đó nhấn vào
Fullscreen
(Toàn màn hình). - Nhấn tổ hợp phím "Control+Shift+J" (hoặc "Command+Option+J" trên máy Mac) để mở Công cụ cho nhà phát triển.
- Nhấp vào thẻ Bảng điều khiển.
Bạn sẽ thấy nội dung tương tự như các thông điệp nhật ký sau, cho thấy trình chạy dịch vụ đã được cài đặt và kích hoạt:
Sau đó, truy cập vào thẻ Ứng dụng rồi chọn bảng điều khiển Service Workers (Trình chạy dịch vụ). Bạn sẽ thấy như sau:
Điều này cho bạn biết rằng có một trình chạy dịch vụ có URL nguồn là service-worker.js cho ứng dụng web solar-donkey.glitch.me hiện đã được kích hoạt và đang chạy. Chỉ số này cũng cho bạn biết rằng hiện có một ứng dụng (thẻ mở) đang do trình chạy dịch vụ kiểm soát.
Bạn có thể sử dụng các đường liên kết trên bảng điều khiển này, chẳng hạn như Unregister hoặc stop, để thực hiện thay đổi đối với trình chạy dịch vụ hiện đã đăng ký cho mục đích gỡ lỗi.
Kích hoạt luồng cập nhật của trình chạy dịch vụ
Một trong những khái niệm chính cần hiểu rõ khi phát triển bằng trình chạy dịch vụ là ý tưởng về quy trình cập nhật.
Sau khi người dùng truy cập vào một ứng dụng web đăng ký trình chạy dịch vụ, họ sẽ nhận được mã cho bản sao hiện tại của service-worker.js được cài đặt trên trình duyệt cục bộ của họ. Nhưng điều gì sẽ xảy ra khi bạn cập nhật phiên bản service-worker.js được lưu trữ trên máy chủ web của mình?
Khi một khách truy cập thường xuyên quay lại một URL thuộc phạm vi của trình chạy dịch vụ, trình duyệt sẽ tự động yêu cầu service-worker.js mới nhất và kiểm tra mọi thay đổi. Nếu có bất kỳ điều gì trong tập lệnh trình chạy dịch vụ khác biệt, thì trình chạy dịch vụ mới sẽ có cơ hội cài đặt, kích hoạt và cuối cùng nắm quyền kiểm soát.
Bạn có thể mô phỏng quy trình cập nhật này bằng cách quay lại trình soạn thảo mã của dự án và thực hiện bất kỳ thay đổi nào đối với mã. Một thay đổi nhanh là thay thế
self.addEventListener('install', (event) => {
console.log('Inside the install handler:', event);
});
cùng với
self.addEventListener('install', (event) => {
console.log('Inside the UPDATED install handler:', event);
});
Sau khi thực hiện thay đổi đó, hãy quay lại phiên bản Trực tiếp của ứng dụng mẫu và tải lại trang khi thẻ Ứng dụng cho nhà phát triển vẫn đang mở. Bạn sẽ thấy như sau:
Điều này cho thấy có 2 phiên bản trình chạy dịch vụ được cài đặt tại thời điểm này. Phiên bản trước (đã được kích hoạt) đang chạy và thuộc quyền kiểm soát của trang hiện tại. Phiên bản cập nhật của trình chạy dịch vụ được liệt kê ngay bên dưới. Tệp này đang ở trạng thái waiting và sẽ vẫn đợi cho đến khi bạn đóng tất cả các thẻ đang mở do trình chạy dịch vụ cũ kiểm soát.
Hành vi mặc định này đảm bảo rằng nếu trình chạy dịch vụ mới có sự khác biệt cơ bản về hành vi so với trình xử lý cũ (chẳng hạn như trình xử lý fetch có phản hồi bằng các tài nguyên không tương thích với các phiên bản cũ của ứng dụng web), thì trình chạy dịch vụ này sẽ không có hiệu lực cho đến khi người dùng tắt tất cả thực thể trước đó của ứng dụng web.
Tổng hợp mọi thứ
Bây giờ, bạn đã quen với quy trình đăng ký trình chạy dịch vụ và quan sát hành vi của trình chạy dịch vụ bằng Công cụ cho nhà phát triển của Chrome.
Giờ đây, bạn đã có thể bắt đầu triển khai các chiến lược lưu vào bộ nhớ đệm và tất cả nội dung hay sẽ giúp ứng dụng web của bạn tải nhanh chóng và ổn định.