Đang thử lại yêu cầu khi có kết nối mạng trở lại

Khi bạn đưa ra yêu cầu tới máy chủ web, có khả năng không thành công. Đ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 áp 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 các yêu cầu này không thực hiện được khi không có nhân viên dịch vụ, người dùng phải thử lại các yêu cầu này 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 có thể nhớ làm.

Nếu điều này mô tả ứng dụng của bạn—và nếu một trình chạy dịch vụ đang kết hợp—tốt nhất 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 trực tuyến trở lại. BackgroundSync API cung cấp một giải pháp cho vấn đề này. Khi phát hiện thấy một yêu cầu mạng không thành công, một trình chạy dịch vụ 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, giúp sự kiện này hiệu quả hơn các phương thức khác để thử lại các yêu cầu không thành công.

Workbox tóm tắt API này bằng mô-đun workbox-background-sync, giúp API PlatformSync trở nên dễ sử dụng hơn với các mô-đun Workbox khác. Ngoài ra, API này còn 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 và có thể được dùng để xếp hàng các yêu cầu không thành công 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 với 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, BackgroundSyncPlugin sẽ thử lại yêu cầu khi người dùng có kết nối mạng trở lại, nhưng chỉ trong tối đa 1 ngày.

Cảnh báo: Vì BackgroundSyncPlugin liên kết với lệnh gọi lại của trình bổ trợ FetchDidFail, nên các yêu cầu không thực hiện được phải là do lỗi mạng. Bạn sẽ không được thử lại những yêu cầu dẫn đến trạng thái lỗi cấp 400 hoặc 500. Để thử lại các yêu cầu dẫn đến các loại lỗi này, hãy thử thêm trình bổ trợ FetchDidSucceed vào chiến lược của bạn.

Cách sử dụng nâng cao

workbox-background-sync cũng cung cấp một lớp Queue để bạn có thể tạo thực thể và thêm các yêu cầu không thực hiện được. Tương tự như với BackgroundSyncPlugin, các yêu cầu không thực hiện được đượ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 của hàng đợi đó:

import {Queue} from 'workbox-background-sync';

const queue = new Queue('myQueueName');

Tên hàng đợi được dùng trong tên thẻ do phương thức register() cung cấp trong SyncManager chung. Đây cũng là tên được sử dụng cho Object Store do cơ sở dữ liệu IndexedDB cung cấp.

Lưu ý: Mặc dù không nhất thiết phải nắm rõ những thông tin này, nhưng bạn nên biết rằng đó chính là lý do khiến tên hàng đợi phải là tên dành riêng cho nguồn gốc của bạn.

Đ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ực hiện được 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 này 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, nhưng là phương án dự phòng.

Đang kiểm tra workbox-background-sync

Việc kiểm tra hành vi Đồng bộ hoá dưới nền có thể phức tạp nhưng bạn có thể thực hiện trong Công cụ của Chrome cho nhà phát triển. Phương pháp hay nhất hiện tại sẽ như sau:

1. Tải lên một trang đăng ký trình chạy dịch vụ của bạn.
2. 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 chế độ 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 yêu cầu của trình chạy dịch vụ sẽ tiếp tục được chuyển sang.
3. Thực hiện 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 xếp vào hàng đợi bằng cách xem trong Chrome DevTools > Application > IndexedDB > workbox-background-sync > requests.
4. 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.
5. Buộc thực hiện một sự kiện sớm sync bằng cách chuyển đến Chrome DevTools > Application > Service Workers. Nhập tên thẻ workbox-background-sync:<your queue name>, trong đó <your queue name> là tên của hàng đợi bạn đã đặt.
6. Nhấp vào nút "Đồng bộ hoá" nút.
   
7. Bây giờ, bạn sẽ thấy các yêu cầu mạng không thực hiện được trước đó được thử lại và chấp nhận. 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ực hiện được có thể là cách hiệu quả giúp 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ực hiện được để họ không bị 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 thông tin còn thiếu trong dữ liệu của bạn, 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 gửi được dữ liệu đến Google Analytics.

Cho dù bạn sử dụng trong trường hợp nào, workbox-background-sync cũng đơ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à mang đến 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.