如果页面在离线时加载/刷新,JavaScript 后台同步将停止工作 [英] JavaScript Background Sync Stops Working if Page is Loaded/Refreshed while offline
问题描述
我目前正在学习如何使用后台同步,以允许用户在离线使用网络应用程序时进行 PUT/POST 更改.
I'm currently learning how to use Background Sync as to allow users to PUT/POST changes while using a web app offline.
我遵循了 Jake Archibald 在 中给出的说明引入后台同步,一切运行良好……只要我在在线加载网络应用程序时注册后台同步.我的意思是:
I followed the instructions given by Jake Archibald in Introducing Background Sync , and everything worked great... as long as I register the Background Sync when the web app was loaded while being online. What I mean by that is:
- 在线时我打开网络应用
- 我在网络标签中打开了离线模式
- 我点击了一些注册后台同步的按钮.
- 我关闭了离线模式,以便应用重新上线.
- 后台同步被触发.
导致其停止工作的步骤:
它完全停止工作,即使在上述情况下,如果我执行以下操作:
Steps that cause it to stop working:
It stops working completely, even in the above scenario if I do the following:
- 在其他网站上时,我会在网络标签中打开离线模式.
- 我导航到我的网络应用,多亏了 Service Worker,它可以离线使用.
- 我点击了一些应该注册后台同步的按钮.
- 我在网络标签中关闭了离线模式.
- 什么也没发生.
- 在我转到应用程序"选项卡并取消注册 Service Worker 并从全新安装重试后,第一步工作正常,但第二组步骤不断破坏后台同步
代码:
页内:
//requesting a one-off sync:
navigator.serviceWorker.ready.then(function (reg) {
return reg.sync.register('sync-tag');
}).catch(function (e) {
console.error(e, "System was unable to register for a sync");
});
In Service Worker
In Service Worker
self.addEventListener('sync', event => {
if (event.tag == 'sync-tag') {
event.waitUntil( doStuff() )
}
});
更新
当代码工作时,我使用以下代码来跟踪发送到注册的标签:
Update
When the code works, I used the following code to keep track of tags sent to registration:
navigator.serviceWorker.ready.then(function (reg) {
console.log('before', reg.sync.getTags());
reg.sync.register('sync-tag');
console.log('after', reg.sync.getTags());
}).catch(function (e) {
console.error(e, "System was unable to register for a sync");
});
当使用有效的步骤时,我得到
When using the steps that work, I get
before: resolved to an empty array
after: resolved to an array with one tag ['sync-tag']
使用导致其停止工作的步骤时:
When using the steps that cause it to stop working:
before: resolved to an array with one tag ['sync-tag']
after: resolved to the same array above
这让我相信同步注册发生了,但 Service Worker 不再listening
.而且无论我做什么,比如关闭浏览器选项卡、在线刷新页面、等待一段时间,Service Worker 都不会listen
同步事件了.
This leads me to believe the sync registration happens, but the service worker isn't listening
anymore. And no matter what I do, like close the browser tab, refresh the page when online, wait a while, the service worker just won't listen
to sync events anymore.
我知道这由浏览器决定何时进行后台同步,但我只是不明白为什么这不起作用.除非预期行为是希望用户在线时访问网络应用程序,否则我认为我有问题.
I understand that is up to the browser to decide when to make the Background Sync, but I just don't understand why this isn't working. Unless the expected behavior is to expect the user to visit the web app when online, I think I'm getting something wrong.
感谢您的耐心配合,如果您能帮助理解如何使后台同步工作,我们将不胜感激.
Thank you for your patience, and any help understanding how to make Background Sync work will be appreciated.
推荐答案
好吧,我觉得自己很傻.浏览器确实决定了何时进行后台同步.
Ok, I feel stupid. The browser is indeed the one that decides when to do the background sync.
我预期的行为是错误的:
The behavior I expected is wrong:
- 离线时访问应用.
- 使用后台同步进行 POST/PUT 更改
- 重新上线,立即刷新页面查看更改
浏览器实际实现的行为:
Behavior the browser actually implemented:
- 在线访问应用.
- 应用离线(手动与否)
- 使用后台同步进行 POST/PUT 更改
- 应用上线,刷新
- 更改是即时的,因为应用一上线就会同步.浏览器是否能够检测到从在线到离线再到在线的变化?
离线访问应用
- 离线时访问应用.
- POST/PUT 更改与后台同步.
- 应用上线,刷新
- 变化不是即时的.浏览器以某种方式决定不进行同步.
- 完全关闭浏览器,返回页面
- 浏览器同步.
因此很难知道浏览器何时执行同步,并且仅当在线访问应用程序时,如果浏览器在同一会话中检测到从离线到在线的更改(没有刷新?),浏览器是否会同步?
So is hard to know when the Browser will perform the sync, and only when accessing app while online, does the browser syncs if it detects a change from offline then online in same session (no refresh?)
这篇关于如果页面在离线时加载/刷新,JavaScript 后台同步将停止工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!