我的服务人员对错误、意外(承诺)或异常感到困扰。我的软件运行得很好,并在移动设备上提示安装PWA,但它会出现此错误。我的url是Milyin. 此错误需要2-3次访问才能开始出现在控制台日志中。
仅3次访问就导致它产生了260多个错误。我无法调试它。我假设这是因为软件已经消耗了我设备中的所有存储空间。因为如果使用F5重新加载页面,它会显示错误,但使用CTRL+SHIFT+R刷新不会出错。
//This is the service worker with the Advanced caching
const CACHE = "Milyin";
const precacheFiles = [
\'/\',
\'/wp-content/themes/hestia/assets/js/parallax.min.js?ver=1.0.2\',
\'https://fonts.googleapis.com/css?family=Poppins%3A300%2C400%2C500%2C700\'
];
// TODO: replace the following with the correct offline fallback page i.e.: const offlineFallbackPage = "/";
const offlineFallbackPage = \'/\';
const networkFirstPaths = [
/* Add an array of regex of paths that should go network first */
// Example: /\\/api\\/.*/
];
const avoidCachingPaths = [
\'/wp-content/plugins/ultimate-member/\',
\'/wp-admin/\',
\'/chat/\'
];
function pathComparer(requestUrl, pathRegEx) {
return requestUrl.match(new RegExp(pathRegEx));
}
function comparePaths(requestUrl, pathsArray) {
if (requestUrl) {
for (let index = 0; index < pathsArray.length; index++) {
const pathRegEx = pathsArray[index];
if (pathComparer(requestUrl, pathRegEx)) {
return true;
}
}
}
return false;
}
self.addEventListener("install", function (event) {
console.log("[PWA Builder] Install Event processing");
console.log("[PWA Builder] Skip waiting on install");
self.skipWaiting();
event.waitUntil(
caches.open(CACHE).then(function (cache) {
console.log("[PWA Builder] Caching pages during install");
return cache.addAll(precacheFiles).then(function () {
if (offlineFallbackPage === "offline.html") {
return cache.add(new Response("TODO: Update the value of the offlineFallbackPage constant in the serviceworker."));
}
return cache.add(offlineFallbackPage);
});
})
);
});
// Allow sw to control of current page
self.addEventListener("activate", function (event) {
console.log("[PWA Builder] Claiming clients for current page");
event.waitUntil(self.clients.claim());
});
// If any fetch fails, it will look for the request in the cache and serve it from there first
self.addEventListener("fetch", function (event) {
if (event.request.method !== "GET") return;
if (comparePaths(event.request.url, networkFirstPaths)) {
networkFirstFetch(event);
} else {
cacheFirstFetch(event);
}
});
function cacheFirstFetch(event) {
event.respondWith(
fromCache(event.request).then(
function (response) {
// The response was found in the cache so we responde with it and update the entry
// This is where we call the server to get the newest version of the
// file to use the next time we show view
event.waitUntil(
fetch(event.request).then(function (response) {
return updateCache(event.request, response);
})
);
return response;
},
function () {
// The response was not found in the cache so we look for it on the server
return fetch(event.request)
.then(function (response) {
// If request was success, add or update it in the cache
event.waitUntil(updateCache(event.request, response.clone()));
return response;
})
.catch(function (error) {
// The following validates that the request was for a navigation to a new document
if (event.request.destination !== "document" || event.request.mode !== "navigate") {
return;
}
console.log("[PWA Builder] Network request failed and no cache." + error);
// Use the precached offline page as fallback
return caches.open(CACHE).then(function (cache) {
cache.match(offlineFallbackPage);
});
});
}
)
);
}
function networkFirstFetch(event) {
event.respondWith(
fetch(event.request)
.then(function (response) {
// If request was success, add or update it in the cache
event.waitUntil(updateCache(event.request, response.clone()));
return response;
})
.catch(function (error) {
console.log("[PWA Builder] Network request Failed. Serving content from cache: " + error);
return fromCache(event.request);
})
);
}
function fromCache(request) {
// Check to see if you have it in the cache
// Return response
// If not in the cache, then return error page
return caches.open(CACHE).then(function (cache) {
return cache.match(request).then(function (matching) {
if (!matching || matching.status === 404) {
return Promise.reject("no-match");
}
return matching;
});
});
}
function updateCache(request, response) {
if (!comparePaths(request.url, avoidCachingPaths)) {
return caches.open(CACHE).then(function (cache) {
return cache.put(request, response);
});
}
return Promise.resolve();
}
addEventListener(\'fetch\', event => {
event.respondWith(async function() {
// Respond from the cache if we can
const cachedResponse = await caches.match(event.request);
if (cachedResponse) return cachedResponse;
// Else, use the preloaded response, if it\'s there
const response = await event.preloadResponse;
if (response) return response;
// Else try the network.
return fetch(event.request);
}());
});
通过内联JS注册服务工作者
<script type="text/javascript">
if (\'serviceWorker\' in navigator) {
navigator.serviceWorker.register(\'/SW.js\')
.then(function(registration) {
registration.addEventListener(\'updatefound\', function() {
// If updatefound is fired, it means that there\'s
// a new service worker being installed.
var installingWorker = registration.installing;
console.log(\'A new service worker is being installed:\',
installingWorker);
// You can listen for changes to the installing service worker\'s
// state via installingWorker.onstatechange
});
})
.catch(function(error) {
console.log(\'Service worker registration failed:\', error);
});
} else {
console.log(\'Service workers are not supported.\');
}
</script>
你肯定会在我的网站页面上看到重复访问的错误。虽然您的里程数取决于浏览器允许的存储空间。