hộp công việc-broadcast-update

Khi phản hồi các yêu cầu bằng các mục nhập đã lưu vào bộ nhớ đệm, mặc dù tốc độ nhanh nhưng nó đi kèm với sự đánh đổi là người dùng có thể gặp phải dữ liệu lỗi thời.

Gói workbox-broadcast-update cung cấp cách thức tiêu chuẩn để thông báo cho Window Client về việc một phản hồi được lưu vào bộ nhớ đệm đã được cập nhật. Chiến lược này thường được dùng nhất cùng với chiến lược StaleWhileRevalidate.

Bất cứ khi nào bước "xác thực lại" của chiến lược đó truy xuất phản hồi từ mạng khác với phản hồi đã được lưu vào bộ nhớ đệm trước đó, mô-đun này sẽ gửi một thông báo (thông qua postMessage()) đến tất cả Ứng dụng cửa sổ trong phạm vi của trình chạy dịch vụ hiện tại.

Ứng dụng cửa sổ có thể theo dõi thông tin cập nhật và thực hiện hành động thích hợp, chẳng hạn như tự động hiển thị thông báo cho người dùng để cho họ biết rằng đã có bản cập nhật.

Các bản cập nhật được xác định như thế nào?

So sánh một số tiêu đề nhất định của đối tượng Response đã lưu vào bộ nhớ đệm và đối tượng mới, nếu bất kỳ tiêu đề nào có giá trị khác nhau, thì đó được coi là một bản cập nhật.

Theo mặc định, các tiêu đề Content-Length, ETag và Last-Modified sẽ được so sánh.

Workbox sử dụng các giá trị tiêu đề thay vì so sánh các nội dung phản hồi theo từng byte để đạt hiệu quả cao hơn, đặc biệt là đối với các phản hồi có thể lớn

Cảnh báo: Vì Workbox cần có khả năng đọc các giá trị tiêu đề, nên các phản hồi mờ (có tiêu đề không truy cập được) sẽ không bao giờ kích hoạt thông báo cập nhật.

Sử dụng bản cập nhật truyền phát

Bạn có thể dùng thư viện này cùng với chiến lược lưu vào bộ nhớ đệm StaleWhileRevalidate, vì chiến lược đó liên quan đến việc trả về ngay một phản hồi lưu vào bộ nhớ đệm, đồng thời cung cấp cơ chế cập nhật bộ nhớ đệm một cách không đồng bộ.

Lưu ý: Bạn không thể dùng BroadcastUpdatePlugin để truyền phát thông tin về nội dung cập nhật của workbox-precaching. BroadcastUpdatePlugin phát hiện thời điểm một URL đã lưu vào bộ nhớ đệm trước đó đã bị ghi đè bằng nội dung mới. workbox-precaching tạo các mục nhập trong bộ nhớ đệm bằng các URL tương ứng riêng với nội dung, nên sẽ không bao giờ ghi đè các mục nhập hiện có trong bộ nhớ đệm.

Để truyền tin cập nhật, bạn chỉ cần thêm broadcastUpdate.BroadcastUpdatePlugin vào các tuỳ chọn chiến lược.

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {BroadcastUpdatePlugin} from 'workbox-broadcast-update';

registerRoute(
  ({url}) => url.pathname.startsWith('/api/'),
  new StaleWhileRevalidate({
    plugins: [new BroadcastUpdatePlugin()],
  })
);

Trong ứng dụng web, trước khi sự kiện DOMContentLoaded kích hoạt, bạn có thể theo dõi các sự kiện sau như sau:

navigator.serviceWorker.addEventListener('message', async event => {
  // Optional: ensure the message came from workbox-broadcast-update
  if (event.data.meta === 'workbox-broadcast-update') {
    const {cacheName, updatedURL} = event.data.payload;

    // Do something with cacheName and updatedURL.
    // For example, get the cached content and update
    // the content on the page.
    const cache = await caches.open(cacheName);
    const updatedResponse = await cache.match(updatedURL);
    const updatedText = await updatedResponse.text();
  }
});

Lưu ý: Nhớ thêm trình nghe sự kiện message trước sự kiện DOMContentLoaded, vì trình duyệt sẽ đưa thông báo vào hàng đợi sớm khi tải trang (trước khi mã JavaScript của bạn có cơ hội chạy) cho đến (nhưng không phải sau) sự kiện DOMContentLoaded.

Định dạng thư

Khi trình nghe sự kiện message được gọi trong ứng dụng web, thuộc tính event.data sẽ có định dạng sau:

{
  type: 'CACHE_UPDATED',
  meta: 'workbox-broadcast-update',
  // The two payload values vary depending on the actual update:
  payload: {
    cacheName: 'the-cache-name',
    updatedURL: 'https://example.com/'
  }
}

Lưu ý: Định dạng thông báo này tuân theo định dạng thao tác chuẩn Flux, mặc dù không liên kết theo bất kỳ cách nào với khung Flux.

