Javascript Workbox-后台同步-浏览器重新联机时的脱机后重播事件不';不要被触发
我使用workbox v4.3.1为web应用程序的用户提供脱机功能 虽然一切都能在Chrome中完美运行,就像你期望的PWA一样(即一切都在本地缓存),但应用程序的所有更新都会在IndexedDB中捕获,并在应用程序重新联机时同步回服务器 然而,对我来说,主要的用例是提供对iOS Safari和PWA的支持 虽然使用Safari中的Service Worker在本地缓存所有页面,并且所有脱机更新也在索引数据库中捕获,如下所示 但是,当连接恢复联机时,浏览器不会触发同步事件(本例中为Safari)。虽然Safari本机不支持后台同步,但我希望在刷新页面时,如果软件初始化在索引数据库中发现一些数据要刷新到服务器,则应手动触发同步事件 但这并没有发生,我试图手动监听“消息”-“replayRequests”,然后重播请求,但效果并不理想 如果您有任何帮助,我们将不胜感激。这是服务人员代码供参考Javascript Workbox-后台同步-浏览器重新联机时的脱机后重播事件不';不要被触发,javascript,service-worker,Javascript,Service Worker,我使用workbox v4.3.1为web应用程序的用户提供脱机功能 虽然一切都能在Chrome中完美运行,就像你期望的PWA一样(即一切都在本地缓存),但应用程序的所有更新都会在IndexedDB中捕获,并在应用程序重新联机时同步回服务器 然而,对我来说,主要的用例是提供对iOS Safari和PWA的支持 虽然使用Safari中的Service Worker在本地缓存所有页面,并且所有脱机更新也在索引数据库中捕获,如下所示 但是,当连接恢复联机时,浏览器不会触发同步事件(本例中为Safar
// If we're not in the context of a Web Worker, then don't do anything
if ("function" === typeof importScripts) {
importScripts(
"https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js"
);
//Plugins
// Background Sync Plugin.
const bgSyncPlugin = new workbox.backgroundSync.Plugin("offlineSyncQueue", {
maxRetentionTime: 24 * 60
});
// Alternate method for creating a queue and managing the events ourselves.
const queue = new workbox.backgroundSync.Queue("offlineSyncQueue");
workbox.routing.registerRoute(
matchCb,
workbox.strategies.networkOnly({
plugins: [
{
fetchDidFail: async ({ request }) => {
await queue.addRequest(request);
}
}
]
}),
"POST"
);
// CacheKeyControlPlugin
const myCacheKeyPlugin = {
cacheKeyWillBeUsed: async ({ request, mode }) => {
normalizedUrl = removeTimeParam(request.url);
return new Request(normalizedUrl);
}
};
if (workbox) {
console.info("SW - Workbox is available and successfully installed");
} else {
console.info("SW - Workbox unavailable");
}
//Intercept all api requests
var matchCb = ({ url, event }) => {
// Filter out the presence api calls
return url.pathname.indexOf("somethingidontwanttocache") == -1;
};
function removeTimeParam(urlString) {
let url = new URL(urlString);
url.searchParams.delete("time");
return url.toString();
}
/* //Pre cache a page and see if it works offline - Temp code
workbox.precaching.precache(getPageAPIRequestURLs(), {
cleanUrls: false
}); */
workbox.routing.registerRoute(
matchCb,
new workbox.strategies.CacheFirst({
cacheName: "application-cache",
plugins: [myCacheKeyPlugin]
})
);
self.addEventListener("message", event => {
if (event.data === "replayRequests") {
queue.replayRequests();
}
});
}
workbox background sync
模拟缺乏本机支持的浏览器中的后台同步功能,每当服务工作者进程启动时,都会重播排队的请求。服务工作者进程是轻量级的,寿命很短,在一段时间内没有任何事件时会被主动终止,然后再次启动,以响应进一步的事件
重新加载网页可能会导致service worker进程启动(假定它以前已停止)。但如果service worker仍在运行,则重新加载网页只会导致对现有进程触发fetch
事件
服务辅助进程在终止前可以保持空闲的时间间隔取决于浏览器
Chrome的DevTools提供了一种检查服务人员状态并按需启动/停止服务人员的方法,但我不相信Safari的DevTools提供了这种功能。如果你想确认服务人员已停止,然后再次启动,我会退出Safari,重新打开它,然后导航回你的web应用。HiJeff,谢谢你关于服务人员生命周期的详细帖子。我可以建议将这些信息添加到Workbox的测试部分,作为Safari实现服务人员的一个怪癖吗?我在那里看到了Chrome的部分,这将使开发者在iOS/macOS Safari上的测试更容易一些。我尝试了你的建议退出safari和同步是在我访问web应用程序时发生的。@Jeff Posnick和Vijay感谢这一点-我正在处理一个类似的问题,我想确保safari上的Workbox队列中的某些内容将在某个时候上载-您是否找到了任何方法来保证这一点,而不必退出应用程序并回来吧?@BruceM抱歉,我不得不放弃Workbox和服务人员在iOS设备上的离线功能,原因是1.iOS中safari的在线文档资源不足。2.safari中服务人员的实施乏善可陈。我认为这不会改变。苹果不希望他们的钱被拿走。3.没有大多数服务人员解决方案都是在iOS中准备好生产的,即使走捷径也不是一个高质量的解决方案。