注册Service Worker并请求用户授权,通过VAPID公钥安全订阅;2. 在service-worker.js中监听push事件显示通知,处理notificationclick跳转页面;3. 服务器使用web-push库和VAPID密钥对发送加密消息至订阅端点,实现后台推送,但需注意iOS仅PWA支持。

想让网页在关闭或后台时也能收到消息?关键在于Service Worker。它是个独立于页面的后台脚本,能帮你实现推送通知,即使用户没打开网站。
注册与获取用户授权
功能起点是注册Service Worker并获得用户许可。代码先检查浏览器支持情况,然后注册一个JS文件作为服务 worker。注册成功后,通过PushManager请求订阅权限,这里需要用到VAPID公钥来保证通信安全。用户第一次会看到授权弹窗,必须允许才能接收通知。如果被拒绝,最好引导用户去设置里手动开启。
- 用navigator.serviceWorker.register('/service-worker.js')启动注册
- 调用pushManager.subscribe()发起订阅,传入VAPID公钥
- 把生成的订阅信息发送到你的服务器保存,后续推送给这个用户就靠它了
Service Worker处理推送事件
真正干活的是service-worker.js这个文件。它监听两个核心事件:push和notificationclick。当服务器发来消息,push事件触发,你可以解析内容并调用showNotification显示通知。用户点击通知时,notificationclick事件会被捕获,这时能关闭通知并打开指定页面,比如跳转到新闻详情。
- 监听'push'事件,从event.data提取消息数据
- 使用registration.showNotification(title, options)弹出通知,可设置图标、文字等
- 监听'notificationclick',执行clients.openWindow(url)进行页面跳转
服务器端发送消息
浏览器这边准备好后,服务器要用之前保存的订阅信息发消息。借助像web-push这样的库,配合VAPID密钥对,就能向用户的订阅端点发送加密推送。消息送达后,即使应用不在前台,Service Worker也会被唤醒并展示通知。
立即学习“Java免费学习笔记(深入)”;
基本上就这些。注意iOS上的支持有限,只有PWA添加到主屏才可用,其他情况得考虑降级方案。










