首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

firebase通知事件在service worker中不起作用(通知关闭、通知单击)

Firebase 是一个由 Google 提供的移动平台,它提供了多种云服务,包括实时数据库、认证、存储、云函数等等。而 Firebase Cloud Messaging (FCM) 则是 Firebase 提供的一项通知推送服务。

根据问题描述,当在 service worker 中使用 Firebase 的通知事件时,通知关闭和通知单击没有起作用。这可能是由于以下几个原因导致的:

  1. 权限问题:在使用通知事件之前,需要确保您的网站已经获得了用户授权来发送通知。您可以在前端代码中使用 Notification.requestPermission 方法来请求通知权限,如果用户授权成功,才能正确处理通知事件。
  2. Service Worker 注册问题:确保您的 Service Worker 已经正确注册,并且在注册成功后,可以接收到来自 Firebase Cloud Messaging 的消息推送。您可以在 Service Worker 中使用 self.addEventListener('push', ...) 方法来处理消息推送事件。
  3. 通知事件监听问题:请确保您正确地在 Service Worker 中监听了通知关闭和通知单击事件。您可以在 Service Worker 中使用以下代码来监听这两个事件:
代码语言:txt
复制
self.addEventListener('notificationclose', event => {
  // 处理通知关闭事件
});

self.addEventListener('notificationclick', event => {
  // 处理通知单击事件
});

以上是可能导致该问题的一些常见原因。如果问题仍然存在,建议您仔细检查您的代码逻辑,确保没有其他因素导致通知事件不起作用。

