Lớp học lập trình này hướng dẫn bạn cách đăng ký worker dịch vụ 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 worker dịch vụ đó. Bài viết 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ý worker 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ý worker dịch vụ. Tệp này đang được tải thông qua thẻ<script>bên trongindex.htmlcủa dự án.service-worker.jscũng trống tương tự. Đó là tệp sẽ 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ụ
Trình chạy dịch vụ (ngay cả trình chạy dịch vụ trống, như tệp service-worker.js hiện tại) sẽ không được sử dụng trừ khi được đăng ký trước. Bạn có thể thực hiện việc này thông qua lệnh gọi đến:
navigator.serviceWorker.register(
'/service-worker.js'
)
bên trong tệp register-sw.js.
Tuy nhiên, bạn cần lưu ý một số điểm trước khi thêm mã đó.
Trước tiên, không phải trình duyệt nào cũng hỗ trợ worker dịch vụ. Điều này đặc biệt đúng đối với các phiên bản trình duyệt cũ không tự động cập nhật. Vì vậy, tốt nhất là bạn nên gọi navigator.serviceWorker.register() có đ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 worker 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 worker dịch vụ.
Việc chạy mã bổ sung và tải các thành phần xuống có thể làm hao tổn tài nguyên có giá trị mà trình duyệt của bạn có thể sử 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ý worker cho dịch vụ cho đến khi trình duyệt kết thúc quá trình hiển thị trang hiện tại. Một cách thuận tiện để ước chừng điều này là đợi cho đến khi sự kiện window.load được kích hoạt.
Khi kết hợp hai điểm đó, hãy thêm mã đăng ký worker 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 mà tất cả logic để 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ớ đệ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ụ được tạo thủ công 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ì bạn cần biết để học sau. Ở giai đoạn này, trọng tâm là quan sát nhiều sự kiện của worker dịch vụ và sử dụng thành thạo Công cụ của Chrome cho nhà phát triển để gỡ lỗi trạng thái của worker dịch vụ.
Để làm được điều đó, hãy thêm mã sau vào service-worker.js. Mã này sẽ ghi nhật ký thông báo vào bảng điều khiển DevTools để 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
Giờ đây, khi bạn đã thêm mã vào các 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ụ đang hoạt động.
- Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó, nhấn vào biểu tượng Màn hình toàn cả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 có dạng như thông điệp nhật ký sau đây, cho biết trình chạy dịch vụ đã được cài đặt và kích hoạt:
Sau đó, truy cập tab Applications (Ứng dụng) và chọn bảng điều khiển Service Workers. Bạn sẽ thấy nội dung tương tự như sau:
Điều này cho bạn biết rằng có một worker dịch vụ có URL nguồn là service-worker.js, cho ứng dụng web solar-donkey.glitch.me, hiện đang được kích hoạt và chạy. Phương thức này cũng cho bạn biết rằng hiện có một ứng dụng (thẻ đang mở) 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 các thay đổi đối với worker dịch vụ hiện đã đăng ký cho mục đích gỡ lỗi.
Kích hoạt quy trình cập nhật trình chạy dịch vụ
Một trong những khái niệm chính cần hiểu khi phát triển bằng worker 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 khách truy cập 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ỳ nội dung nào trong tập lệnh của worker dịch vụ khác, thì worker dịch vụ mới sẽ có cơ hội cài đặt, kích hoạt và cuối cùng là 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ã cho dự án và thực hiện bất kỳ thay đổi nào đối với mã. Một thay đổi nhanh chóng là thay thế
self.addEventListener('install', (event) => {
console.log('Inside the install handler:', event);
});
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 mà thẻ Ứng dụng DevTools vẫn mở. Bạn sẽ thấy nội dung tương tự như sau:
Điều này cho thấy rằng có hai 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à kiểm soát trang hiện tại. Phiên bản cập nhật của worker dịch vụ được liệt kê ngay bên dưới. Trạng thái này ở trạng thái waiting và sẽ tiếp tục chờ cho đến khi tất cả các thẻ đang mở do worker dịch vụ cũ kiểm soát đã đóng.
Hành vi mặc định này đảm bảo rằng nếu worker dịch vụ mới có hành vi khác biệt cơ bản so với worker dịch vụ cũ (chẳng hạn như trình xử lý fetch 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ì worker dịch vụ mới sẽ không có hiệu lực cho đến khi người dùng tắt tất cả các phiên bản trước đó của ứng dụng web.
Tóm tắt
Giờ đây, bạn đã có thể tự tin thực hiện quy trình đăng ký worker dịch vụ và quan sát hành vi của worker dịch vụ bằng Công cụ dành 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ả những tính năng hữu ích sẽ giúp ứng dụng web của bạn tải nhanh và đáng tin cậy.