如果页面在离线时加载/刷新，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:

1. 在线时我打开网络应用
2. 我在网络标签中打开了离线模式
3. 我点击了一些注册后台同步的按钮.
4. 我关闭了离线模式，以便应用重新上线.
5. 后台同步被触发.

导致其停止工作的步骤:

它完全停止工作，即使在上述情况下，如果我执行以下操作:

Steps that cause it to stop working:

It stops working completely, even in the above scenario if I do the following:

1. 在其他网站上时，我会在网络标签中打开离线模式.
2. 我导航到我的网络应用，多亏了 Service Worker，它可以离线使用.
3. 我点击了一些应该注册后台同步的按钮.
4. 我在网络标签中关闭了离线模式.
5. 什么也没发生.
6. 在我转到应用程序"选项卡并取消注册 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:

1. 离线时访问应用.
2. 使用后台同步进行 POST/PUT 更改
3. 重新上线，立即刷新页面查看更改

浏览器实际实现的行为:

Behavior the browser actually implemented:

1. 在线访问应用.
2. 应用离线(手动与否)
3. 使用后台同步进行 POST/PUT 更改
4. 应用上线，刷新
5. 更改是即时的，因为应用一上线就会同步.浏览器是否能够检测到从在线到离线再到在线的变化?

离线访问应用

1. 离线时访问应用.
2. POST/PUT 更改与后台同步.
3. 应用上线，刷新
4. 变化不是即时的.浏览器以某种方式决定不进行同步.
5. 完全关闭浏览器，返回页面
6. 浏览器同步.

因此很难知道浏览器何时执行同步，并且仅当在线访问应用程序时，如果浏览器在同一会话中检测到从离线到在线的更改(没有刷新?)，浏览器是否会同步?

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屋！