Tuỳ chỉnh tiêu đề để kiểm tra

Bạn có thể tuỳ chỉnh tiêu đề để kiểm tra bằng cách đặt thuộc tính headersToCheck.

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {BroadcastUpdatePlugin} from 'workbox-broadcast-update';

registerRoute(
  ({url}) => url.pathname.startsWith('/api/'),
  new StaleWhileRevalidate({
    plugins: [
      new BroadcastUpdatePlugin({
        headersToCheck: ['X-My-Custom-Header'],
      }),
    ],
  })
);

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

Mặc dù hầu hết các nhà phát triển sẽ sử dụng workbox-broadcast-update làm trình bổ trợ của một chiến lược cụ thể như trình bày ở trên, nhưng bạn vẫn có thể sử dụng logic cơ bản trong mã trình chạy dịch vụ.

import {BroadcastCacheUpdate} from 'workbox-broadcast-update';

const broadcastUpdate = new BroadcastCacheUpdate({
  headersToCheck: ['X-My-Custom-Header'],
});

const cacheName = 'api-cache';
const request = new Request('https://example.com/api');

const cache = await caches.open(cacheName);
const oldResponse = await cache.match(request);
const newResponse = await fetch(request);

broadcastUpdate.notifyIfUpdated({
  cacheName,
  oldResponse,
  newResponse,
  request,
);

Loại

BroadcastCacheUpdate

Sử dụng API postMessage() để thông báo cho mọi cửa sổ/thẻ đang mở khi một phản hồi lưu vào bộ nhớ đệm đã được cập nhật.

Để tăng tính hiệu quả, các nội dung phản hồi cơ bản sẽ không được so sánh; mà chỉ kiểm tra các tiêu đề phản hồi cụ thể.

Thuộc tính

• hàm khởi tạo

  void

  Tạo một thực thể BroadcastCacheUpdate với một channelName cụ thể để truyền thông báo trên đó

  Hàm constructor sẽ có dạng như sau:

  (options?: BroadcastCacheUpdateOptions) => {...}

  • tùy chọn

    BroadcastCacheUpdateOptions không bắt buộc

  • giá trị trả về

    BroadcastCacheUpdate

• notifyIfUpdated

  void

  So sánh 2 Phản hồi và gửi một thông báo (thông qua postMessage()) đến tất cả các ứng dụng cửa sổ nếu phản hồi đó khác nhau. Cả hai Phản hồi đều không thể không rõ ràng.

  Thông báo được đăng có định dạng sau (trong đó payload có thể được tuỳ chỉnh thông qua tuỳ chọn generatePayload mà thực thể được tạo cùng):

  {
    type: 'CACHE_UPDATED',
    meta: 'workbox-broadcast-update',
    payload: {
      cacheName: 'the-cache-name',
      updatedURL: 'https://example.com/'
    }
  }
  

  Hàm notifyIfUpdated sẽ có dạng như sau:

  (options: CacheDidUpdateCallbackParam) => {...}

  • tùy chọn

    CacheDidUpdateCallbackParam

  • giá trị trả về

    Promise<void>

    Giải quyết sau khi gửi thông tin cập nhật.

BroadcastCacheUpdateOptions

Thuộc tính

• headersToCheck

  string[] không bắt buộc

• notifyAllClients

  boolean không bắt buộc

• generatePayload

  khoảng trống không bắt buộc

  Hàm generatePayload sẽ có dạng như sau:

  (options: CacheDidUpdateCallbackParam) => {...}

  • tùy chọn

    CacheDidUpdateCallbackParam

  • giá trị trả về

    Ghi lại<stringany>

BroadcastUpdatePlugin

Trình bổ trợ này sẽ tự động phát đi thông báo mỗi khi một phản hồi đã lưu vào bộ nhớ đệm được cập nhật.

Thuộc tính

• hàm khởi tạo

  void

  Tạo một thực thể workbox-broadcast-update.BroadcastUpdate với các tuỳ chọn đã truyền và gọi phương thức notifyIfUpdated bất cứ khi nào lệnh gọi lại cacheDidUpdate của trình bổ trợ được kích hoạt.

  Hàm constructor sẽ có dạng như sau:

  (options?: BroadcastCacheUpdateOptions) => {...}

  • tùy chọn

    BroadcastCacheUpdateOptions không bắt buộc

  • giá trị trả về

    BroadcastUpdatePlugin

Phương thức

responsesAreSame()

workbox-broadcast-update.responsesAreSame(
  firstResponse: Response,
  secondResponse: Response,
  headersToCheck: string[],
)

Với 2 Response's, hãy so sánh một số giá trị tiêu đề để xem các giá trị đó có giống nhau hay không.

Tham số

• firstResponse

  Phản hồi

• secondResponse

  Phản hồi

• headersToCheck

  chuỗi[]

Giá trị trả về

• boolean