PWA 关闭时发送通知

2023-12-08

我制作了一个 PWA 待办事项列表应用程序(链接到应用程序)使用角度。 我现在计划添加通知,以便在应用程序关闭时可以到达用户。 由于它是一个离线工作的 PWA,我不能依赖推送通知。 提前致谢


你可以利用Web 定期后台同步 API您也可以离线运行此功能,即使应用程序已关闭,它也不需要后端服务器进行推送,因为它由服务工作人员定期触发(我猜至少 24 小时)

在您的项目文件中注册同步事件:

registration.periodicSync.register(constants.periodicBgSyncEventName, {
    minInterval: syncMinInterval,
    networkState: "any",
});

在您的 Service Worker 文件中监听同步并显示 Web 通知:

self.addEventListener("periodicsync", (event) => {
  if (event.tag === constants.periodicBgSyncEventName) {
    self.registration.showNotification("Wake Time !!!", {
      body: `Hi, Good Morning`,
    });
  }
});

注意 - 为了使用此定期同步 API,您需要先安装 PWA。

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

PWA 关闭时发送通知 的相关文章

  • jquery.find() 可以只选择直接子项吗?

    我应该向 jQuery find 提供什么参数来选择元素子元素而不选择其他元素 我不能用 gt 引导选择器 而用 将选择所有后代 而不仅仅是直接子代 我知道 jQuery children 但这是一个库 因此用户能够提供自己的选择器 并且我
  • 解析“流”JSON

    我在浏览器中有一个网格 我想通过 JSON 将数据行发送到网格 但浏览器应该在接收到 JSON 时不断解析它 并在解析时将行添加到网格中 换句话说 在接收到整个 JSON 对象后 不应将行全部添加到网格中 应该在接收到行时将其添加到网格中
  • 我想检查 $('#td1').text() === "x" 是否?

    我想检查innerHtml是否有X或O 所以我不能再次添加任何其他东西 但它不起作用 添加检查代码后它就停止了 我在这里尝试做一个简单的XO游戏来更熟悉javascript和jquery 我也不确定是否可以用 jQuery 做到这一点
  • jQuery AJAX 调用 Java 方法

    使用 jQuery AJAX 我们可以调用特定的 JAVA 方法 例如从 Action 类 该 Java 方法返回的数据将用于填充一些 HTML 代码 请告诉我是否可以使用 jQuery 轻松完成此操作 就像在 DWR 中一样 此外 对于
  • Meteor:应用程序无法在 0.9.1.1 版本上运行

    出现类似错误 Error TypeError undefined is not a function evaluating Template create anonymous function iron dynamic template j
  • Javascript正则表达式用于字母字符和空格? [关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我需要一个
  • Node.js:如何在检索数据(块)时关闭响应/请求

    我正在用 node js 构建一个应用程序 它加载多个页面并分析内容 因为 node js 发送块 所以我可以分析这些块 如果一个块包含例如索引 nofollow 我想关闭该连接并继续其余部分 var host example com to
  • 如何将 Google Charts 与 Vue.js 库一起使用?

    我正在尝试使用 Vue js 库使用 Google Charts 制作图表 但我不知道如何添加到 div 这是我尝试做的 这是如何使用普通 javascript 添加图表 这是文档的代码示例 https developers google
  • Meteor - 从客户端取消服务器方法

    我正在通过服务器方法执行数据库计数 用户可以选择他们希望如何执行计数 然后调用该方法 我的问题是 计数可能需要一些时间 并且用户可能会在方法运行时改变主意并请求不同的计数 有什么方法可以取消调用的方法并运行新的计数吗 我认为 this un
  • 如何在使用页面锚点导航时设置“激活”类以在 Angular 2 中引导导航栏?

    我正在使用 Angular 2 和 Bootstrap 4 创建一个单页网站 我创建了一个始终位于页面顶部的导航栏组件 并且我正在使用页面锚点导航 id 请注意 我还没有创建路由模块 到目前为止还没有必要这样做 导航栏代码如下
  • 通过 CDN 使用 Dojo 时如何加载自定义 AMD 模块?

    我正在使用 google 的 CDN 并尝试使用他们的加载程序加载我自己的 AMD 模块 我知道我做错了什么 但我被困住了 有任何想法吗
  • Babel 7 Jest Core JS“TypeError:wks不是函数”

    将我的项目升级到 Babel 7 后 通过 Jest 运行测试会抛出以下错误 测试在 Babel 6 中运行没有任何问题 但在 Babel 7 中失败并出现以下错误 TypeError wks is not a function at Ob
  • Angular 2+ 安全性;保护服务器上的延迟加载模块

    我有一个 Angular 2 应用程序 用户可以在其中输入个人数据 该数据在应用程序的另一部分进行分析 该部分仅适用于具有特定权限的人员 问题是我们不想让未经授权的人知道how我们正在分析这些数据 因此 如果他们能够在应用程序中查看模板 那
  • 如何使用tampermonkey模拟react应用程序中的点击?

    我正在尝试使用 Tampermonkey 脚本模拟对 React 元素的点击 不幸的是 由于 React 有自己的影子 DOM 所以天真的方法使用document querySelector 不工作 我遇到了一些需要修改 React 组件本
  • 如何在类似控制台的环境中运行 JavaScript?

    我正在尝试遵循这里的示例 http eloquentjavascript net chapter2 html http eloquentjavascript net chapter2 html and print blah 在浏览器中运行时
  • 在 vue.js 中访问数组对象属性

    给定以下数组vue js packageMaps Object packageMap 0 Object Id 16 PackageType flag list ProductCode F BannerBase packageMap 1 Ob
  • Javascript 纪元时间(以天为单位)

    我需要以天为单位的纪元时间 迄今为止 我已经看到过有关如何翻译它的帖子 但几天后就没有了 我对纪元时间很不好 我怎么能得到这个 我需要以天为单位的纪元时间 我将解释为您想要自纪元以来的天数 纪元本身是第 0 天 或第 1 天的开始 无论您如
  • 为什么 jquery 没有检测到单选按钮未被选中的情况? [复制]

    这个问题在这里已经有答案了 可能的重复 JQuery radioButton change 在取消选择期间不会触发 https stackoverflow com questions 5176803 jquery radiobutton c
  • Angular 6 + RxJS 6.0:如何将新元素推送到 Observable 包含的数组

    我从 firebase 服务器分块接收数据 同时渲染该数据需要一个坚持可观察包含数组的库 我不知何故无法将新的数据块推送到可观察到的现有数据块数组 从数据服务中 我通过主题的下一个调用并尝试添加新的 calEvent this homeWo
  • fullCalendar 未显示正确的结束日期

    我正在看调试页面 http jsbin com wukofacaxu edit js outputFullCalendar 官方网站的 我想安排一个活动时间为 22 09 2015 至 30 09 2015 dd mm yyyy 但它只显示

随机推荐

  • 无法解析的日期:“Fri Oct 10 23:11:07 IST 2014”(偏移量 20)

    我创建了这个函数来解析日期 但这给出了异常 Unparseable date Fri Oct 10 23 11 07 IST 2014 at offset 20 请帮助 因为我无法弄清楚这段代码有什么问题 public Date parse
  • 从一个列表列表中减去另一个列表列表

    我想从另一个列表列表的相应元素中减去一个列表列表 例如 a 1 2 3 4 b 1 2 3 0 预期输出为 c 0 0 0 4 仅使用一个列表与另一个列表进行减法很容易 c i j for i j in zip a b 但这不适用于列表和返
  • “User”类型的字段“me”必须具有一系列子字段

    嗨 我正在努力学习GraphQL语言 我有下面的代码片段 Welcome to Launchpad Log in to edit and save pads run queries in GraphiQL on the right Clic
  • iOS:自定义键盘:我想将图像发送到textDocumentProxy(输入控件)

    我正在实现仅包含图像的自定义键盘 并且希望在单击图像时将图像发送到 textDocumentProxy 输入控件 例如 textview 但不能克服它 到目前为止 我能够将文本 字符串发送到输入控件 但不能发送图像 是否可以将图像发送到输入
  • 快速重命名后退导航项

    我正在尝试编辑返回项目在导航控制器中 我有这个场景 导航控制器 gt 表视图控制器 gt TableViewController 在第二个 TableViewController 中 我想将后面的项目重命名为 xxxx to Back 有没
  • Firefox 开发者工具添加新规则?

    我决定尝试一下内置的 Firefox 开发者工具 看起来似乎不错 但是 我无法从 Inspector Rules 找到如何向 CSS 添加新规则 我的意思是 my new rule 不仅仅是默认打开的 element 规则 最终编辑 现在通
  • 是否可以在 HTML5 画布中使用多个图像?

    我正在尝试将 10 张不同的图像加载到画布中 我的计划是最终将这些图像制作成动画 但现在它们似乎正在互相覆盖 这是我的代码 var DrawLetters function for i 0 i lt howManyLetters i thi
  • 将 Sqlite 数据库文件重新嵌入到同一个可执行文件中

    我正在创建 Win Form 应用程序 我正在添加一个空的 Sqlite 数据库文件 其中包含表作为嵌入式数据源 在运行时 我将数据库文件提取到应用程序路径中 并将值插入到该数据库文件的表中 再次关闭应用程序时 我必须将数据库文件更新或替换
  • Powershell:更新 IIS web.config

    需要更新 IIS web config 以通过添加 SSL 来保护 cookie Web Config 当前包含以下代码片段
  • 从 chrome.webRequest.onBeforeSendHeaders 中提取 cookie

    我正在开发一个 Firefox 插件来拦截 HTTP 请求并提取 cookie 我能够从标头中提取 用户代理 但无法提取 cookie 我使用的代码如下 chrome webRequest onBeforeSendHeaders addLi
  • 让 vibrate() 在没有 PhoneGap 的浏览器中工作

    有谁知道如何让 navigator vibrate 之类的东西直接在网站的浏览器中工作 不使用 PhoneGap 和 webview 没有找到任何命令http www w3 org TR vibration 似乎有效 我能找到的只是对使用
  • 使用 jQuery 获取选定复选框的值

    我想循环遍历复选框组 locationthemes 并使用所有选定的值构建一个字符串 因此 当选择复选框 2 和 4 时 结果将是 3 8
  • 如何在后台首次运行/调用 CtrlP - VIM

    打电话时CtrlP第一次它导致构建缓存相当延迟 有没有办法在后台运行它 这样我就可以继续在 vim 中做事情 如果您需要加快索引速度CtrlP 您可以使用aggrep 文件 从索引中排除某些文件夹和文件 并设置缓存位置 为此 请将这些行放入
  • WordPress 管理员 - 需要自定义元检查

    我在 WordPress 管理中添加自定义用户元 并且我希望我的两个自定义字段是必需的 但是如何显示错误并告诉 WordPress 在出现错误时不更新配置文件 add action personal options update sweet
  • 为什么annotation_raster不起作用?

    在文档中 有一个示例显示了使用annotation raster如下 ggplot aes x mpg y wt data mtcars annotation raster red Inf Inf Inf Inf geom point 这工
  • 将 ASP.NET MVC Razor @helper 函数转换为帮助器类的方法

    考虑以下 ASP NET MVC razor 视图片段 它定义了一个帮助器 helper FieldFor
  • 当用户连续键入时,每 500 毫秒执行一次函数不超过一次

    我正在尝试实现类似自动完成的功能 因此我在以下时间运行该函数oninput事件发生 因为我正在发出获取请求 而不是在每次更改时运行它 所以我希望在 也许 500 毫秒内运行它不超过一次 有没有办法做到这一点
  • 多次调用 window.open() 第一次后失败

    我有一个脚本可以循环访问多个网址并在新选项卡中打开它们 以前可以用 但现在只能打开第一个 甚至有一个 w3schools 测试编辑器据说可以打开多个窗口 但在第一个窗口之后它也失败了 https www w3schools com jsre
  • 友好地获取ffmpeg信息

    每次我尝试使用 ffmpeg 获取有关我的视频文件的一些信息时 它都会吐出很多无用的信息和好的信息 我在用着ffmpeg i name of the video mpg 有没有可能以友好的方式得到它 我的意思是 JSON 会很棒 甚至丑陋的
  • PWA 关闭时发送通知

    我制作了一个 PWA 待办事项列表应用程序 链接到应用程序 使用角度 我现在计划添加通知 以便在应用程序关闭时可以到达用户 由于它是一个离线工作的 PWA 我不能依赖推送通知 提前致谢 你可以利用Web 定期后台同步 API您也可以离线运行