PWA推送通知在移动端为啥注册失败？
我在开发一个PWA应用，想用Push API实现消息推送，但在安卓手机的Chrome上一直注册失败。本地localhost测试没问题，但部署到HTTPS线上环境后，调用registration.pushManager.subscribe()就报错。
已经确认service worker注册成功，也申请了notification权限，但还是不行。这是我的订阅代码：
navigator.serviceWorker.ready.then(reg => {
reg.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
}).then(sub => console.log('订阅成功', sub))
.catch(err => console.error('订阅失败', err));
});错误信息是“DOMException: Registration failed – no sender id provided”，这跟Firebase有关吗？我是不是漏了什么配置？
- 2
回答
108浏览
React PWA推送通知订阅后无法收到消息怎么办？
我按照文档给React PWA添加推送通知功能，用户订阅成功后一直没收到测试消息。服务端说推送成功了，但手机和浏览器都没反应，这是哪里出问题了？ 我的订阅代码是这样的： async function ...
- 2
回答
220浏览
PWA中Push API收不到推送消息是怎么回事？
我在做PWA的推送功能，已经成功注册了service worker，也拿到了用户的订阅信息，但调用后端发送推送后，手机上完全没反应。 我试过在Chrome DevTools里手动触发push事件，能收...
- 1
回答
25浏览
PWA推送通知在iOS上为啥不生效？
我用Push API做了个PWA，安卓上能正常收推送，但iOS Safari完全没反应，是不是iOS根本不支持？ 我已经注册了service worker，也调用了Notification.reque...
- 1
回答
34浏览
PWA消息推送注册时提示”无效的VAPID密钥”怎么办？
我在Vue项目里集成PWA推送功能，按照教程用firebase-messaging初始化后，调用navigator.serviceWorker.register一直报错"invalid VAPID k...
- 2
回答
68浏览
为什么我的PWA推送通知无法在后台收到消息？
我按照文档配置了PWA的Push API，能在前台收到通知，但页面关闭后就完全没反应了。服务端用的是Node.js发送POST请求，客户端订阅也成功获取了endpoint，这是哪里出问题了？ 尝试过在...
- 2
回答
69浏览
移动端PWA通知栏内容显示不全，如何自适应不同屏幕？
我在用Vue开发PWA时遇到了个问题，手机端显示的通知栏内容总被截断，特别是横屏时文字直接溢出了。之前用媒体查询调整过notification的样式，但效果不稳定。 比如我写了这个触发通知的组件： 发...
- 1
回答
18浏览
PWA后台同步注册失败是怎么回事？
我在尝试给PWA加上后台同步功能，但调用register()时一直报错，说“Background Sync is not supported”。明明我是在本地localhost下测试的，Chrome也...
- 2
回答
82浏览
PWA离线页面样式加载失败怎么办？
我在开发PWA时遇到了离线页面样式丢失的问题，明明注册了service worker并缓存了html和js文件，但离线时CSS样式完全没应用，刷新后又能正常显示了。这是怎么回事？ 我尝试在servic...
- 1
回答
24浏览
PWA中fetch拦截不生效是怎么回事？
我在写一个PWA应用，想用Service Worker拦截网络请求做缓存，但发现fetch事件根本没触发。注册了SW也成功了，但页面请求还是直接走网络，没进self.addEventListener(...
- 2
回答
24浏览
PWA 的 Background Sync 在 iOS 上为啥不生效？
我用 PWA 做了个待办事项应用，用户提交任务时如果网络不好，就注册了 background sync 想等网络恢复再同步。在安卓 Chrome 上跑得好好的，但一到 iOS Safari 就完全没反...
你提到已经确认service worker注册成功，并且申请了notification权限，这都是正确的步骤。接下来检查一下几点：
1. 确保你的VAPID公钥是正确的，并且是从同一个源生成的。生成VAPID密钥对时，确保保存好公钥和私钥。
2. 在调用
subscribe方法时，确保applicationServerKey参数正确无误。你当前的urlBase64ToUint8Array函数应该没问题，但最好再检查一遍这个转换函数。这里有个小建议，可以尝试简化你的代码，看看是否能解决问题。你可以先去掉
userVisibleOnly参数，虽然它是推荐的，但在某些情况下可能引起问题。试试看这个简化版的代码：
如果问题依然存在，可能是服务器端配置出了问题，确保你的服务器能够正确处理推送请求，并且VAPID私钥配置正确。
希望这些建议能帮到你。如果还有问题，记得检查浏览器的控制台日志，有时候会有更多详细的错误信息。
具体来说，
applicationServerKey是你提供的VAPID公钥，但Chrome期望你在manifest.json中提供一个gcm_sender_id字段。这个字段实际上是指向Google FCM的服务ID。默认情况下，Chrome使用的是Google的公共gcm_sender_id，但在某些情况下，你需要显式地指定它。以下是解决这个问题的步骤：
1. 检查manifest.json文件：
在你的PWA项目的manifest.json文件中添加或确认
gcm_sender_id字段。如果你没有使用Firebase，可以使用Google的公共gcm_sender_id，即103953800507。具体修改如下：
2. 确保VAPID密钥正确：
确保你在代码中使用的VAPID公钥是正确的，并且已经生成了对应的私钥用于服务器端发送通知。VAPID密钥的生成和使用是双向验证的一部分，确保前后端的一致性。
3. 重新加载和测试：
修改完manifest.json后，清理浏览器缓存并重新加载你的PWA应用。然后再次尝试注册推送通知，看看问题是否解决。
4. 调试和日志：
如果问题依旧存在，仔细检查浏览器控制台的详细错误信息。有时候错误信息会提供更多线索。此外，确保你的service worker脚本被正确地更新和激活，可以通过注册service worker时的日志来确认这一点。
通过这些步骤，你应该能够解决注册失败的问题。需要注意的是，PWA推送通知涉及到多个组件和配置项，任何一个环节出问题都可能导致注册失败。希望这些信息对你有帮助。