Đ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 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à:

  1. Tải 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 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.
  3. 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 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 tổ chức một sự kiện sync sớm bằng cách chuyển đến Chrome DevTools > Application > Service Workers. Nhập tên thẻ của workbox-background-sync:<your queue name>, trong đó <your queue name> là tên của hàng đợi mà bạn đã đặt.
  6. Nhấp vào nút "Đồng bộ hoá".
    Ảnh chụp màn hình về tiện ích đồng bộ hoá nền trong bảng điều khiển ứng dụng của Công cụ cho nhà phát triển của Chrome. Sự kiện đồng bộ hoá được chỉ định cho hàng đợi &quot;myQueueName&quot; cho mô-đun &quot;workbox-background-sync&quot;.
  7. 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.