如果在离线状态下加载/刷新页面,JavaScript 后台同步将停止工作

2023-12-31

我目前正在学习如何使用后台同步来允许用户在离线使用网络应用程序时进行 PUT/POST 更改。

我按照杰克·阿奇博尔德 (Jake Archibald) 的指示进行操作后台同步简介 https://developers.google.com/web/updates/2015/12/background-sync,一切都很好......只要我在加载网络应用程序时注册后台同步online。我的意思是:

有效的步骤:

  1. 在线时我打开网络应用程序
  2. I turn 离线模式在网络选项卡中打开
  3. 我单击一些注册后台同步的按钮。
  4. I turn 离线模式关闭,因此应用程序重新上线。
  5. 触发后台同步。

导致其停止工作的步骤:

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

  1. 在另一个网站上时,我转向离线模式在网络选项卡中打开。
  2. 我导航到我的网络应用程序,由于服务人员的帮助,该应用程序可以离线使用。
  3. 我单击一些应该注册后台同步的按钮。
  4. I turn 离线模式在网络选项卡中关闭。
  5. 什么都没发生。
  6. 在我转到“应用程序”选项卡并取消注册服务工作人员并从全新安装中重试后,第一个步骤有效,但第二组步骤不断破坏后台同步

Code:

In page:

//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");
});

在职工人

self.addEventListener('sync', event => {
  if (event.tag == 'sync-tag') {
    event.waitUntil( doStuff() )
  }
});

Update

当代码工作时,我使用以下代码来跟踪发送到注册的标签:

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");
});

当使用有效的步骤时,我得到

before: resolved to an empty array
after: resolved to an array with one tag ['sync-tag']

使用导致其停止工作的步骤时:

before: resolved to an array with one tag ['sync-tag']
after: resolved to the same array above

这让我相信同步注册发生了,但服务工作线程没有发生listening不再了。无论我做什么,比如关闭浏览器选项卡、在线时刷新页面、等待一段时间,Service Worker 就是不会listen不再同步事件。

我知道这由浏览器决定何时进行后台同步,但我只是不明白为什么这不起作用。除非预期的行为是期望用户在线时访问网络应用程序,否则我认为我遇到了问题。

感谢您的耐心等待,如果您能帮助了解如何使后台同步工作,我们将不胜感激。


好吧,我觉得自己很蠢。浏览器确实决定何时进行后台同步。

我预期的行为是错误的:

  1. 离线时访问应用程序。
  2. POST/PUT 通过后台同步进行更改
  3. 重新上线,刷新页面立即看到变化

浏览器实际实现的行为:

在线访问应用程序:

  1. 在线访问应用程序。
  2. 应用程序离线(手动或手动)
  3. POST/PUT 通过后台同步进行更改
  4. app上线,并刷新
  5. 更改是即时的,因为应用程序一上线就会同步。浏览器能够检测到从在线到离线再到在线的变化吗?

