đồng bộ hoá nền hộp công việc

Khi bạn gửi dữ liệu đến một máy chủ web, đôi khi yêu cầu sẽ không thành công. Nó có thể là do người dùng đã mất kết nối hoặc máy chủ không hoạt động; Trong cả hai trường hợp, bạn thường muốn thử gửi các yêu cầu sau.

BackgroundSync API mới là một giải pháp lý tưởng cho vấn đề này. Khi một trình chạy dịch vụ phát hiện thấy một yêu cầu mạng không thành công, nó có thể đăng ký để nhận sự kiện sync, sẽ được phân phối khi trình duyệt cho rằng kết nối đã được trả lại. Xin lưu ý rằng sự kiện đồng bộ hoá có thể được gửi ngay cả khi người dùng đã rời khỏi , giúp phương pháp này hiệu quả hơn nhiều so với phương pháp truyền thống là thử lại các yêu cầu không thành công.

Tính năng Đồng bộ hoá nền Workbox được thiết kế để giúp người dùng dễ dàng sử dụng API PlatformSync và tích hợp cách sử dụng API này với các mô-đun Workbox khác. Nó đồng thời triển khai chiến lược dự phòng cho các trình duyệt chưa triển khai Đồng bộ hoá trong nền.

Các trình duyệt hỗ trợ API BackgroundSync sẽ tự động phát lại không thành công thay mặt bạn tại khoảng thời gian do trình duyệt quản lý, có thể sử dụng thuật toán thời gian đợi luỹ thừa giữa các lần phát lại. Trong các trình duyệt không hỗ trợ sẵn API BackgroundSync, tính năng Đồng bộ hoá nền Workbox sẽ tự động thử phát lại bất cứ khi nào trình chạy dịch vụ của bạn khởi động.

Cách sử dụng cơ bản

Cách dễ nhất để sử dụng tính năng Đồng bộ hoá trong nền là dùng Plugin tự động xếp các yêu cầu không thành công vào hàng đợi và thử lại khi sync trong tương lai kích hoạt các sự kiện.

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],
  }),
  'POST'
);

BackgroundSyncPlugin móc vào Lệnh gọi lại trình bổ trợ fetchDidFail và fetchDidFail chỉ được gọi nếu có một ngoại lệ được gửi, rất có thể là do do lỗi mạng. Điều này có nghĩa là yêu cầu sẽ không được thử lại nếu có đã nhận được phản hồi Trạng thái lỗi 4xx hoặc 5xx. Nếu bạn muốn thử lại tất cả các yêu cầu dẫn đến kết quả như trạng thái 5xx, bạn có thể làm như vậy bằng cách thêm một trình bổ trợ fetchDidSucceed cho chiến lược của mình:

const statusPlugin = {
  fetchDidSucceed: ({response}) => {
    if (response.status >= 500) {
      // Throwing anything here will trigger fetchDidFail.
      throw new Error('Server error.');
    }
    // If it's not 5xx, use the response as-is.
    return response;
  },
};

// Add statusPlugin to the plugins array in your strategy.

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

Tính năng Đồng bộ hoá nền Workbox cũng cung cấp 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. Hệ thống sẽ lưu trữ các yêu cầu không thực hiện được trong IndexedDB và được thử lại khi trình duyệt cho rằng kết nối đã được khôi phục (ví dụ: khi nhận được sự kiện đồng bộ hoá).

Tạo hàng đợi

Để tạo Hàng đợi đồng bộ hoá trong nền Hộp công việc, bạn cần tạo hàng đợi này bằng tên hàng đợi (phải là tên duy nhất cho origin):

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

const queue = new Queue('myQueueName');

Tên hàng đợi được sử dụng như một phần của tên thẻ để nhận Tập register() do các nhà xuất bản SyncManager. Bây giờ cũng được dùng làm thuộc tính Tên Lưu trữ đối tượng cho cơ sở dữ liệu IndexedDB.

Thêm một yêu cầu vào Hàng đợi

Sau khi tạo phiên bản Hàng đợi, bạn có thể thêm các yêu cầu không thực hiện được vào đó. Bạn không thêm được yêu cầu không thành công bằng cách gọi phương thức .pushRequest(). Ví dụ: đoạn mã sau đây nắm bắt mọi yêu cầu không thành công và thêm chúng vào hàng đợi:

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, yêu cầu sẽ được tự động thử lại khi Service worker nhận sự kiện sync (xảy ra khi trình duyệt cho rằng kết nối đã được khôi phục). Trình duyệt không hỗ trợ thẻ PlatformSync API sẽ thử lại hàng đợi mỗi khi trình chạy dịch vụ được đã khởi động. Điều này yêu cầu trang kiểm soát trình chạy dịch vụ phải nên hoạt động thử nghiệm sẽ không hiệu quả bằng.

Kiểm thử tính năng đồng bộ hoá dưới nền hộp làm việc

Tiếc là việc thử nghiệm ứng dụng BackgroundSync có phần không trực quan và khó khăn vì một số lý do.

Cách tốt nhất để kiểm thử kết quả triển khai là thực hiện những việc sau:

1. Tải một trang lên và đăng ký trình chạy dịch vụ của bạn.
2. Tắt mạng máy tính hoặc tắt máy chủ web của bạn.
   • KHÔNG SỬ DỤNG NGOẠI TUYẾN CHROME DEVTOOLS NGOẠI TUYẾN. Hộp đánh dấu ngoại tuyến trong Công cụ cho nhà phát triển chỉ ảnh hưởng đến các yêu cầu từ trang. Yêu cầu của Trình chạy dịch vụ sẽ tiếp tục được lưu trữ.
3. Thực hiện các yêu cầu mạng cần được đưa vào hàng đợi bằng tính năng Đồng bộ hoá nền hộp làm việc.
   • Bạn có thể kiểm tra để biết các yêu cầu đã được đưa vào hàng đợi hay chưa bằng cách xem trong Chrome DevTools > Application > IndexedDB > workbox-background-sync > requests
4. Bây giờ, hãy bật mạng hoặc 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ẻ của workbox-background-sync:<your queue name>, trong đó <your queue name> phải là tên của hàng đợi bạn đặt, sau đó nhấp vào nút 'Đồng bộ hoá' .

   

6. Bạn sẽ thấy các yêu cầu kết nối mạng được thực hiện đối với các yêu cầu không thành công và dữ liệu IndexedDB hiện đang trống vì các yêu cầu đã được đã phát lại thành công.