如何处理网站和 PWA 中的 Web 推送通知

最新推荐文章于 2025-04-01 22:50:48 发布
最新推荐文章于 2025-04-01 22:50:48 发布
阅读量1.4k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 运维 前端 文章标签： 前端 服务器 运维
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wlcs_6305/article/details/122722684
本文详细介绍了如何在网站和PWA中实现Web推送通知，涵盖了服务工作者、订阅管理、用户交互和处理到期及续订。通过服务工作者的Push API和Notification API，结合VAPID密钥，实现浏览器级别的推送服务。同时强调了用户体验和订阅时机的重要性，以及应对推送订阅变化的处理策略。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在这里插入图片描述
推送通知在现代网络上很常见。即使您的网站实际上并未打开，它们也能让您及时向用户传达信息。用户的浏览器处理传入的推送事件并使用系统 UI 界面（如 Windows 操作中心和 Android 锁屏）显示通知。

在您的网站或 PWA中实施 Web Push需要结合两个不同的浏览器 API。负责订阅和接收通知的代码使用service workers的Push API组件。此代码在后台持续运行，并在需要处理新通知时由浏览器调用。

当接收到一个事件时，服务工作者应该使用通知 API来实际显示通知。这会通过操作系统级界面创建视觉警报。

这是让 Web Push 在您的网站上运行的完整指南。我们假设您已经拥有一个服务器端组件，可以注册推送订阅并发送您的警报。

服务工作者

让我们从服务工作者开始。服务工作者有多个角色——他们可以缓存数据以供离线使用、运行定期后台同步以及充当通知处理程序。服务工作者使用事件驱动的架构。一旦被站点注册，用户的浏览器将在其订阅的事件生成时在后台调用服务工作者。
对于 Web Push，需要一个核心事件：push. 这会接收一个PushEvent对象，该对象允许您访问从服务器推送的有效负载。

