- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想使用 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/
我正在尝试将 Outlook API 与我的 React 应用程序集成。当我尝试使用 microsoft-graph-client 实现身份验证时,遇到以下错误。 'ImplicitMSALAuthe
我正在尝试使用 Microsoft Graph Beta API 在 Microsoft Teams 中创建 channel 。在文档中,它说 channel 实体具有属性 IsFavoriteByD
我的目标很简单。我想使用图形 API 将自动聊天消息发送到 MS Teams channel 。 这似乎是图形 API 的测试版功能,仅在 Microsoft.Graph.Beta 中可用。 我已经阅
通过委派权限获取 Teams channel 消息时(用户是团队成员): https://graph.microsoft.com/beta/teams/ {team_id}/channels/{cha
我正在使用带有 OData 端点的 Web API 和 Entity Framework 创建一个 RESTful 服务。 Microsoft.AspNet.WebApi.OData 和 Micros
我可以通过对标题和作者姓名的评估查询(以及解释查询)获得良好的结果。 但是如果我想通过 DOI 查找论文怎么办? 我可以通过扩展元数据描述(在现有搜索的属性中)获取条目的DOI信息,但是由于扩展元数据
我正在尝试通过displayName查询用户,但是在同时使用C#SDK和Graph Explorer发送请求时,我无法转义单引号。 更新:在示例中不清楚,我遇到麻烦的搜索词是I' 查询示例: http
我在使用 Microsoft fakes 的解决方案中有一个单元测试项目,当我构建它时出现以下错误。它提示无法加载的 DLL 在磁盘上。我已经打开了 Fusion 日志记录,这表明绑定(bind)成功
我想创建一个应用程序,当用户在 MS Teams 中接到电话时会收到通知。我的意思是我想在来电事件上订阅一些东西,然后根据来电信息做一些事情。这可能吗?到目前为止,我在 SDK 中没有看到任何事件。
如果我开发一个网站,它是否会以相同的方式在 IE11、Chrome、Firefox 和 edge 上运行,还是我们需要专门为 IE11 编写代码?我没有 Windows 8,因此无法在边缘浏览器上测试
我几个月前为某些收件箱创建了一些订阅,系统成功收到了有关收到电子邮件的通知,订阅也定期更新以增加到期日期。这是我的订阅列表: https://graph.microsoft.com/v1.0/subs
如果我开发一个网站,它是否会以相同的方式在 IE11、Chrome、Firefox 和 edge 上运行,还是我们需要专门为 IE11 编写代码?我没有 Windows 8,因此无法在边缘浏览器上测试
如果 Edge 在某些机器上发生崩溃,我们需要检查日志以了解发生了什么情况。 最佳答案 Microsoft Edge 实际上是一个 Windows 进程,因此您应该能够在事件查看器中查看日志。此外,您
我已经将一些测试用例与项目中的单元测试相关联。该项目已构建并复制到共享上的放置位置。当我去运行这些测试时,由于作为这些测试的一部分包含的非托管 DLL 的 System.DllNotFoundExce
我对 asp.net 核心标识中的三个包感到困惑。我不知道彼此之间有什么区别。还有哪些是我们应该使用的? 我在 GitHub 上找到了这个链接,但我没有找到。 Difference between M
在我的 Windows 类库(由 MVC 网站使用)中,我安装了 NugetPackage Microsoft.SqlServer.Types (Spatial)。 现在,我正在使用 ado.net
我有一个简单的 web 应用程序,我在 Teams 中显示为一个应用程序。我已经在 App Studio 中进行了设置,一切都按我的预期工作,一切都很好。它正在显示我的网络应用程序,这就是我想要的。
有什么不同?它们都是业务管理解决方案。他们做的一样吗?一些不同的版本?他们使用同一个平台吗? 动态 Assets 净值 Microsoft Dynamics NAV 2009 is a compreh
如何制定包含非英语字符(例如日耳曼语Umlauts)的Microsoft Graph /myOrganization/users OData查询? 例子: 我的租户中有一个名为“ThomasMülle
我想创建一个类似于乐队附带的星巴克应用程序的应用程序。我想显示条形码。我可以在云端或本地设备上将条形码生成为 JPG 图像,但我需要能够在乐队的屏幕上显示它们。到目前为止,我还没有找到使用 Band
我是一名优秀的程序员,十分优秀!