Web Push开发中Service Worker收推送无通知且报self.showLocalNotificationWrap错误

控制台报的self.showLocalNotificationWrap is not a function并不是你代码里主动写的逻辑出了问题，本质是Service Worker的全局作用域方法查找路径完全失效，才会报一个你从来没定义过的函数不存在的错误：

• 报错里提到的showNotificationWrap是很多第三方Web Push SDK的内部兼容封装，用来包裹原生showNotificationAPI做降级处理。如果之前复制过网上的示例代码，把调用这个SDK封装方法的逻辑留在了Service Worker文件里，但根本没有引入对应SDK的代码，就会抛出这个“函数不存在”的报错——你没定义过这个函数是正常的，它本来就不该出现在你自己写的SW代码里。
• 结合你贴出的现有代码，一共有3处独立的逻辑错误叠加，最终导致推送事件虽然能被接收，但通知完全无法弹出：
  • 你在push事件回调里用self.showLocalNotificationSW(...)的方式调用自定义函数，但showLocalNotificationSW是脚本顶层定义的局部常量，根本没有绑定到Service Worker的全局对象self上，变量查找路径偏移后，就会去匹配同命名空间下不存在的SDK封装方法，直接触发类型错误。
  • push事件处理逻辑里重复读取了event.data：event.data是只读的流对象，第一次调用event.data.text()读取内容后流就会被耗尽，第二次再调用拿到的是空值，就算前面的调用路径没出错，解析出来的推送标题、正文也会是无效内容。
  • 你写的showLocalNotificationSW函数内部，引用了不在当前作用域的options变量：这个options是push事件回调里定义的局部变量，从来没有作为参数传进函数里，就算前面的调用路径全对，执行到swRegistration.showNotification(title, options)这行时也会因为options未定义抛错。

1. 修正push事件里的数据流读取逻辑
   不要对同一个event.data对象重复调用text()，第一次读取拿到字符串后直接复用这个变量做内容解析即可，同时用event.waitUntil()包裹异步的通知弹出逻辑，避免Service Worker在通知弹出来之前就被浏览器回收终止。
   修复后的push事件核心代码：

   self.addEventListener('push', (event) => {
       // 只调用一次text()，持久化读取到的推送内容
       const pushContent = event.data?.text() ?? '';
       console.log("收到推送内容：", pushContent);
       
       let title, body;
       try {
         const parsedData = JSON.parse(pushContent);
         title = parsedData.title;
         body = parsedData.body;
       } catch (e) {
         title = "untitled";
         body = pushContent;
       }
   
       // 构造通知配置项，不需要把标题塞到options里
       const notificationOptions = {
         body: body, 
         icon: '/favicon.ico',
         // 可补充配置通知跳转链接、振动模式等自定义属性
         data: { targetUrl: self.location.origin }
       }
   
       // 用event.waitUntil()保证异步通知逻辑执行完成后再终止SW
       event.waitUntil(
         self.registration.showNotification(title, notificationOptions)
       )
   })
   

2. 删除冗余的错误封装函数
   你写的showLocalNotificationSW存在两处硬伤，完全没有保留的必要：

   • 函数入参只接收了title、body、swRegistration，但内部引用的options从来没有作为入参传入函数作用域，会直接触发options is not defined的报错
   • ServiceWorkerRegistration.showNotification()本身就是浏览器提供的原生API，不需要额外包一层自定义函数，二次封装反而容易引入作用域查找的问题。
     直接把这段冗余的封装代码完全删掉即可。

3. 补充基础的环境校验
   为了避免在不支持通知的环境下反复抛出无意义的报错，可以在调用通知方法前加简单判断：

   if (!('Notification' in self)) {
     console.log("当前环境不支持Web通知，终止推送处理");
     return;
   }
   if (Notification.permission !== 'granted') {
     console.log("用户未授予通知权限，终止推送处理");
     return;
   }
   

• 确认/favicon.ico的访问路径是可公开访问的，不存在404或者跨域限制，部分浏览器会因为通知图标加载失败，静默拦截通知弹出。
• 确认站点的浏览器通知权限没有被设为“静默”或者“禁止”，系统层面的通知总开关也要保持开启。
• 调试时先清除旧的Service Worker缓存、强制重新注册SW后再测试推送，避免旧版SW代码残留在缓存里，继续调用已经删除的旧方法触发报错。

内容的提问来源于stack exchange，提问作者Rag