Làm việc với trình chạy dịch vụ

Jeff Posnick

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 trang 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 ứng dụng đó. Điều này cũng bao gồm 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.js bắt đầu trống nhưng chứa mã được sử dụng để đăng ký trình chạy dịch vụ. Tệp này đang được tải thông qua thẻ <script> bên trong index.html của dự án.
  • service-worker.js cũng trống tương tự. Đây 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ụ

Một trình chạy dịch vụ (ngay cả một trình chạy dịch vụ trống, chẳng hạn như tệp service-worker.js hiện tại) sẽ không được sử dụng trừ phi đó là đã đăng ký đầu tiên. 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, trước khi thêm mã đó, bạn cần lưu ý một vài điểm sau tài khoản.

Trước tiên, không phải mọi trình duyệt 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 hỗ trợ.

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ể sử dụng hết các tài nguyên có giá trị mà trình duyệt của bạn có thể sử dụng để hiển thị . Để tránh sự can nhiễu này, bạn nên trì hoãn đăng ký trình chạy dịch vụ cho đến khi trình duyệt kết xuất xong trang hiện tại. Một cách thuận tiện để ước chừng giá trị này là đợi cho đến khi Đã kích hoạt window.load sự kiện.

Kết hợp hai điểm đó lại với nhau, hãy thêm trình chạy dịch vụ đa năng này mã đăng ký 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 tất cả logic cho trình chạy dịch vụ của bạn thường diễn ra. Bạn sẽ sử dụng kết hợp các trình chạy dịch vụ sự kiện trong vòng đời, thời gian 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 Service worker, sẵn sàng xử lý tất cả yêu cầu của ứng dụng web của bạn.

Nhưng... đó là tất cả để tìm hiểu sau. Ở giai đoạn này, trọng tâm là quan sát nhiều 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ụ.

Để làm được việc đó, hãy thêm mã sau vào service-worker.js. Mã này sẽ ghi nhật ký thông báo đến bảng điều khiển Công cụ cho nhà phát triển để phản hồi các sự kiện khác nhau (nhưng không thực hiện nhiều 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 register-sw.js và service-worker.js tệp, đã đến lúc truy cập vào phiên bản Live của dự án mẫu và quan sát trình chạy dịch vụ trong hoạt động.

  • Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó nhấn Toàn màn hình 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 những thông điệp nhật ký như sau: cho biết trình chạy dịch vụ đã được cài đặt và kích hoạt:

Hiển thị 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:

Hiển thị thông tin chi tiết về worker trong bảng điều khiển worker.

Đ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, đối với ứng dụng web solar-donkey.glitch.me, hiện đang là được kích hoạt và đang chạy. Thông báo này cũng cho bạn biết rằng hiện có một ứng dụng (thẻ đang mở) đang được 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 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ẽ kết thúc bằng 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ộ. Nhưng điều gì xảy ra khi bạn cập nhật phiên bản của service-worker.js được lưu trữ trên máy chủ web của bạn?

Khi khách truy cập quay lại một URL nằm trong 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 Live của ứng dụng mẫu và tải lại trang và thẻ Ứng dụng của Công cụ cho nhà phát triển vẫn đang mở. Bạn sẽ thấy nội dung tương tự như sau:

Hiển thị hai phiên bản trình chạy dịch vụ đã được cài đặt.

Biểu đồ này cho thấy có hai phiên bản trình chạy dịch vụ của bạn được cài đặt tại điểm. Phiên bản trước đó, đã được kích hoạt, đang chạy và đang ở 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. Nền tảng này nằm trong Trạng thái waiting, và sẽ tiếp tục chờ cho đến khi tất cả các tab đang mở được kiểm soát bởi đã đóng trình chạy dịch vụ cũ.

Hành vi mặc định này đảm bảo rằng nếu trình chạy dịch vụ có sự khác biệt cơ bản về hành vi so với trình chạy dịch vụ cũ, chẳng hạn như Trình xử lý fetch phản hồi các tài nguyên không tương thích với phiên bản cũ của ứng dụng web—nó 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

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ờ thì bạn đã ở vị thế 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ả những nội dung hữu ích sẽ giúp ứng dụng web của bạn tải một cách ổn định và đáng tin cậy một cách nhanh chóng.