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ừ bên 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 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ý 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 từ trống nhưng sẽ chứa mã dùng để đăng ký trình chạy dịch vụ. Nội dung này đã đượ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ụ
Bạn sẽ không sử dụng 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ể thực hiện việc này qua cuộc 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ã đó.
Thứ nhất, không phải trình duyệt nào cũng hỗ trợ trình chạy dịch vụ. Điều này đặc biệt đúng với các phiên bản cũ của trình duyệt không tự động cập nhật. Vì vậy, phương pháp hay 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 của bạn và có thể bắt đầu tải các URL xuống để đưa 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 mã bổ sung và tải các thành phần xuống có thể sử dụng 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 theo cách khác. Để tránh tình trạng can thiệp này, bạn nên trì hoãn việc đăng ký trình chạy dịch vụ cho đến khi trình duyệt hiển thị xong trang hiện tại. Một cách thuận tiện để ước tính giá trị này là đợi cho đến khi sự kiện window.load được kích hoạt.
Đặt hai điểm đó lại với nhau, hãy thêm mã đăng ký của trình chạy dịch vụ đa năng này vào tệp register-sw.js của bạn:
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ý tất cả các yêu cầu của ứng dụng web.
Nhưng... đó là tất cả để 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ụ của bạn.
Để 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 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ì nhiều):
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 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ụ trong thực tế.
- Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó, nhấn vào
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 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 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. 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 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 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 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 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 bất kỳ tập lệnh nào trong tập lệnh trình chạy dịch vụ có 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ã 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 khi thẻ Ứng dụng trong Công cụ cho nhà phát triển vẫn đang mở. Bạn sẽ thấy nội dung như sau:
Điều này cho thấy 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à
trong quyền kiểm soát 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. Dịch vụ đó đang ở trạng thái waiting và sẽ tiếp tục chờ cho đến khi tất cả các thẻ đang mở do trình chạy dịch vụ cũ kiểm soát được đóng lại.
Hành vi mặc định này đảm bảo rằng nếu trình thực thi dịch vụ mới của bạn có sự khác biệt cơ bản về hành vi so với trình chạy 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 ứng dụng web cũ), thì trình chạy này 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ổng hợp nội dung
Bây giờ, bạn đã cảm thấy thoải mái 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ờ thì bạn đã ở vị trí tốt để 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 hữu ích sẽ giúp ứng dụng web của bạn tải nhanh và ổn định.