workbox-broadcast-update

เมื่อตอบกลับคำขอด้วยรายการที่แคชไว้ ขณะเดียวกันก็ทำได้อย่างรวดเร็ว มาพร้อมกับตัวเลือกที่อาจทำให้ผู้ใช้พบกับข้อมูลที่ไม่อัปเดต

แพ็กเกจ workbox-broadcast-update เป็นวิธีมาตรฐานในการแจ้งเตือน ไคลเอ็นต์หน้าต่าง ว่ามีการอัปเดตการตอบกลับที่แคชไว้แล้ว โดยทั่วไปจะใช้ควบคู่กับ กลยุทธ์ StaleWhileRevalidate

เมื่อใดก็ตามที่ "ตรวจสอบความถูกต้องอีกครั้ง" ของกลยุทธ์ดังกล่าวจะเรียกการตอบสนองจาก เครือข่ายที่แตกต่างจากแคชก่อนหน้านี้ โมดูลนี้จะส่ง ข้อความ (ผ่าน postMessage()) ไปยังไคลเอ็นต์ Window ทั้งหมดภายในขอบเขตของ Service Worker ปัจจุบัน

โปรแกรมรับส่งอีเมลของ Windows สามารถรับการอัปเดตและดำเนินการตามความเหมาะสม เช่น แสดงข้อความให้ผู้ใช้ทราบโดยอัตโนมัติว่ามีการอัปเดต

ระบบพิจารณาการอัปเดตอย่างไร

ส่วนหัวบางรายการที่แคชและใหม่ Response จะเปรียบเทียบออบเจ็กต์ไหม และหากส่วนหัวมีค่าต่างกัน ถือว่าเป็นการอัปเดต

โดยค่าเริ่มต้น ระบบจะเปรียบเทียบส่วนหัว Content-Length, ETag และ Last-Modified

Workbox ใช้ค่าส่วนหัวแทนการเปรียบเทียบไบต์ต่อไบต์ของเนื้อหาคำตอบเพื่อให้มีประสิทธิภาพมากขึ้น โดยเฉพาะสำหรับคำตอบที่มีขนาดใหญ่

การใช้การอัปเดตแบบประกาศ

ไลบรารีนี้มีไว้เพื่อใช้ร่วมกับStaleWhileRevalidate กลยุทธ์การแคช เนื่องจากกลยุทธ์ดังกล่าวเกี่ยวข้องกับการแสดงผลคำตอบที่แคชไว้ทันที แต่ก็มีกลไกในการอัปเดตแคชแบบไม่พร้อมกันด้วย

หากต้องการออกอากาศข้อมูลอัปเดต คุณเพียงแค่ต้องเพิ่ม broadcastUpdate.BroadcastUpdatePlugin ลงในตัวเลือกกลยุทธ์

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

ในเว็บแอป คุณสามารถฟังเหตุการณ์เหล่านี้ได้ก่อนที่จะมีการเรียกเหตุการณ์ DOMContentLoaded ให้แสดง ดังนี้

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();
  }
});

รูปแบบข้อความ

เมื่อเรียกใช้โปรแกรมรับฟังเหตุการณ์ message ในเว็บแอป พร็อพเพอร์ตี้ event.data จะมีรูปแบบดังนี้

{
  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/'
  }
}

ปรับแต่งส่วนหัวที่จะตรวจสอบ

คุณปรับแต่งส่วนหัวที่จะตรวจสอบได้โดยการตั้งค่าพร็อพเพอร์ตี้ 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'],
      }),
    ],
  })
);

การใช้งานขั้นสูง

แม้ว่านักพัฒนาแอปส่วนใหญ่จะใช้ workbox-broadcast-update เป็นปลั๊กอินของกลยุทธ์หนึ่งๆ ตามที่แสดงด้านบน แต่คุณก็ใช้ตรรกะพื้นฐานในโค้ด Service Worker ได้

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,
);

ประเภท

BroadcastCacheUpdate

ใช้ postMessage() API เพื่อแจ้งหน้าต่าง/แท็บที่เปิดอยู่เมื่อมีการแคช อัปเดตการตอบกลับแล้ว

ระบบจะไม่เปรียบเทียบเนื้อหาคำตอบที่เกี่ยวข้องเพื่อประสิทธิภาพที่ดียิ่งขึ้น และจะตรวจสอบเฉพาะส่วนหัวการตอบกลับที่เฉพาะเจาะจงเท่านั้น

พร็อพเพอร์ตี้

  • เครื่องมือสร้าง

    เป็นโมฆะ

    สร้างอินสแตนซ์ BroadcastCacheUpdate ด้วย channelName ที่เฉพาะเจาะจงเพื่อส่งข้อความ

    ฟังก์ชัน constructor มีลักษณะดังนี้ 

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

  • notifyIfUpdated

    เป็นโมฆะ

    เปรียบเทียบคำตอบ 2 รายการ และส่งข้อความ (ผ่าน postMessage()) ไปยังไคลเอ็นต์หน้าต่างทั้งหมดหาก คำตอบแตกต่างกัน คำตอบทั้ง 2 รายการต้องไม่โปร่งใส

    ข้อความที่โพสต์จะมีรูปแบบต่อไปนี้ (โดยที่ payload สามารถ ปรับแต่งผ่านตัวเลือก generatePayload ที่สร้างอินสแตนซ์ขึ้น กับ):

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

    ฟังก์ชัน notifyIfUpdated มีลักษณะดังนี้ 

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

    • returns

      คำมั่นสัญญา<โมฆะ>

      แก้ไขได้เมื่อส่งการอัปเดตแล้ว

BroadcastCacheUpdateOptions

พร็อพเพอร์ตี้

  • headersToCheck

    string[] ไม่บังคับ

  • notifyAllClients

    บูลีน ไม่บังคับ

  • generatePayload

    void ไม่บังคับ

    ฟังก์ชัน generatePayload มีรูปแบบดังนี้ 

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

    • returns

      Record<stringany>

BroadcastUpdatePlugin

ปลั๊กอินนี้จะกระจายข้อความโดยอัตโนมัติทุกครั้งที่มีการอัปเดตคำตอบที่แคชไว้

พร็อพเพอร์ตี้

  • เครื่องมือสร้าง

    โมฆะ

    สร้างอินสแตนซ์ workbox-broadcast-update.BroadcastUpdate ด้วย ตัวเลือกที่ส่งผ่านและเรียกเมธอด notifyIfUpdated เมื่อใดก็ตามที่ มีการเรียกใช้ Callback cacheDidUpdate ของปลั๊กอิน

    ฟังก์ชัน constructor มีรูปแบบดังนี้ 

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

เมธอด

responsesAreSame()

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

เมื่อมี Response's 2 รายการ ให้เปรียบเทียบค่าส่วนหัวหลายๆ ค่าเพื่อดูว่าตรงกับค่าเหล่านั้นหรือไม่ เดียวกันหรือไม่

พารามิเตอร์

  • firstResponse

    คำตอบ

  • secondResponse

    คำตอบ

  • headersToCheck

    string[]

การคืนสินค้า

  • บูลีน