Khi bạn đưa ra yêu cầu của máy chủ web, có khả năng bạn sẽ gặp lỗi. Điều này có thể là do người dùng đã mất kết nối hoặc máy chủ từ xa không hoạt động.
Mặc dù tài liệu này chủ yếu tập trung vào việc xử lý các yêu cầu GET
trong một trình chạy dịch vụ, nhưng các phương thức khác như POST
, PUT
hoặc DELETE
có thể được sử dụng. Các phương thức này thường dùng để giao tiếp với các API phụ trợ nhằm cung cấp dữ liệu cho ứng dụng web. Khi không có trình chạy dịch vụ, người dùng phải thử lại theo cách thủ công khi có kết nối mạng trở lại. Đây là việc không phải lúc nào người dùng cũng nhớ làm.
Nếu thông tin này mô tả ứng dụng của bạn và nếu một trình chạy dịch vụ có trong cả hai trường hợp, thì bạn nên thử gửi lại các yêu cầu không thành công khi người dùng có kết nối mạng trở lại. BackgroundSync API (API Đồng bộ hoá nền) cung cấp giải pháp cho vấn đề này. Khi phát hiện một yêu cầu mạng không thành công, service worker có thể đăng ký nhận sự kiện sync
khi trình duyệt phát hiện thấy kết nối đã trả về. Sự kiện sync
có thể được phân phối ngay cả khi người dùng đã rời khỏi trang đăng ký sự kiện đó. Điều này giúp sự kiện này hiệu quả hơn so với các phương pháp thử lại yêu cầu không thành công khác.
Workbox tóm tắt API này bằng mô-đun workbox-background-sync
, giúp API BackgroundSync dễ sử dụng hơn với các mô-đun Workbox khác. Ngoài ra, giải pháp này cũng triển khai chiến lược dự phòng cho các trình duyệt chưa hỗ trợ BackgroundSync.
Cách sử dụng cơ bản
BackgroundSyncPlugin
được xuất từ mô-đun workbox-background-sync
. Bạn có thể dùng mô-đun này để xếp các yêu cầu không thành công vào hàng đợi và thử lại khi các sự kiện sync
trong tương lai kích hoạt:
import {BackgroundSyncPlugin} from 'workbox-background-sync';
import {registerRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';
const bgSyncPlugin = new BackgroundSyncPlugin('myQueueName', {
maxRetentionTime: 24 * 60 // Retry for max of 24 Hours (specified in minutes)
});
registerRoute(
/\/api\/.*\/*.json/,
new NetworkOnly({
plugins: [bgSyncPlugin]
}),
// An optional third parameter specifies the request method
'POST'
);
Ở đây, BackgroundSyncPlugin
được áp dụng cho một tuyến khớp với các yêu cầu POST đến một tuyến API truy xuất dữ liệu JSON. Nếu người dùng không có kết nối mạng, thì BackgroundSyncPlugin
sẽ thử yêu cầu lại khi người dùng có kết nối mạng trở lại, nhưng chỉ trong tối đa một ngày.
Cách sử dụng nâng cao
workbox-background-sync
cũng cung cấp một lớp Queue
mà bạn có thể tạo thực thể và thêm các yêu cầu không thành công. Tương tự như với BackgroundSyncPlugin
, các yêu cầu không thành công sẽ được lưu trữ trong IndexedDB và được thử khi trình duyệt cho rằng kết nối đã được khôi phục.
Tạo hàng đợi
Để tạo hàng đợi, hãy tạo thực thể cho đối tượng Queue
bằng một chuỗi đại diện cho tên hàng đợi:
import {Queue} from 'workbox-background-sync';
const queue = new Queue('myQueueName');
Tên hàng đợi được dùng như một phần của tên thẻ được tạo bằng phương thức register()
do SyncManager
chung cung cấp. Đây cũng là tên được dùng cho Object Store (Kho đối tượng) do cơ sở dữ liệu IndexedDB cung cấp.
Đang thêm yêu cầu vào hàng đợi
Sau khi tạo thực thể Queue
, bạn có thể thêm các yêu cầu không thành công vào thực thể đó bằng phương thức pushRequest()
:
import {Queue} from 'workbox-background-sync';
const queue = new Queue('myQueueName');
self.addEventListener('fetch', (event) => {
// Add in your own criteria here to return early if this
// isn't a request that should use background sync.
if (event.request.method !== 'POST') {
return;
}
const bgSyncLogic = async () => {
try {
const response = await fetch(event.request.clone());
return response;
} catch (error) {
await queue.pushRequest({request: event.request});
return error;
}
};
event.respondWith(bgSyncLogic());
});
Sau khi được thêm vào hàng đợi, các yêu cầu sẽ tự động thử lại khi trình chạy dịch vụ nhận được sự kiện sync
vì trình duyệt cho rằng mạng đã hoạt động trở lại. Các trình duyệt không hỗ trợ API BackgroundSync sẽ thử lại yêu cầu mỗi khi trình chạy dịch vụ khởi động. Đây là một cách kém hiệu quả hơn để thử lại một yêu cầu không thành công mà là một loại dự phòng.
Kiểm thử workbox-background-sync
Việc kiểm thử hành vi Đồng bộ hoá dưới nền có thể khá phức tạp, nhưng bạn có thể thực hiện việc này trong Công cụ của Chrome cho nhà phát triển. Phương pháp tốt nhất hiện tại là:
- Tải một trang đăng ký trình chạy dịch vụ của bạn.
- Tắt kết nối mạng của máy tính hoặc tắt máy chủ web của bạn. Không sử dụng nút bật/tắt ngoại tuyến trong Công cụ của Chrome cho nhà phát triển! Hộp đánh dấu ngoại tuyến chỉ ảnh hưởng đến các yêu cầu từ trang, nhưng các yêu cầu của trình chạy dịch vụ sẽ tiếp tục được thực hiện.
- Tạo các yêu cầu mạng cần được đưa vào hàng đợi bằng
workbox-background-sync
. Bạn có thể kiểm tra các yêu cầu đã được đưa vào hàng đợi bằng cách xem trongChrome DevTools > Application > IndexedDB > workbox-background-sync > requests
. - Bây giờ, hãy khôi phục kết nối mạng hoặc bật lại máy chủ web của bạn.
- Buộc tổ chức một sự kiện
sync
sớm bằng cách chuyển đếnChrome DevTools > Application > Service Workers
. Nhập tên thẻ củaworkbox-background-sync:<your queue name>
, trong đó<your queue name>
là tên của hàng đợi mà bạn đã đặt. - Nhấp vào nút "Đồng bộ hoá".
- Bây giờ, bạn sẽ thấy các yêu cầu mạng không thành công trước đó đã được thử lại và xem xét xong. Kết quả là cửa hàng IndexedDB trống vì các yêu cầu đã được phát lại thành công.
Kết luận
Việc sử dụng workbox-background-sync
để thử lại các yêu cầu mạng không thành công có thể là một cách hay để cải thiện trải nghiệm người dùng và độ tin cậy của ứng dụng, chẳng hạn như cho phép người dùng gửi lại các yêu cầu API không thành công để họ không mất dữ liệu muốn gửi đến API của bạn. Dữ liệu này cũng có thể được dùng để bổ sung dữ liệu còn thiếu, chẳng hạn như số liệu phân tích. Trên thực tế, mô-đun workbox-google-analytics
sử dụng workbox-background-sync
nâng cao để thử lại các yêu cầu không thành công nhằm gửi dữ liệu đến Google Analytics.
Bất kể trường hợp sử dụng của bạn là gì, workbox-background-sync
đơn giản hoá loại tác vụ này, cải thiện trải nghiệm của nhà phát triển và cung cấp cho bạn nhiều cơ hội hơn để cải thiện trải nghiệm người dùng và chức năng của ứng dụng web của bạn.