iOS Safari中NextJS PWA推送通知失效问题求助
iOS Safari 17.4 PWA推送通知不显示,sw.js中showNotification无响应
我开发了一个基于NextJS的PWA应用,已通过VAPID和web-push(Node.js)完成配置。推送通知在Android、桌面端网页、macOS Safari上都能正常弹出,但在iOS Safari 17.4中完全无法显示,测试两台iPhone设备均存在此问题,且已将PWA添加至主屏。
奇怪的是,推送事件可正常触发,Service Worker(sw.js)运行也无异常,但调用self.registration.showNotification时就是无法弹出通知。尝试多种方法仍未解决,求帮忙排查。
代码配置详情
next.config.js
const isDev = process.env.NODE_ENV === 'development' const withPWA = require('next-pwa')( { dest: "public", sw: "sw.js", register: true, skipWaiting: true, disable: isDev }); const nextConfig = { reactStrictMode: true, }; module.exports = withPWA(nextConfig);
VAPID配置(Node.js端)
webpush.setVapidDetails( "mailto:myemail@mydomain.so", vapidKeys.publicKey, vapidKeys.privateKey );
sw.js代码
self.addEventListener("push", async (e) => { try { const { message, body, icon } = JSON.parse(e.data.text()); // 通知主线程播放声音 const clients = await self.clients.matchAll(); clients.forEach(client => { client.postMessage({ type: 'PLAY_SOUND' }); }); e.waitUntil( self.registration.showNotification(message) ); } catch (error) { // 向主线程发送错误日志 self.clients.matchAll().then(clients => { clients.forEach(client => { client.postMessage({ type: 'ERROR', message: `Error in push event: ${error.message}` }); }); }); } }); self.addEventListener("notificationclick", (event) => { event.preventDefault() event.notification.close(); event.waitUntil( self.clients.matchAll({ type: "window", }).then((clientList) => { for (const client of clientList) { if (client.url === "/" && "focus" in client) return client.focus(); } if (clients.openWindow) return clients.openWindow("/"); }) ); });
调试情况
已在iOS Safari上下文调试,确认sw.js加载正常,控制台可输出日志,自定义调试事件也能触发,但问题疑似集中在showNotification方法本身。
内容的提问来源于stack exchange,提问作者Andrew P
相关产品推荐
相关产品推荐