self.addEv
了解本专栏 订阅专栏 解锁全文 超级会员免费看
pwa-FCM:使用FCM的渐进式Web App推送通知
05-01
STEPS TO FOLLOW: SERVER SIDE: 1) Create a cloud function and deploy it on firebase CLIENT SIDE: 1)Ask for permission using requestPermission method 2)Initialize two listeners in service worker i)push listener ii)notificationClick (only if you want to implement click action) 3) Use this fetch request to send notification fetch("yourFunctionUrlHere", { method: 'PO
pwa-weather：最小天气PWA：脱机，推送通知和Web支付
02-05
WillRain.today是一个简单的渐进式Web应用程序，旨在为娱乐和试验最新的Web技术而创建，例如： 用于存储数据本地化的IndexDB 去做 凭据管理API-用户可以登录/注销 BackgroundSync-在后台同步天气数据（periodicSync...
PWA之 推送与通知
达拉崩巴斑得贝迪卜多比鲁翁_
06-23 805
PWA使用sw模拟推送
pwa集成消息推送与提醒（Push & Notification）
farme_guan的博客
12-23 1583
本文介绍了pwa的消息推送和订阅
PWA 渐进式网络应用 - 4 - 推送通知
mjzhang1993的博客
03-13 2171
PWA 渐进式网络应用 - 4 - 推送通知 说明 推送通知可以很好的与用户进行互动，尤其是当他们关闭了标签页或访问其他网页的时候，体验类似于原生应用，要给用户发送通知，需要首先通过用户授权 Notification h5 中用来给用户发送通知 push API 获取服务器推送，然后通过 Service Workers 调用 Notification 发送通知 发送通...
PWA(Progressive Web App)入门系列：Push
weixin_33948416的博客
05-29 1358
前言 很多时候，原生应用会通过一些消息推送来唤起用户的关注，增加驻留率。网页该怎么做呢？有没有类似原生应用的推送机制？推送功能又能玩出什么花样呢？ Push API Push API 给与了 Web 应用程序接收从服务器发出的推送消息的能力，无论 Web 应用程序是否在用户设备前台，甚至刚加载完成。这样，开发人员就可以向用户投放异步通知和更新，从而让用户能更及时地获取新内容。 对 Web 应用来...
【PWA学习与实践】(5)在Web中进行服务端消息推送
weixin_34234829的博客
04-13 446
《PWA学习与实践》系列文章已整理至gitbook - PWA学习手册，文字内容已同步至learning-pwa-ebook。转载请注明作者与出处。 本文是《PWA学习与实践》系列的第五篇文章。文中的代码都可以在learning-pwa的push分支上找到（git clone后注意切换到push分支）。 PWA作为时下最火热的技术概念之一，对提升Web应用的安全、性能和体验有着很大的意义，非常...
Vue.js结合PWA和OneSignal实现Web推送通知教程
- 可联系性：可以像原生应用一样发送推送通知。 - 网络独立性：能够在没有网络的环境下运行。 - 可发现性：可以通过搜索引擎进行搜索，并且能通过URL进行分享。 - 可重新进入性：能够从之前的活动点继续体验。 - 可...
pushkit：设置独立的Web推送通知所需的所有组件:balloon:
02-05
在Node.JS Web应用程序中启用Web推送通知所需的一切。 使用浏览器的传递通道发送推送通知（免费），这意味着没有额外的第三方服务（浏览器自己的传递通道除外）。 与渐进式Web应用程序（PWA）一起使用。 :globe_...
【PWA学习】4. 使用 Push API 实现消息推送
小贤笔记
01-10 2424
引言 在接下来的内容里，我们会探究 PWA 中的另一个重要功能——消息推送与提醒(Push & Notification)。这个能力让我们可以从服务端向用户推送各类消息并引导用户触发相应交互 Web Push 效果 Push API 和 Notification API 其实是两个独立的技术，完全可以分开使用；不过Push API 和 Notification API...
push-notifications-for-pwa:处理渐进式Web应用程序的推送通知
04-17
这是一个用引导的项目。 入门 首先，运行开发服务器： npm run dev # or yarn dev 用浏览器打开以查看结果。 您可以通过修改pages/index.js来开始编辑页面。 页面在您编辑文件时自动更新。 学到更多 要了解有关Next.js的更多信息，请查看以下资源： -了解Next.js功能和API。 交互式Next.js教程。 您可以查看-欢迎您提供反馈和意见！ 在Vercel上部署 部署Next.js应用程序的最简单方法是使用Next.js创建者提供的。 请查看我们的以获取更多详细信息。
PWA-Push:使用推送通知和脱机浏览构建渐进式Web应用程序
04-30
PWA-推 使用CREATE-REACT-APP建立您的单页REACT.JS渐进式Web应用程序 安装Node.js- //nodejs.org/en/download/ 安装代码编辑器-我们建议使用Visual Studio Code，它是Node.js项目的绝佳免费工具-https: 。 VS Code具有内置的Powershell，您可以在其中执行cmd命令。 创建一个新的工作文件夹（如果您想编辑/运行/调试，可以在VS Code中打开它） 仅在要生成自己的React.JS应用程序时，才执行步骤4-6。 如果您直接从PWA文件夹中的存储库中同步代码，则可以跳过这些代码。 使用cmd中的Node Package Manager（npm）安装Create-React-App npm install -g create-react-app 重新启动cmd并运行create-re
【PWA】web推送技术_registration
2301_82243710的博客
04-30 1044
前端字节跳动真题解析开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】| | || | |: : :| | |接下来，我们就需要简单的来看一下使用 Web Push 的基本原则。#### Push 基本原则1. 首先，server 发送的 push msg 必须被加密，因为这防止了中间的 push service 去查看我们的推送的信息。
Progressive Web Apps(PWA)核心技术-Push Notifications
待花开花谢的博客
03-19 1159
PWA的推送是基于Notifications API 和 Push API，Notifications API让应用程序向用户显示系统通知。 Push API允许service worker处理来自服务器的推送消息，即使应用程序处于不活动状态。 推送通知术语 通知 - 在应用的普通用户界面（即浏览器）之外向用户显示的消息， 推送消息 - 从服务器发送到客户端的消息 推送通知 - 为响应推送消...
PWA系列 - Web Push 技术
weixin_33885676的博客
07-10 553
基本概念 （1）webapp 网络应用，是指使用web技术实现的应用程序，在web浏览器或其它web运行环境的上下文中执行。 （2）application server 网络应用的服务器，是指webapp的服务器端。 （3）push message 推送消息，是指application server发送给webapp的消息。application s...
PWA 进阶教程（二）： 如何在 PWA 中实现推送通知
最新发布
乐闻世界
04-01 808
在现代互联网应用中，推送通知是提升用户参与度和互动性的关键功能之一。对于进阶的网页应用（PWA），推送通知尤为重要，因为它可以让应用保持用户的关注，即使应用未被打开。本文将详细讲解如何在PWA中实现推送通知。在开始之前，先简要介绍一下PWA。Progressive Web Apps（PWA）是一种能在网页和原生应用之间架起桥梁的技术，使得网页应用能够拥有类似原生应用的用户体验。响应式设计能够离线使用可安装到设备主屏幕提供推送通知通过本文的介绍，我们详细了解了如何在 PWA 中实现推送通知功能。
Web 推送技术
weixin_34216196的博客
01-08 534
伴随着今年 Google I/O 大会的召开，一个很火的概念--Progressive Web Apps 诞生了。这代表着我们 web 端有了和原生 APP 媲美的能力。但是，有一个很重要的痛点，web 一直不能使用消息推送，虽然，后面提出了 Notification API，但这需要网页持续打开，这对于常规 APP 实现的推送，根本就不...
PWA 推送实践
05-06 849
PWA 推送实践 最近公司内录任务的系统总是忘记录任务，而那个系统又没有通知，所以想要实现一个浏览器的通知功能，免得自己忘记录入任务。 前端实现通知的几种方式 想要实现通知，我们就需要有个客户端，对于前端同学来说，我们的客户端就是浏览器，我们每天基本上都是长开浏览器，所以用浏览器做个通知效果更好。既然是浏览器，在PWA 出现之前我们就只有 chrome 插件可以用，现在既然有了 PWA，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

mikes zhang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值