gpt4 book ai didi

javascript - 使用 Microsoft 的 pwa-builder : Uncaught (in promise) TypeError: Request failed

转载 作者:行者123 更新时间:2023-12-02 23:22:31 25 4
gpt4 key购买 nike

我想使用 Service Worker 来缓存文件并通过提供离线页面来改善用户体验。我使用 pwabuilder.com 为该网站创建文件。不幸的是,即使使用没有任何元素来缓存的代码,它也会发出错误“未捕获( promise 中)TypeError:请求失败”

我仔细检查了代码,尝试了 Google Developer 和 Stackoverflow 上显示的不同错误修复,但这些都没有帮助我解决问题。

我在 HTML 文件中有这个:

if ("serviceWorker" in navigator) {
if (navigator.serviceWorker.controller) {
console.log("[PWA Builder] active service worker found, no need to register");
} else {
// Register the service worker
navigator.serviceWorker
.register("pwabuilder-sw.js", {
scope: "./"
})
.then(function (reg) {
console.log("[PWA Builder] Service worker has been registered for scope: " + reg.scope);
});
}
}

Service Worker 注册成功。

pwabuilder-sw.js 是这个:


//This is the service worker with the Advanced caching



const CACHE = "pwabuilder-adv-cache";

const precacheFiles = [

/* Add an array of files to precache for your app */
'/cms/stylesheets/bootstrap.css',
'/cms/stylesheets/ifpayroll.css',
'/cms/stylesheets/animate.css',
'/cms/stylesheets/fontawesome-webfont.css',
'/cms/javascript/main.js',
'/cms/javascript/aos.js',
'/cms/images/logo@3x.png',
];



// TODO: replace the following with the correct offline fallback page i.e.: const offlineFallbackPage = "offline.html";

const offlineFallbackPage = "ToDo-replace-this-name.html";



const networkFirstPaths = [

/* Add an array of regex of paths that should go network first */

// Example: /\/api\/.*/

];



const avoidCachingPaths = [

/* Add an array of regex of paths that shouldn't be cached */

// Example: /\/api\/.*/

];



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 === "ToDo-replace-this-name.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();

}

除了增加了缓存文件外,与pwabuilder.com上提供的100%相同。

Manifest: unknown 'orientation' value ignored.
pwabuilder-sw.js:83 [PWA Builder] Install Event processing
pwabuilder-sw.js:87 [PWA Builder] Skip waiting on install
pwabuilder-sw.js:97 [PWA Builder] Caching pages during install
legal.html:63 [PWA] Service worker has been registered for scope: https://www.ifpayroll.lu/
pwabuilder-sw.js:1 Uncaught (in promise) TypeError: Request failed

这就是我得到的。

最佳答案

您必须更改此行以反射(reflect)您的真实文件名,并确保该文件存在:

const offlineFallbackPage = "ToDo-replace-this-name.html";

然后您还可以删除这些行:

       if (offlineFallbackPage === "ToDo-replace-this-name.html") {

return cache.add(new Response("TODO: Update the value of the offlineFallbackPage constant in the serviceworker."));

}

关于javascript - 使用 Microsoft 的 pwa-builder : Uncaught (in promise) TypeError: Request failed,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56885426/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com