هنگام پاسخ دادن به درخواستها با ورودیهای ذخیرهسازی شده، در عین حال که سریع است، با یک معاوضه همراه است که کاربران ممکن است در نهایت دادههای قدیمی را ببینند.
بسته workbox-broadcast-update
یک راه استاندارد برای اطلاع رسانی به Windows Client از به روز رسانی پاسخ ذخیره شده در حافظه پنهان را ارائه می دهد. این معمولاً همراه با استراتژی StaleWhileRevalidate
استفاده می شود.
هر زمان که مرحله "تأیید مجدد" آن استراتژی پاسخی را از شبکه بازیابی می کند که با آنچه قبلاً در حافظه پنهان شده بود متفاوت است، این ماژول یک پیام (از طریق postMessage()
) به همه سرویس گیرندگان پنجره در محدوده سرویس کارگر فعلی ارسال می کند.
Windows Clients میتواند به بهروزرسانیها گوش دهد و اقدامات لازم را انجام دهد، مانند نمایش خودکار پیامی به کاربر که به او اطلاع میدهد بهروزرسانیها در دسترس هستند.
به روز رسانی چگونه تعیین می شود؟
هدرهای خاصی از اشیای ذخیره شده در حافظه پنهان و جدید Response
با هم مقایسه می شوند و اگر هر یک از هدرها مقادیر متفاوتی داشته باشند، بهروزرسانی در نظر گرفته میشود.
به طور پیش فرض، هدرهای Content-Length
، ETag
و Last-Modified
مقایسه می شوند.
Workbox از مقادیر هدر به جای مقایسه بایت به بایت بدنه های پاسخ استفاده می کند تا کارآمدتر باشد، به ویژه برای پاسخ های بالقوه بزرگ.
با استفاده از Broadcast Update
این کتابخانه در نظر گرفته شده است که همراه با استراتژی ذخیره سازی 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
به عنوان افزونه یک استراتژی خاص همانطور که در بالا نشان داده شده است استفاده می کنند، ممکن است از منطق اساسی در کد سرویس کارگر استفاده شود.
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
از API postMessage()
برای اطلاع رسانی به پنجرهها/برگههای باز هنگام بهروزرسانی پاسخ ذخیره شده در حافظه پنهان استفاده میکند.
به خاطر کارایی، بدنههای پاسخ زیربنایی با هم مقایسه نمیشوند. فقط سرصفحه های پاسخ خاص بررسی می شوند.
خواص
- سازنده
خالی
یک نمونه BroadcastCacheUpdate با یک
channelName
خاص برای پخش پیامها درتابع
constructor
به نظر می رسد:(options?: BroadcastCacheUpdateOptions) => {...}
- گزینه ها
BroadcastCacheUpdateOptions اختیاری است
- برمی گرداند
- notifyIfUpdated
خالی
دو پاسخ را با هم مقایسه می کند و در صورتی که پاسخ ها متفاوت باشد، پیامی (از طریق
postMessage()
) به همه سرویس گیرندگان پنجره ارسال می کند. هیچ یک از پاسخ ها نمی تواند مبهم باشد.پیام ارسال شده دارای قالب زیر است (که در آن
payload
می توان از طریق گزینهgeneratePayload
که نمونه با آن ایجاد می شود سفارشی کرد):{ type: 'CACHE_UPDATED', meta: 'workbox-broadcast-update', payload: { cacheName: 'the-cache-name', updatedURL: 'https://example.com/' } }
تابع
notifyIfUpdated
به نظر می رسد:(options: CacheDidUpdateCallbackParam) => {...}
- گزینه ها
- برمی گرداند
قول<باطل>
پس از ارسال به روز رسانی برطرف می شود.
BroadcastCacheUpdateOptions
خواص
- headersToCheck
رشته[] اختیاری است
- اطلاع رسانی به همه مشتریان
بولی اختیاری
- تولید Payload
باطل اختیاری
تابع
generatePayload
به نظر می رسد:(options: CacheDidUpdateCallbackParam) => {...}
- گزینه ها
- برمی گرداند
رکورد<stringy>
BroadcastUpdatePlugin
این افزونه هر زمان که پاسخ ذخیره شده در حافظه پنهان به روز شود، به طور خودکار پیامی را پخش می کند.
خواص
- سازنده
خالی
یک نمونه
workbox-broadcast-update.BroadcastUpdate
با گزینههای پاس شده بسازید و هر زمان کهcacheDidUpdate
فراخوانی افزونه فراخوانی شد، متدnotifyIfUpdated
آن را فراخوانی میکند.تابع
constructor
به نظر می رسد:(options?: BroadcastCacheUpdateOptions) => {...}
- گزینه ها
BroadcastCacheUpdateOptions اختیاری است
- برمی گرداند
مواد و روش ها
responsesAreSame()
workbox-broadcast-update.responsesAreSame(
firstResponse: Response,
secondResponse: Response,
headersToCheck: string[],
)
با توجه به دو Response's
، چندین مقدار هدر را با هم مقایسه می کند تا ببیند آیا آنها یکسان هستند یا نه.
مولفه های
- اولین پاسخ
واکنش
- پاسخ دوم
واکنش
- headersToCheck
رشته[]
برمی گرداند
بولی