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 đã lưu vào bộ nhớ đệm, mặc dù nhanh chóng nhưng phương thức này cũng có một điểm đánh đổi là người dùng có thể thấy dữ liệu cũ.

Gói workbox-broadcast-update cung cấp cách thức tiêu chuẩn để thông báo Ứng dụng cửa sổ rằng một phản hồi được lưu vào bộ nhớ đệm đã được cập nhật. Định dạng này thường được sử dụng nhất cùng với chiến lược StaleWhileRevalidate.

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

Ứng dụng Window có thể nghe 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 để họ biết rằng có bản cập nhật.

Cách xác định nội dung cập nhật

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

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

Workbox sử dụng các giá trị tiêu đề thay vì so sánh từng byte của nội dung phản hồi để hiệu quả 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 phải có khả năng đọc các giá trị tiêu đề, câu trả lời không rõ ràng, 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 tính năng Cập nhật tính năng phát sóng

Thư viện này được thiết kế để sử dụng cùng với StaleWhileRevalidate chiến lược lưu vào bộ nhớ đệm, vì chiến lược đó liên quan đến việc trả lại ngay lập tức, mà còn cung cấp cơ chế cập nhật lưu vào bộ nhớ đệm không đồng bộ.

Lưu ý: Bạn không thể dùng BroadcastUpdatePlugin để truyền thông tin về nội dung cập nhật của workbox-precaching. BroadcastUpdatePlugin phát hiện khi 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 trong bộ nhớ đệm có các URL tương ứng với nội dung một cách riêng biệt 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 DOMContentLoaded sự kiện 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 ý:Hãy nhớ thêm trình nghe sự kiện message trước sự kiện DOMContentLoaded, vì trình duyệt sẽ đưa các thông báo vào hàng đợi nhận được trong quá trình tải trang (trước khi mã JavaScript có cơ hội chạy) cho đến (nhưng không phải sau) sự kiện DOMContentLoaded.

Định dạng thông báo

Khi một trình nghe sự kiện message được gọi trong ứng dụng web của bạn, Thuộc tính event.data sẽ có định dạng như 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 thủ thao tác chuẩn của thông báo định dạng, mặc dù định dạng đó không gắn liền với khung thông lượng (Flux) theo bất kỳ cách nào.

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

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

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, có thể sử dụng logic 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 phản hồi đã lưu vào bộ nhớ đệm được cập nhật.

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

Thuộc tính

• hàm khởi tạo

  void

  Tạo một thực thể BroadcastCacheUpdate bằng một channelName cụ thể để truyền tin trên

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

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

  • tùy chọn

    BroadcastCacheUpdateOptions optional

  • returns

    BroadcastCacheUpdate

• notifyIfUpdated

  void

  So sánh hai Phản hồi và gửi thông báo (qua postMessage()) đến tất cả các ứng dụng cửa sổ nếu các câu trả lời khác nhau. Không có Phản hồi nào được không rõ ràng.

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

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

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

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

  • tùy chọn

    CacheDidUpdateCallbackParam

  • returns

    Promise<void>

    Giải quyết sau khi gửi bản 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

  void không bắt buộc

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

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

  • tùy chọn

    CacheDidUpdateCallbackParam

  • returns

    Record<stringany>

BroadcastUpdatePlugin

Trình bổ trợ này sẽ tự động truyền thông báo bất cứ khi nào một phản hồi được 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 bằng các tuỳ chọn đã truyền và gọi phương thức notifyIfUpdated bất cứ khi nào phương thức lệnh gọi lại cacheDidUpdate của trình bổ trợ được gọi ra.

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

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

  • tùy chọn

    BroadcastCacheUpdateOptions không bắt buộc

  • returns

    BroadcastUpdatePlugin

Phương thức

responsesAreSame()

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

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

Thông số

• firstResponse

  Phản hồi

• secondResponse

  Phản hồi

• headersToCheck

  string[]

Giá trị trả về

• boolean