Người dùng mong muốn ứng dụng sẽ khởi động trên kết nối mạng chậm hoặc không ổn định, hay ngay cả khi không có mạng. Người này 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ì lặng lẽ không thành công hoặc gặp sự cố. Ngoài ra, người dùng muốn làm việc này một cách nhanh chóng. Như chúng ta có thể thấy trong nghiên cứu này, Mili giây tạo ra hàng triệu, thậm chí chỉ cần cải thiện 0,1 giây về thời gian tải cũng có thể giúp tăng tỷ lệ chuyển đổi lên đến 10%. Tóm lại: người dùng kỳ vọng PWA đáng tin cậy và đó là lý do chúng tôi có nhân viên dịch vụ.
Xin chào trình chạy dịch vụ
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ụ, kể cả khi người dùng không có kết nối mạng, thì trình chạy dịch vụ này sẽ chặn yêu cầu đó để hoạt động như một proxy mạng. Sau đó, mô-đun này có thể quyết định xem nên phân phát tài nguyên từ bộ nhớ đệm thông qua API Bộ nhớ đệm, từ mạng như thường lệ mà không cần trình chạy dịch vụ hay tạo tài nguyên đó từ thuật toán cục bộ. Nhờ đó, bạn có thể mang đến trải nghiệm tương tự như trải nghiệm của một ứng dụng nền tảng, thậm chí còn có thể hoạt động hoàn toàn ngoại tuyến.
Đăng ký một trình chạy dịch vụ
Trước khi một nhân viên dịch vụ kiểm soát trang của bạn, trang đó phải được đăng ký cho PWA của bạn. Tức là lần đầu tiên người dùng truy cập vào PWA của bạn, các yêu cầu mạng sẽ chuyển thẳng đến máy chủ của bạn vì trình chạy dịch vụ này chưa 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ụ. Khi được tải, dịch vụ này sẽ thiết lập cửa hàng giữa PWA của bạn 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 mà bạn yêu thích.
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". (Bạn sẽ tìm hiểu về ý nghĩa của trạng thái này trong phần vòng đời của chương này). Trên Firefox, trạng thái có thể là "Đang chạy" hoặc "Đã dừng".
Trong Safari:
- Nhấp vào trình đơn Develop (Phát triển), rồi nhấp vào trình đơn phụ Service Workers (Trình chạy dịch vụ).
- Hãy kiểm tra để đảm bảo một mục có nguồn gốc hiện tại xuất hiện trong trình đơn phụ. Thao tác này sẽ mở ra một trình kiểm tra 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 đường dẫn my-pwa hoặc bên dưới, 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 khách") trong phạm vi của họ. Phạm vi á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 đang hoạt động và đang chạy, thường chỉ có một thực thể dùng được bất kể có bao nhiêu ứng dụng trong bộ nhớ (chẳng hạn như cửa sổ PWA hoặc thẻ trình duyệt).
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 phạm vi hoạt động nếu bạn có iframe nhiều miền. Để đọc thêm về việc triển khai WebKit, hãy đọc 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, điều này tách biệt với quá trình cài đặt PWA của bạn.
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 service worker. Nếu phân tích cú pháp thành công, sự kiện install 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 một cách tự động mà không cần sự cho phép của người dùng, ngay cả khi người dùng không cài đặt PWA. Service Worker API thậm chí còn có sẵn 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 máy tính.
Sau khi cài đặt, nhân viên dịch vụ vẫn chưa kiểm soát được các ứng dụng, bao gồm cả PWA của bạn. Bạn cần kích hoạt tài khoản này trước. Khi trình chạy dịch vụ đã sẵn sàng kiểm soát các ứng dụng khách, sự kiện activate sẽ kích hoạt. Tuy nhiên, điều này không có nghĩa là trang đã đăng ký trình chạy dịch vụ sẽ được quản lý. Theo mặc định, trình chạy dịch vụ sẽ không nắm quyền kiểm soát cho đến lần tiếp theo bạn truy cập vào trang đó, do 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ụ hiện đang kiểm soát ứng dụng khách và phiên bản mới (từ máy chủ của bạn) của cùng một tệp là 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ẽ đợi kích hoạt cho đến khi trình chạy dịch vụ hiện tại (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 dịch vụ của bạn 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 cần đóng hoặc di chuyển khỏi tất cả các thẻ và cửa sổ bằng trình chạy dịch vụ hiện tại rồi quay lại. Chỉ khi đó, trình chạy dịch vụ mới mới nắm quyền kiểm soát. Hãy xem bài viết này về vòng đời của trình chạy dịch vụ để biết thêm thông tin.
Tuổi thọ của trình chạy dịch vụ
Sau khi cài đặt và đăng ký, một trình chạy dịch vụ có thể quản lý tất cả các yêu cầu mạng trong phạm vi của trình chạy dịch vụ đó. Trình duyệt 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. Nhờ vậy, ứng dụng có thể hoạt động ngay cả trước hoặc sau khi PWA mở. Mặc dù service worker chạy trên luồng riêng, nhưng không có gì đảm bảo rằng trạng thái trong bộ nhớ sẽ tồn tại giữa các lần 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 trong mỗi lần chạy đều có trong IndexedDB hoặc bộ nhớ liên tục 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 có yêu cầu mạng trong phạm vi của yêu cầu hoặc khi nhận được một sự kiện kích hoạt, chẳng hạn như đồng bộ hoá nền định kỳ hoặc thông báo đẩy.
Trình chạy dịch vụ không tồn tại vô thời hạn. Mặc dù thời gian chính xác khác nhau giữa các trình duyệt, trình chạy dịch vụ sẽ bị chấm dứt nếu không hoạt động trong vài giây hoặc nếu họ bận quá lâu. Nếu một trình chạy dịch vụ đã bị chấm dứt và có một sự kiện xảy ra khiến trình chạy đó khởi động, thì trình chạy dịch vụ đó sẽ khởi động lại.
Tính năng
Với một trình chạy dịch vụ đã đăng ký và đang hoạt động, bạn sẽ có một luồng có vòng đời thực thi hoàn toàn khác với luồng chính trên PWA của bạn. Tuy nhiên, theo mặc định, tệp trình chạy dịch vụ không có hành vi nào. Phần mềm này sẽ không lưu vào bộ nhớ đệm hoặc phân phát bất kỳ tài nguyên nào vì việc này phải do mã của bạn thực hiện. Bạn sẽ tìm hiểu cách thực hiện trong các chương sau.
Khả năng của trình chạy dịch vụ không chỉ dành cho proxy hoặc phân phối các yêu cầu HTTP; ngoài ra còn có các tính năng khác dành cho các mục đích khác, chẳng hạn như thực thi mã nền, thông báo đẩy trên web và xử lý thanh toán. Chúng ta sẽ thảo luận về những tính năng bổ sung này trong chương tính năng.