เมื่อตอบกลับคำขอด้วยรายการที่แคชไว้ ขณะเดียวกันก็ทำได้อย่างรวดเร็ว มาพร้อมกับตัวเลือกที่อาจทำให้ผู้ใช้พบกับข้อมูลที่ไม่อัปเดต
แพ็กเกจ 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) => {...}
-
ตัวเลือก
BroadcastCacheUpdateOptions ไม่บังคับ
-
returns
-
-
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
เมื่อใดก็ตามที่ มีการเรียกใช้ CallbackcacheDidUpdate
ของปลั๊กอินฟังก์ชัน
constructor
มีรูปแบบดังนี้(options?: BroadcastCacheUpdateOptions) => {...}
-
ตัวเลือก
BroadcastCacheUpdateOptions optional
-
returns
-
เมธอด
responsesAreSame()
workbox-broadcast-update.responsesAreSame(
firstResponse: Response,
secondResponse: Response,
headersToCheck: string[],
)
เมื่อมี Response's
2 รายการ ให้เปรียบเทียบค่าส่วนหัวหลายๆ ค่าเพื่อดูว่าตรงกับค่าเหล่านั้นหรือไม่
เดียวกันหรือไม่
พารามิเตอร์
-
firstResponse
คำตอบ
-
secondResponse
คำตอบ
-
headersToCheck
string[]
การคืนสินค้า
-
บูลีน