Я использую Workbox 3.2.0, и вот фрагмент кода: Вот сводка кода:
для всех вызовов XHR, которые мы используем по сети Только
для всехCDN запрашивает, что мы используем cacheFirst
для всех остальных запросов, которые мы используем Stale WHile Revalidate.
То, что мы наблюдаем, время загрузки страницы в нашем приложении сильно зависит от машины.На машинах с хорошими характеристиками это быстро, а на некоторых других, не очень новых машинах, это довольно медленно.Кто-нибудь может сказать мне, почему это происходит?В нашем приложении мы используем x-ms-webview и пограничный браузер, а сервисный работник устанавливается на страницу внутри веб-представления
const workboxCdnUrl = "https://storage.googleapis.com/workbox-cdn/releases/3.2.0/workbox-sw.js";
const cacheName = "sp-cache-v1";
const expirationTimeInSeconds = 60 * 60 * 24;
const CDN_HOST_ENDS_WITH = '.akamaihd.net';
var importWorkbox = (cdnUrl) => {
importScripts(cdnUrl);
}
importWorkbox(workboxCdnUrl);
const url = new URL(location.href);
const debug = url.searchParams.has('debug');
const isSharePointDesktop = url.searchParams.has('SharePointDesktop');
if (debug) {
workbox.setConfig({
debug: true
});
workbox.core.setLogLevel(workbox.core.LOG_LEVELS.debug);
}
async function deleteIndexedDBDatabase(key) {
return new Promise((resolve, reject) => {
const request = indexedDB.deleteDatabase(key);
request.onerror = reject;
request.onsuccess = resolve;
});
}
const expirationPlugin = new workbox.expiration.Plugin({
maxAgeSeconds: expirationTimeInSeconds * 30
})
self.addEventListener("activate", function(event) {
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cacheName) {
deleteIndexedDBDatabase(cacheName).then(function() {
return caches.delete(cacheName);
})
})
);
})
);
});
const removeRequestHeadersPlugin = {
cacheDidUpdate: async ({
cacheName,
request
}) => {
caches.open(cacheName).then(function(cache) {
cache.match(request).then(function(response) {
cache.put(request.url, response);
})
});
}
};
function handleXhrRequests()
{
const matchCb = ({url, event}) => {
if(event.type === 'xhr')
{
return true;
}
return false;
};
workbox.routing.registerRoute(
matchCb,
workbox.strategies.networkOnly()
);
}
function handleCDNRequests()
{
workbox.routing.registerRoute(
new RegExp("(.*)akamaihd.net(.*)"),
workbox.strategies.cacheFirst({
cacheName: cacheName,
plugins: [
expirationPlugin,
new workbox.cacheableResponse.Plugin({
statuses: [0,200]
}),
removeRequestHeadersPlugin
]
})
);
}
function handleRequestEvent()
{
workbox.routing.registerRoute(
new RegExp(".*"),
workbox.strategies.staleWhileRevalidate({
cacheName: cacheName,
plugins: [
expirationPlugin,
removeRequestHeadersPlugin
]
})
);
}
handleXhrRequests();
handleCDNRequests();
handleRequestEvent();