离线时访问应用程序

  1. 离线时访问应用程序。
  2. POST/PUT 通过后台同步进行更改。
  3. app上线,并刷新
  4. 改变不是立竿见影的。不知何故,浏览器决定不进行同步。
  5. 完全关闭浏览器,然后返回页面
  6. 浏览器同步。

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如果在离线状态下加载/刷新页面,JavaScript 后台同步将停止工作 的相关文章

  • 在带有融合图表的饼图中显示图例

    我想在饼图中显示图例及其值 我用谷歌搜索了很多 但没有得到任何解决方案 此外 融合图表中没有选项可以直接实现这一点 谁能建议我可以应用什么技巧来做到这一点 我想我需要修改库中的很多我不想要的东西 所以请帮助我 Refer below ima
  • Haxe for javascript 没有全局命名空间污染?

    此问题仅适用于 Haxe 版本 我知道 haxe 一段时间了 但直到昨天才真正使用过它 出于好奇 我决定移植对决 js http wmd editor com examples splitscreen 一个 javascript 端口降价
  • 使用 React js 和 Express API 服务器通过 fetch 发布对象

    我在 fetch 中的 post 方法遇到麻烦 因为我的服务器从客户端接收到一个空对象 我已经检查了客户端 但无法发送我想要发送的值 这是我的服务器 const express require express const app expre
  • 使用正则表达式验证字符串是否安全

    我有一个网站 用户可以在其中选择用户名 目前 他们可以输入几乎任何字符 包括 ETC 我知道我可以使用正则表达式 这可能就是我的选择 我将使用否定集 我认为这是正确的工具 如下所示 那么 我怎样才能知道要放入该集合中的所有非法字符呢 我可以
  • 在 Cypress 中提取部分文本

    我是 Cypress 的新手 我需要从我的应用程序中提取文本的动态部分 div Hello World greeting number 9123 div 在此示例中 我需要从 div 中提取 9123 以便稍后在测试中使用 知道我应该怎么做
  • 使用 fadeIn() 时,jQuery“未捕获类型错误:未定义不是函数”;

    我是 JS 新手 正在编写一个基本的富含 jQuery 的网页 其中同一文档中的每个页面都具有淡入 淡出功能 使用具有单独 ID 的相同 div 元素 无论如何 当我尝试淡入当前页面时 我收到错误 未捕获的类型错误 未定义不是函数 我在网上
  • 通过单击堆叠条形图打开选项卡

    我正在使用 R 构建一个包含转发的堆积条形图 ggplot and plotly 如果单击条形图的一部分 我希望打开一个新的浏览器选项卡并显示该特定日期的推文以及指定的转发量 但是 当我单击下面示例中的其中一个栏时 会打开一个不同的链接 表
  • 查找数组中多个最大值的索引

    我有一个示例数组 var arr 10 67 100 100 我想找到数组中最大值的索引 该函数仅查找一个索引 function max arr var max arr 0 var maxIndex 0 for var i 1 i lt a
  • 在函数调用时加载外部 Javascript

    我想知道如何从函数将外部 Javascript 加载到我的文档中 这是一种方法 function loadDaFun var script document createElement script script src path to y
  • 获取语​​音通道的用户数

    我正在重写我的音乐部分朋友不和谐机器人 https top gg bot 629799045954797609 我试图弄清楚如何获取执行命令的人的语音通道中的用户数量 我到处都找过 但似乎找不到它或它的用法 现在我正在使用以下内容 modu
  • 如何使用 Javascript 将 HTML 表单数据输出到 XML 文件?

    我目前正在尝试弄清楚如何将 HTML 表单数据输出到 XML 文件 这是我过去几天一直在研究的一个想法 目的是创建一个用于 Windows 7 安装的 autounattended xml 文件 目前我的 HTML 如下
  • 为什么我无法使用 HTML5 音频标签多次播放声音?

    这就是声音的 存储 方式
  • 匹配CSS的正则表达式“<属性>:<值>”

    我从以下位置检索了 CSS 规则document styleSheets现在我正在寻找提取它的属性和值 cssText expl position absolute background color rgb 204 204 204 max
  • console.log 是如何工作的?

    第一个例子 在以下示例中 http jsfiddle net maniator ScTAW 4 http jsfiddle net maniator ScTAW 4 我有这个js var storage function var store
  • 如何列出特定服务器的所有成员?

    我的代码是 const list client guilds find id 335507048017952771 for user of list users console log user 1 username 这实际上没有任何作用
  • 在成功回调之前修改 JSONP 结果

    我想从外部服务加载一些 JSON 数据 然而 它提供 foo bar useful 而我真正关心的是 有用 的部分 我需要将那部分传递给success打回来 我正在尝试使用Deferred一次从多个数据源加载 类似this https st
  • 在 Mobile Safari 中点击

    敲击
  • ExtJS:简单表单忽略 formBind

    我有一个小问题让我发疯了好几天 我有一个表单面板 Ext define EC view PasswordPanel extend Ext form Panel alias widget pwdpanel bodyPadding 15 ini
  • javascript初学者:在javascript中添加动态样式? [复制]

    这个问题在这里已经有答案了 可能的重复 如何使用 Javascript 创建 标签 https stackoverflow com questions 524696 how to create a style tag with javasc
  • 如何从 vue 组件调用 App.vue 中的方法

    我有一个 vue 组件和一个 vue 元素声明 如下所示 Vue component todo item template li This is a todo li methods test function I am getting an