另外,在腾讯云产品中,腾讯云移动推送(https://cloud.tencent.com/product/umeng_message)是一项类似的移动推送服务,您可以考虑使用该服务来实现移动设备的推送通知功能。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Html Notification通知的简单使用(转)

以前,我们的通知实现主要是通过闪烁页面的标题内容来实现,实现原理其实很简单,就是定时器不断修改document.title的值。...自己更新于2018-08-04 Facebook的通知是应该是使用的FCM,也就是Firebase云信息传递,是一种跨平台消息传递解决方案。...使用Service Worker注册对象,调这个对象的pushManager.subscribe的方法让浏览器弹一个框,询问用户是否允许接受消息通知。...然后浏览器会触发Service Worker的push事件,让Service Worker调showNotification显示这个push的内容。操作系统就会显示这个Push。...Notification.onclose 通知关闭了,然后…… 无论是用户手动关闭,还是直接Notification.close()关闭都会触发该该事件

2.9K10

h5的Notification 、web Push介绍

Service Worker由于它可以浏览器页面未打开,浏览器未打开时执行,因此一般选择它完成web push的最后一步,即响应push事件完成展示通知等业务逻辑。...,为了控制service worker的逻辑,需要使用event.waitUntil方法,此方法接收一个promise参数,promise变为resolved状态后,浏览器就会检查通知是否已被展示,若是...,则关闭service worker。...经实验,如果用户关闭了浏览器,关闭期间如果有Push的话等到用户重新打开浏览器会再弹出来。...Service Worker让我们Web端也能有像原生APP一样的Push通知,使得Web端越来越像原生APP端,随着HTML5的其它新功能如WebAssembly提高运行速度,WebWorker多线程支持

4.5K20
  • 理解 Service Workers

    Service Workers 是 web 浏览器所包含的持久的后台进程执行代码的一种方式。其中的代码是事件驱动的,意味着 Service Worker 范围内触发的事件驱动着它的行为。...当网页关闭,然后重新打开,浏览器会将旧的 Service Worker 替换成新的,然后触发 Activate 事件 Install 事件之后。...您需要在前置 JS 编写注册同步事件的代码,同时 Service Worker 处理同步事件: // app.js navigator.serviceWorker.ready .then(...;之后就可以切换通知了,并能处理某些事件,例如:通知是否被用户关闭。...但是如果您想了解更多,这篇 推送通知介绍 会有所帮助。 使用 Ember.js 实现 Ember 应用实现 Service Workers 难以置信的容易。

    1.8K21

    APP消息推送方案调研

    高到达率透传消息的送达依赖应用的常驻,而通知栏消息在华为手机上通过推送服务应用统一展示,即使应用没有启动,通知消息也能送消息推送原理APNsApns:Apple Push Notification service...使用GCM推送服务的whatsapp即使后台程序和服务都关闭掉,也依然可以第一时间接收到新消息的推送(实测国内whatsapp也的确可以在后台关闭的情况下正常通过GCM接受实时消息)。...每一个设备都有一个自己的设备号,而设备的app又都有一个唯一的包名。...hl=zh-cn#send-messages-to-multiple-devicesFirebase Admin SDK中发送消息时使用的registrationTokens是设备端生成的Firebase...获取Firebase实例ID:应用,使用Firebase实例ID服务来获取一个唯一的标识符。这个服务会处理令牌的生成和刷新。

    25110

    现代浏览器探秘(part2):导航

    为了便于关闭选项卡或窗口时能够对选项卡/会话进行还原,会话的历史记录将被存储磁盘上。 ?...图9:从浏览器进程到新渲染器进程的2个IPC,通知新渲染器渲染页面并通知旧渲染器进程卸载 如果是Service Worker 最近对该导航过程的一个改变是引入了service worker (https...service worker是一种应用代码编写网络代理的方法;它允许Web开发人员更好地控制本地缓存内容以及何时从网络获取新数据。...如果将service worker设置为从缓存加载页面,则无需从网络请求数据。 要记住的重要一点是Service Worker渲染器进程运行的JavaScript代码。...注册Service Worker时,将保留Service Worker的范围作为参考(你可以Service Worker生命周期”一文阅读有关范围的更多信息)。

    2K20

    Service Workers - JavaScript API 简介

    示例 service-worker.js 是 /sw 路径下,这使得该 Service Worker 默认只会收到 /sw 路径下的 fetch事件。...Service Worker 可以启用哪些功能? 本节,我将进一步详细介绍Service Worker的功能,包括一些小代码示例。...预缓存 预缓存是一个术语,描述了 Service Worker 处于激活状态之前下载和缓存文件。 它是 Service Worker 生命周期的“install ”步骤完成的。...定期后台同步 正如在引言中已经提到的那样,Service Worker 与其他服务工作者一个单独的线程上运行,所以即使关闭页面,它们也可以执行其代码。 此功能对于执行后台同步和提供推送通知很重要。...要使用推送通知,需要设置一台服务器,该服务器会将通知推送给所有客户端。 由于Service Worker在后台另一个线程上运行,因此即使页面当前未打开,用户也可以看到推送通知

    94220

    我们能用云函数做什么?

    Firebase 云函数使开发人员能够访问Firebase和Google Cloud的一些事件,以及可扩展的计算来运行代码以响应处理这些事件。...Firebase以独特的方式使用云函数来满足其独特需求,典型运用的领域: 当发生了一些新奇有趣的事情通知用户 执行实时的数据库清理和维护 云上执行密集的任务,而不是本地的应用程序上 与第三方的服务和...一、当发生了一些新奇有趣的事情通知用户 开发人员可以使用云函数来保持与用户之间的联系和获取最新的有关应用程序的相关信息。 比如,一些社交网站或应用上(如微博)。...在这样的程序,由实时数据库触发的写入功能以存储新的关注者可以创建Firebase的云消息通知,让用户知道他们的粉丝数又增加了。...例如,基于实时数据库的聊天室应用程序,您可以监视写入的事件,并从用户的消息擦除一些带有敏感词或不恰当的文本。

    16.8K40

    消息通知(Notification)用户触达系统设计

    近年来,通知功能已经成为许多应用程序突出的特性。构建一个能每天发送数百万通知的可扩展系统绝非易事。这正是为什么我觉得有必要记录我在这方面踩坑之路。也叫用户触达系统。...已成为应用功能清单的重要组成部分。 通知不仅是移动推送通知。...然而,若系统负载过高,轻微延迟也可接受 支持的设备:移动设备(iOS 和 Android)以及笔记本电脑/台式机 通知可以由客户端应用程序事件触发,也可以服务器端进行计划 用户可以选择不再接收将来的通知...然后,系统应该以以下组件结构化: 不同通知类型的配置 收集联系信息流 通知发送和接收流 4 不同通知类型的高级设计与AWS 每种通知类型高级层面上的工作原理。...与使用APNS不同,使用Firebase Cloud Messaging(FCM)向Android设备发送推送通知

    1K10

    serviceWorker 初尝试, 提升用户体验,改善前后端交互方式

    我细细思考了一会,突然灵光乍现,一个词出现在我的脑海里了, serviceWorker serviceWorker简介: Service Worker 是一种 Web Worker。...serviceWorker作用: 1.网络代理,转发请求,伪造响应 2.离线缓存 3.消息推送 4.后台消息传递 Service Worker优势及典型应用场景 1、离线缓存:可以将H5...如重度的H5游戏、框架数据独立的web资讯客户端、web邮件客户端等 2、消息推送:激活沉睡的用户,推送即时消息、公告通知,激发更新等。如web资讯客户端、web即时通讯工具、h5游戏等运营产品。...3、事件同步:确保web端产生的任务即使在用户关闭了web页面也可以顺利完成。如web邮件客户端、web即时通讯工具等。...4、定时同步:周期性的触发Service Worker脚本的定时同步事件,可借助它提前刷新缓存内容。如web资讯客户端。

    68420

    精读《深入了解现代浏览器二》

    跳转到别的网站 当你准备跳转到别的网站时,执行普通跳转流程前,还会响应 beforeunload 事件,这个事件注册 renderer process,所以 browser process 需要检查...Service Worker Service Worker 可以页面加载前执行一些逻辑,甚至改变网页内容,但浏览器仍然把 Service Worker 实现在了 renderer process 。...然后网络响应会被 Service Worker 接管。...renderer process 仅处理渲染逻辑,它不关心是从哪来的,比如是网络请求过来的,还是 Service Worker 拦截后修改的,也不关心当前浏览器状态是什么,它只管按照约定的接口规范,指定的节点抛出回调...所以浏览器运行周期里,有着非常清晰的逻辑链路,这些模块必须事先规划设计好,很难想象这些模块分工是开发逐渐形成的。 最后提到加速优化,Chrome 惯用技巧就是,用资源换时间。

    39440

    CVM上监控其他Centos系统

    本教程,我们将教你配置Alerta并使其能够显示来自 Nagios的通知。...第二步、配置Nagios-to-Alerta模块 让我们配置Nagios来向Alerta发送通知消息。 首先,Nagios主配置文件启用新安装的Alerta代理模块。...您是在教程的第3步配置的。 key :您在教程的步骤4创建的API密钥。您需要这个key来对Alerta进行身份验证并发布事件。...然后,警报将从主Alerta仪表板消失,但您仍然可以通过点击 Closed 来查看所有已关闭事件。 [NrCfEUV.png] 您可以单击事件行以查看更多详细信息。...结论 本教程,您配置了Nagios以便向另一台运行Alerta的服务器发送通知。 Alerta为可以让您跟踪来自许多系统的警报。

    1.8K40

    项目中使用Service Worker 与 PWA

    支持后台同步 Service Worker 允许在后台执行任务,例如数据同步或推送通知。这使得应用程序可以不干扰用户的情况下执行一些重要的操作。 4....支持推送通知 Service Worker 具有推送通知功能,可以通过浏览器向用户发送实时通知,提高用户参与度和留存率。...然后, Service Worker ,我们通过监听 install 事件来缓存这些资源,并在 fetch 事件拦截网络请求,从缓存返回资源。这样,即使离线时,页面仍能够加载所需资源。...本例,可以看到 Service Worker 文件位于域的根目录,这意味着 Service Worker 范围将是这个域下的。...当网站上当前打开的页面关闭时,旧 Service Worker 将会被终止,新 Service Worker 将会取得控制权。

    45210

    京东一面:浏览器跨标签页通信的方式都有什么?

    它在浏览器背后独立运行与网页分开,这意味着即使用户关闭了网页,Service Worker 仍然可以运行。可以用于实现推送通知功能。...它可以注册为推送消息的接收者,当服务器有新的通知要发送时,Service Worker 可以显示通知给用户,即使网页没有打开。... install 事件,你可以缓存静态资源,如 HTML、CSS、JavaScript 文件,以便在离线时使用; 激活: 安装成功后,Service Worker 并不会立即接管页面的网络请求。...你可以新的 install 事件更新缓存,然后在下次页面加载时进行激活,以确保新的 Service Worker 被使用; 解除注册: 如果你不再需要 Service Worker,可以通过调用 navigator.serviceWorker.unregister...实际应用,你可以接收消息的窗口中监听 message 事件,然后事件处理程序处理接收到的数据。 总结 文章涉及到的大部分名词解释来自 mdn。

    18110

    WWDC 2022:哪些是前端开发者要关注的信息?

    容器查询 响应式布局布局,经常使用媒体查询(Media Queries)检测视窗的宽高,实现自元素样式的自动调整。但是一些页面设计,元素的容器尺寸发生变化时,元素的样式也需要随之变化。...它使用与其他浏览器相同的 Web 标准:Push API 和 Notifications API 以及 Service Worker。 用户可以通过用户手势(例如单击按钮)来选择接收通知。...然后,系统会提示他们授予你的网站或应用发送通知的权限。用户能够通知中心查看和管理通知,并在通知设置自定义样式并关闭每个网站的通知。...Safari 的 Web Push 会使用和 Apple 推送相同的通知服务,该服务支持所有 Mac 和 iOS 设备上的本地推送。...与 Service Worker 一样,Shared Worker 支持在后台运行 JavaScript,但其生命周期略有不同。

    1.8K10

    信息提醒之Notification,兼容全部SDK-更新

    本篇博文中使用的创建Notification 是通过一个兼容全部SDK的工具类创建的,因为setLatestEventInfo方法API11不建议使用了,而且谷歌API23 (Android6.0...该对象由Android系统负责维护,因此应用程序关闭后,该对象仍然不会被释放。...---- 清除Notification后触发的善后工作 当我们将状态栏下拉下来之后都会看到屏幕的右上角有一个“清除“按钮或者图标,单击该按钮可以清除所有的Notification, 那么清除后,往往需要做一些善后的工作...这样Activity(一般onCreate方法)接收解即可 String msg = getIntent().getStringExtra("msg"); ......... ---- 永久存在的...FLAG_AUTO_CANCEL //通知栏上点击此通知后自动清除此通知 * * FLAG_NO_CLEAR //将flag设置为这个属性那么通知栏的那个清楚按钮就不会出现

    85120

    PWA 入门: 写个非常简单的 PWA 页面

    然后 HTML 文件当中引入配置: 添加 Service Worker Service Worker 在网页已经关闭的情况下还可以运行, 用来实现页面的缓存和离线, 后台通知等等功能。...借助 Service Worker, 可以注册完成安装 Service Worker 时, 抓取资源写入缓存: 调用 self.skipWaiting() 方法是为了页面更新的过程当中, 新的 Service...处理动态缓存 网页抓取资源的过程, Service Worker 可以捕获到 fetch 事件, 可以编写代码决定如何响应资源的请求: 真实的项目当中, 可以根据资源的类型, 站点的特点, 可以专门设计复杂的策略...Service Worker 通过调用 self.clients.claim() 取得页面的控制权, 这样之后打开页面都会使用版本更新的缓存。...更多 你还可以实现一个 App Shell, 可以用 Service Worker 实现后台通知等功能。

    2.8K50
    领券