Các phương pháp hay nhất để xác định thời gian đăng ký trình chạy dịch vụ của bạn.
Dịch vụ trình thực thi có thể tăng tốc đáng kể số lượt truy cập lặp lại vào ứng dụng web của bạn, nhưng bạn nên thực hiện các bước để đảm bảo rằng bản cài đặt ban đầu của trình chạy dịch vụ không làm giảm trải nghiệm truy cập đầu tiên của người dùng.
Nói chung, trì hoãn trình chạy dịch vụ đăng ký cho đến khi trang ban đầu được tải sẽ cung cấp trải nghiệm tốt nhất cho người dùng, đặc biệt là những người dùng trên thiết bị di động có kết nối mạng chậm hơn.
Mã nguyên mẫu phổ biến cho việc đăng ký
Nếu đã từng đọc về trình chạy dịch vụ, có thể bạn đã biết đến mã nguyên mẫu về cơ bản tương tự như sau:
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js');
}
Đôi khi, nội dung này có thể đi kèm với một số câu lệnh console.log() hoặc
mã
phát hiện bản cập nhật cho đăng ký trình chạy dịch vụ trước đó, như là một cách
để người dùng biết cần làm mới trang. Nhưng đó chỉ là những biến thể nhỏ về
bằng một vài dòng mã tiêu chuẩn.
Vậy, navigator.serviceWorker.register có thay đổi gì không? Có
những phương pháp hay nhất cần tuân thủ? Không có gì đáng ngạc nhiên (vì bài viết này không kết thúc
ngay tại đây), thì câu trả lời cho cả hai câu hỏi là "có!"
Lượt truy cập đầu tiên của người dùng
Hãy xem xét lượt truy cập đầu tiên của người dùng vào ứng dụng web. Chưa có trình chạy dịch vụ nào, và trình duyệt không có cách nào để biết trước liệu có dịch vụ hay không mà sau cùng sẽ được cài đặt.
Là một nhà phát triển, bạn nên ưu tiên việc đảm bảo rằng trình duyệt hoạt động nhanh nhận tập hợp tài nguyên quan trọng tối thiểu cần thiết để hiển thị . Bất cứ điều gì làm chậm tốc độ truy xuất các phản hồi đó đều là kẻ thù của nhanh chóng và hiệu quả.
Bây giờ, hãy tưởng tượng rằng trong quá trình tải JavaScript hoặc hình ảnh mà trang của bạn cần hiển thị, trình duyệt của bạn quyết định bắt đầu một luồng trong nền hoặc quy trình (để ngắn gọn, chúng tôi sẽ giả định đây là một chuỗi). Giả sử bạn không sử dụng một chiếc máy tính để bàn mạnh mẽ, mà là thuộc loại máy tính mà nhiều người trên thế giới coi là thiết bị chính của mình. Quay tròn luồng bổ sung này sẽ thêm tranh chấp về thời gian và bộ nhớ của CPU mà trình duyệt của bạn có thể dành cho việc hiển thị một trang web tương tác.
Luồng ở chế độ nền ở trạng thái rảnh không có khả năng tạo ra sự khác biệt đáng kể. Nhưng gì nếu luồng đó không ở trạng thái rảnh mà thay vào đó quyết định rằng luồng cũng sẽ bắt đầu tải xuống tài nguyên từ mạng? Bất kỳ mối lo ngại nào về CPU hoặc bộ nhớ tranh chấp nên giảm bớt lo lắng về băng thông bị giới hạn khả dụng với nhiều thiết bị di động. Băng thông rất quý giá nên đừng làm giảm giá trị các tài nguyên quan trọng bằng cách tải xuống các tài nguyên thứ cấp cùng lúc.
Tất cả những điều này là để nói rằng việc tạo một luồng trình chạy dịch vụ mới để tải xuống và bộ nhớ đệm ở chế độ nền có thể đáp ứng mục tiêu cung cấp trải nghiệm tương tác ngắn nhất vào lần đầu tiên người dùng truy cập của bạn.
Cải thiện bản mẫu
Giải pháp là kiểm soát việc bắt đầu trình chạy dịch vụ bằng cách chọn thời điểm gọi
navigator.serviceWorker.register(). Quy tắc chung là trì hoãn
cho đến sau ngày load
event
kích hoạt trên window, như sau:
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js');
});
}
Nhưng thời điểm thích hợp để bắt đầu đăng ký trình chạy dịch vụ cũng có thể phụ thuộc vào những gì ứng dụng web của bạn đang thực hiện ngay sau khi tải. Ví dụ: Google I/O Ứng dụng web 2016 có một ảnh động ngắn trước khi chuyển sang màn hình chính. Nhóm của chúng tôi tìm ra điều đó Việc ngừng đăng ký trình chạy dịch vụ trong thời gian tạo ảnh động có thể dẫn đến hiện tượng giật trên các thiết bị di động cấp thấp. Thay vì mang đến cho người dùng trải nghiệm kém, chúng tôi bị trễ đăng ký trình chạy dịch vụ cho đến sau hoạt ảnh, khi trình duyệt hoạt động hiệu quả nhất có thể không hoạt động vài giây.
Tương tự, nếu ứng dụng web của bạn sử dụng khung thực hiện thiết lập bổ sung sau khi trang đã tải, hãy tìm một sự kiện khung cụ thể cho biết thời điểm công việc được hoàn thành.
Các lượt truy cập tiếp theo
Cho đến bây giờ, chúng tôi vẫn tập trung vào trải nghiệm truy cập đầu tiên, nhưng tác động của nó đăng ký của nhân viên dịch vụ bị trì hoãn có các lần truy cập lặp lại vào trang web của bạn không? Mặc dù việc này có thể khiến một số người ngạc nhiên, nhưng sẽ không có tác động nào cả.
Khi được đăng ký, trình chạy dịch vụ sẽ trải qua install và
Vòng đời activate
sự kiện.
Sau khi được kích hoạt, trình chạy dịch vụ có thể xử lý các sự kiện fetch cho bất kỳ
các lượt truy cập tiếp theo vào ứng dụng web của bạn. Trình chạy dịch vụ bắt đầu trước
yêu cầu bất kỳ trang nào thuộc phạm vi của yêu cầu đó, điều này thật hợp lý khi bạn nghĩ rằng
về ứng dụng đó. Nếu trình chạy dịch vụ hiện tại chưa chạy trước đó
truy cập vào một trang, trang đó sẽ không có cơ hội thực hiện fetch sự kiện cho
yêu cầu điều hướng.
Vì vậy, khi có một trình chạy dịch vụ hoạt động, việc này không quan trọng khi bạn gọi
navigator.serviceWorker.register() hoặc trên thực tế, cho dù bạn có gọi nó hay không.
Trừ phi bạn thay đổi URL của tập lệnh trình chạy dịch vụ,
navigator.serviceWorker.register() thực sự là một
không hoạt động trong các lượt truy cập tiếp theo. Thời điểm
được gọi là không liên quan.
Lý do nên đăng ký sớm
Có trường hợp nào đăng ký nhân viên dịch vụ ngay khi
có hợp lý không? Một điều cần lưu ý là khi nhân viên dịch vụ sử dụng
clients.claim()
kiểm soát trang trong lần truy cập đầu tiên và trình chạy dịch vụ
thực hiện tích cực thời gian chạy
lưu vào bộ nhớ đệm
bên trong trình xử lý fetch. Trong tình huống đó, cần có
tận dụng lợi thế của nhân viên dịch vụ hoạt động nhanh nhất có thể, nhằm cố gắng
điền sẵn các tài nguyên có thể dùng sau này vào bộ nhớ đệm trong thời gian chạy. Nếu
ứng dụng web của bạn rơi vào danh mục này, bạn nên nhìn lại
đảm bảo rằng trình xử lý install của trình chạy dịch vụ không yêu cầu
để giành lấy băng thông với các yêu cầu của trang chính.
Thử nghiệm mọi thứ
Một cách tuyệt vời để mô phỏng lượt truy cập đầu tiên là mở ứng dụng web của bạn trong Chrome Chế độ ẩn danh cửa sổ, và xem lưu lượng truy cập mạng trong Công cụ cho nhà phát triển. Dưới dạng web nhà phát triển, bạn có thể tải lại hàng chục phiên bản cục bộ của ứng dụng web hàng chục lần một ngày. Tuy nhiên, bằng cách truy cập lại vào trang web của bạn khi đã có Service worker và bộ nhớ đệm được điền đầy đủ, bạn sẽ không nhận được trải nghiệm tương tự mà một người dùng mới sẽ nhận được, đồng thời cũng dễ dàng bỏ qua vấn đề tiềm ẩn.
Sau đây là ví dụ minh hoạ sự khác biệt về thời điểm đăng ký tạo. Cả hai ảnh chụp màn hình đều được chụp khi truy cập vào mẫu ứng dụng ở Chế độ ẩn danh sử dụng quy trình hạn chế mạng để mô phỏng kết nối chậm.
Ảnh chụp màn hình ở trên phản ánh lưu lượng truy cập mạng khi mẫu được sửa đổi
để thực hiện đăng ký trình chạy dịch vụ càng sớm càng tốt. Bạn có thể thấy
yêu cầu lưu trước đó (các mục nhập có bánh răng
biểu tượng
bên cạnh chúng, bắt nguồn từ trình xử lý install của trình chạy dịch vụ)
xen kẽ với các yêu cầu về các tài nguyên khác cần thiết để hiển thị trang.
Trong ảnh chụp màn hình ở trên, đăng ký trình chạy dịch vụ đã bị trì hoãn cho đến sau
đã tải trang. Bạn có thể thấy rằng các yêu cầu lưu vào bộ nhớ đệm chỉ bắt đầu
các tài nguyên đã được tìm nạp từ mạng, loại bỏ mọi tranh chấp về
băng thông. Hơn nữa, do một số mục mà chúng tôi đang lưu vào bộ nhớ đệm đã có sẵn
bộ nhớ đệm HTTP của trình duyệt – các mục có (from disk cache) trong Kích thước
– chúng tôi có thể điền sẵn bộ nhớ đệm của trình chạy dịch vụ mà không cần phải truy cập vào
lại mạng.
Sẽ thú vị hơn nếu bạn chạy loại thử nghiệm này từ một thiết bị cấp thấp thực tế trên mạng di động thực. Bạn có thể tận dụng tính năng gỡ lỗi từ xa của Chrome để kết nối điện thoại Android với máy tính để bàn của bạn qua USB và đảm bảo rằng mà bạn đang chạy phản ánh trải nghiệm thực tế của nhiều người dùng.
Kết luận
Tóm lại, hãy đảm bảo rằng người dùng có trải nghiệm tốt nhất khi truy cập lần đầu phải là ưu tiên hàng đầu. Trì hoãn đăng ký trình chạy dịch vụ cho đến sau đã tải trong lần truy cập đầu tiên có thể giúp đảm bảo điều đó. Bạn vẫn sẽ nhận được tất cả lợi ích của việc thuê một nhân viên dịch vụ cho các lần truy cập lặp lại của bạn.
Một cách đơn giản để đảm bảo trì hoãn thao tác ban đầu của trình chạy dịch vụ cho đến khi trang đầu tiên đã tải là hãy sử dụng:
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js');
});
}