随机推荐

  • 使用 Apple Enterprise Developer Program 部署 iOS 应用程序

    我已经为我需要部署的公司创建了一个应用程序 该应用程序仅供内部使用 因此不会在 App Store 上提供 我是否需要为要在其设备上安装应用程序的每个人提供 UDID 这是不可能的 因为有 500 名员工 是否有人拥有有关仅使用企业开发人员
  • 指定 64 位对齐

    给定一个结构定义 例如 struct foo int a b c 指定它应始终与 64 位地址对齐的最佳 最简单 最可靠和可移植 方法是什么 即使在 32 位版本上也是如此 我正在使用 C 11 和 GCC 4 5 2 并希望也支持 Cla
  • 上传的图像在canvas中拖动,在html5中可触摸和旋转

    我是 Html5 的新手 我正在上传图像 但它没有显示在画布中 如果我提供图像的直接来源 那么它将起作用 我从此链接获取帮助javascript 上传图像文件并将其绘制到画布中 https stackoverflow com questio
  • 包含“点目录”时的 Path.relativize 行为

    About Path relativize你可以阅读的方法 此方法尝试构造一个相对路径 当 根据此路径解析 产生一个定位相同文件的路径 作为给定的路径 例如 在 UNIX 上 如果此路径是 a b 并且 给定路径是 a b c d 那么生成
  • 有没有办法更快地渲染点OpenGL

    我需要在 openGL 中可视化大约 50k 60k 点 我设法将它们全部打印出来 但是当我使用旋转时 每次旋转之间需要花费很多时间 因为它只是打印每一帧的所有数据 有没有办法一次性打印所有数据并冻结数据的导入 以便保留图像但停止处理 de
  • 如何检测本地存储何时被清除

    我在页面 A 中添加了本地存储中的一些值 当我转到页面 B 时 本地存储不应被清除 但确实如此 这是一个程序错误 但是 我无法正确跟踪它以了解这种情况何时发生 我尝试执行 setInterval 来每 1 秒在控制台中记录一次本地存储的值
  • Ctrl + A 和类似的选择操作快捷键在可视代码中不起作用

    Select all copy cut and paste are not working by using the usual keyboard shortcuts ctrl a c x or v 对于 VS Code 1 55 1 我通
  • 在 Angular 1 中,如何对 ng-repeats 进行分页?

    我目前使用过滤器将 ng repeat 限制为 5 但我想知道如何对数据进行分页 div 我有数量不定的重复项目 我希望用户能够以合理的块查看这些项目 一次五个 并使用下一个 上一个按钮或页码来跳过 是否有一个非常适合这项任务的角度指令 使
  • 出现错误 -java.lang.NoClassDefFoundError: javax/faces/component/behavior/ClientBehaviorHolder

    我在集成 SWF Primefaces 2 2 1 JSF 2 Spring Security 3 Spring 3 1 0 时遇到奇怪的错误 INFO Unsanitized stacktrace from failed start co
  • 了解 Python WSGI 应用程序中的全局对象持久性

    请考虑 Google App Engine 中我的 WebApp2 应用程序中的以下代码 count 0 class MyHandler webapp2 RequestHandler def get self global count co
  • 正则表达式删除重复单词?

    我用它来删除重复的单词 Notepad 或 Powergrep b w b W 1 用 来代替 1 如何更改以查找不连续的重复单词排成一行并删除第二个重复的单词 Example word1 word2 word1 word3 Result
  • 将四元数从右手坐标翻转到左手坐标

    我需要从右边翻转四元数 x left to right y front to back z top to bottom 到左手坐标 其中 x left to right y top to bottom z front to back 我该怎
  • unordered_set 将元素存储为指针

    缩小范围 我目前正在使用升压无序 http www boost org doc libs 1 49 0 doc html unordered html 我看到两种可能的解决方案 定义我自己的等式谓词和哈希函数 http www boost
  • VS2010不会显示项目属性(“底层RCW”)?

    只有有时 我还没有注意到模式 当我右键单击一个项目 各种类型的项目 并选择 特性 我通常可以在重新启动 VS2010 后查看项目页面 我用的是RTM版本 什么可能导致此错误 莱帕德英国 我遇到了同样的问题 最后发现出了什么问题 这是行为不当
  • 传单标记在某些情况下不显示

    我正在使用 leaflet htmlwidget 实现来使用 R 绘制基于 Web 的地图 我正在寻找特定的标记 但找不到它 并意识到它根本没有显示 但是 当我将数据集子集化为just该条目 标记显示得很漂亮 这是标记的屏幕截图 在将数据子
  • EF 映射为表中的所有列名称添加前缀

    我有一个大型现有数据库 它有一个约定 其中所有列名称都以非复数表名作为前缀 例如 Tablename addresses Columns addressId addressLine1 addressLine2 是否有任何配置可以申请映射 使
  • CMake 安装目标依赖项

    我正在编写一个包含库本身和示例的库 并且我正在使用 CMake cmake minimum required VERSION 3 6 add executable example main cpp install DIRECTORY inc
  • 断开连接时 Firebase 更新

    我在 firebase 上有一个节点 列出了游戏中的所有玩家 当新玩家加入时 此列表将更新 当当前用户 我 断开连接时 我想将自己从列表中删除 由于列表会随着时间的推移而变化 在我断开连接的那一刻 我想更新此列表并更新 firebase 这
  • javascript var 和 not var 有什么区别? [复制]

    这个问题在这里已经有答案了 可能的重复 JavaScript 中使用 var 和不使用 var 的区别 https stackoverflow com questions 1470488 difference between using v
  • 如果在离线状态下加载/刷新页面,JavaScript 后台同步将停止工作

    我目前正在学习如何使用后台同步来允许用户在离线使用网络应用程序时进行 PUT POST 更改 我按照杰克 阿奇博尔德 Jake Archibald 的指示进行操作后台同步简介 https developers google com web