Người dùng mong muốn ứng dụng khởi động một cách đáng tin cậy trên kết nối mạng chậm hoặc không ổn định, hoặc thậm chí cả khi không có mạng. Họ muốn nội dung mà họ tương tác gần đây nhất, chẳng hạn như bản nhạc đa phương tiện hoặc vé và hành trình, đều có sẵn và sử dụng được. Khi không thể thực hiện một yêu cầu, người dùng sẽ mong ứng dụng thông báo cho họ thay vì tự động không thành công hoặc gặp sự cố. Họ muốn tất cả những điều này xảy ra nhanh chóng. Như bạn có thể thấy trong Milli giây tạo ra hàng triệu, ngay cả việc cải thiện thời gian tải chỉ 0,1 giây cũng có thể giúp tăng số lượt chuyển đổi thêm đến 10%. Trình chạy dịch vụ là công cụ giúp Ứng dụng web tiến bộ (PWA) đáp ứng kỳ vọng của người dùng.
Khi một ứng dụng yêu cầu một tài nguyên thuộc phạm vi của trình chạy dịch vụ, thì trình chạy dịch vụ đó sẽ chặn yêu cầu đó và hoạt động như một proxy mạng, ngay cả khi người dùng không có kết nối mạng. Sau đó, ứng dụng có thể quyết định xem có nên phân phát tài nguyên từ bộ nhớ đệm bằng API Bộ nhớ đệm hay không, phân phát tài nguyên từ mạng như thể không có trình chạy dịch vụ nào đang hoạt động hoặc tạo tài nguyên đó từ thuật toán cục bộ. Điều này giúp bạn mang đến trải nghiệm chất lượng cao như trải nghiệm của ứng dụng trên nền tảng, ngay cả khi ứng dụng không có kết nối mạng.
Đăng ký một trình chạy dịch vụ
Trước khi một trình chạy dịch vụ kiểm soát trang của bạn, bạn phải đăng ký trang đó cho PWA. Điều đó có nghĩa là lần đầu tiên người dùng mở PWA, tất cả các yêu cầu mạng của ứng dụng đó sẽ chuyển thẳng đến máy chủ của bạn vì trình chạy dịch vụ chưa có quyền kiểm soát các trang của bạn.
Sau khi kiểm tra xem trình duyệt có hỗ trợ Service Worker API hay không, PWA của bạn có thể đăng ký một trình chạy dịch vụ. Sau khi tải, trình chạy dịch vụ sẽ tự thiết lập giữa PWA và mạng, chặn các yêu cầu và phân phát các phản hồi tương ứng.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register("/serviceworker.js");
}
Xác minh xem một trình chạy dịch vụ đã được đăng ký hay chưa
Để xác minh xem một trình chạy dịch vụ đã được đăng ký hay chưa, hãy dùng các công cụ cho nhà phát triển trong trình duyệt yêu thích của bạn.
Trong trình duyệt dựa trên Firefox và Chromium (Microsoft Edge, Google Chrome hoặc Samsung Internet):
- Mở công cụ cho nhà phát triển, sau đó nhấp vào thẻ Application (Ứng dụng).
- Trong ngăn bên trái, hãy chọn Service Worker (Trình chạy dịch vụ).
- Kiểm tra để đảm bảo URL tập lệnh của trình chạy dịch vụ xuất hiện với trạng thái "Đã kích hoạt". (Để biết thêm thông tin, hãy xem phần Vòng đời). Trên Firefox, trạng thái có thể là "Đang chạy" hoặc "Đã dừng".
Trong Safari:
- Nhấp vào Phát triển > Trình chạy dịch vụ.
- Hãy kiểm tra trình đơn này để tìm mục nhập có nguồn gốc hiện tại. Khi bạn nhấp vào mục đó, một trình kiểm tra sẽ mở ra trên ngữ cảnh của trình chạy dịch vụ.
Phạm vi
Thư mục của trình chạy dịch vụ sẽ xác định phạm vi của trình chạy dịch vụ đó. Trình chạy dịch vụ sống tại example.com/my-pwa/sw.js có thể điều khiển mọi thao tác điều hướng tại hoặc trong đường dẫn my-pwa, chẳng hạn như example.com/my-pwa/demos/. Trình chạy dịch vụ chỉ có thể kiểm soát các mục (trang, trình thực thi, gọi chung là "ứng dụng") trong phạm vi của chúng.
Phạm vi này áp dụng cho các thẻ trình duyệt và cửa sổ PWA.
Chỉ cho phép một trình chạy dịch vụ trên mỗi phạm vi. Khi một trình chạy dịch vụ đang hoạt động và đang chạy, thường chỉ có một thực thể bất kể có bao nhiêu ứng dụng khách (cửa sổ PWA hoặc thẻ trình duyệt) trong bộ nhớ.
Safari có quy trình quản lý phạm vi phức tạp hơn, hay còn gọi là phân vùng, ảnh hưởng đến cách các phạm vi hoạt động với iframe nhiều miền. Để tìm hiểu thêm về cách triển khai WebKit, hãy tham khảo bài đăng trên blog của họ.
Vòng đời
Trình chạy dịch vụ có vòng đời quy định cách cài đặt, tách biệt với quá trình cài đặt PWA.
Vòng đời trình chạy dịch vụ bắt đầu bằng việc đăng ký trình chạy dịch vụ. Sau đó, trình duyệt sẽ cố gắng tải xuống và phân tích cú pháp tệp trình chạy dịch vụ. Nếu phân tích cú pháp thành công, sự kiện install của trình chạy dịch vụ sẽ được kích hoạt. Sự kiện install chỉ kích hoạt một lần.
Quá trình cài đặt trình chạy dịch vụ diễn ra tự động mà không yêu cầu sự cho phép của người dùng, ngay cả khi người dùng không cài đặt PWA. API Trình chạy dịch vụ hoạt động ngay cả trên các nền tảng không hỗ trợ cài đặt PWA, chẳng hạn như Safari và Firefox trên thiết bị máy tính.
Sau khi cài đặt, bạn cần kích hoạt trình chạy dịch vụ trước khi có thể kiểm soát các ứng dụng, bao gồm cả PWA của bạn. Khi trình chạy dịch vụ đã sẵn sàng kiểm soát ứng dụng của mình, sự kiện activate sẽ kích hoạt. Tuy nhiên, theo mặc định, một trình chạy dịch vụ đã kích hoạt không thể quản lý trang đã đăng ký cho đến lần tiếp theo bạn truy cập vào trang đó bằng cách tải lại trang hoặc mở lại PWA.
Bạn có thể theo dõi các sự kiện trong phạm vi toàn cục của trình chạy dịch vụ bằng cách sử dụng đối tượng self:
serviceworker.js
// This code executes in its own worker or thread
self.addEventListener("install", event => {
console.log("Service worker installed");
});
self.addEventListener("activate", event => {
console.log("Service worker activated");
});
Cập nhật một trình chạy dịch vụ
Trình chạy dịch vụ được cập nhật khi trình duyệt phát hiện thấy trình chạy dịch vụ điều khiển ứng dụng và phiên bản mới của tệp trình chạy dịch vụ từ máy chủ khác nhau về số byte.
Sau khi cài đặt thành công, trình chạy dịch vụ mới sẽ chờ kích hoạt cho đến khi trình chạy dịch vụ cũ không còn kiểm soát bất kỳ ứng dụng nào nữa. Trạng thái này được gọi là "waiting" (đang chờ) và là cách trình duyệt đảm bảo rằng mỗi lần chỉ có một phiên bản trình chạy dịch vụ chạy.
Việc làm mới trang hoặc mở lại PWA sẽ không khiến trình chạy dịch vụ mới nắm quyền kiểm soát. Người dùng phải đóng hoặc di chuyển khỏi tất cả các thẻ và cửa sổ bằng cách sử dụng trình chạy dịch vụ hiện tại, sau đó quay lại để cấp quyền kiểm soát cho trình chạy dịch vụ mới. Để biết thêm thông tin, hãy xem phần Vòng đời trình chạy dịch vụ.
Tuổi thọ của trình chạy dịch vụ
Một trình chạy dịch vụ đã cài đặt và đăng ký có thể quản lý tất cả yêu cầu mạng trong phạm vi của trình chạy đó. PWA chạy trên luồng riêng, với thao tác kích hoạt và chấm dứt do trình duyệt kiểm soát, cho phép trình duyệt hoạt động ngay cả trước khi PWA mở hoặc sau khi đóng. Trình chạy dịch vụ chạy trên luồng riêng, nhưng trạng thái trong bộ nhớ có thể không tồn tại giữa các lần chạy của một trình chạy dịch vụ. Vì vậy, hãy đảm bảo rằng mọi thứ bạn muốn sử dụng lại cho mỗi lần chạy đều có trong IndexedDB hoặc một số bộ nhớ lâu dài khác.
Nếu chưa chạy, một trình chạy dịch vụ sẽ bắt đầu bất cứ khi nào một yêu cầu mạng được gửi trong phạm vi của trình chạy, hoặc khi nhận được một sự kiện kích hoạt như hoạt động đồng bộ hoá nền định kỳ hoặc thông báo đẩy.
Trình chạy dịch vụ bị chấm dứt nếu chúng không hoạt động trong vài giây hoặc nếu họ bận quá lâu. Thời gian cho việc này khác nhau giữa các trình duyệt. Nếu một trình chạy dịch vụ đã bị chấm dứt và có một sự kiện sẽ khởi động trình chạy đó, thì trình chạy dịch vụ đó sẽ khởi động lại.
Tính năng
Một trình chạy dịch vụ đã đăng ký và đang hoạt động sẽ sử dụng một luồng có vòng đời thực thi hoàn toàn khác với luồng chính của PWA. Tuy nhiên, theo mặc định, tệp trình chạy dịch vụ không có hành vi nào. Mã này sẽ không lưu vào bộ nhớ đệm hoặc phân phát tài nguyên nào; đây là những việc mã của bạn cần thực hiện. Bạn sẽ tìm hiểu cách thực hiện trong các chương sau.
Các chức năng của trình chạy dịch vụ không chỉ dành cho proxy hoặc phân phát các yêu cầu HTTP. Ngoài ra, chúng tôi còn cung cấp các tính năng khác cho các mục đích khác, chẳng hạn như thực thi mã trong nền, thông báo đẩy trên web và xử lý các khoản thanh toán. Chúng ta sẽ thảo luận về những bổ sung này trong phần Tính năng.