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