调用navigator.serviceWorker.getRegistration().then得到undefined报错求助

错误原因分析 #

• 第一个报错Cannot read property 'showNotification' of undefined的核心原因是：你运行代码的当前页面没有注册过Service Worker。navigator.serviceWorker.getRegistration()方法在当前站点没有活跃的Service Worker注册记录时，返回的Promise会resolve为undefined，此时你调用reg.showNotification自然会抛出类型错误。视频中的代码默认运行在已经完成Service Worker注册的站点环境，你直接在空白新标签页（如chrome://newtab、about:blank）运行不满足前置条件。
• 第二个报错this.showNotification is not a function是语法逻辑错误：箭头函数的this继承自外层作用域，你在全局作用域下运行代码时this指向Window对象，而showNotification是ServiceWorkerRegistration实例的专属方法，不存在于Window对象上，同时你此时的reg本身还是undefined，即使把this换成reg也会报错。
• 另外你可能还遗漏了通知权限申请步骤：如果用户没有授权站点发送通知，Notification.permission的值为default而非granted，代码里的判断分支根本不会执行，需要先调用Notification.requestPermission()主动申请通知权限。

正确运行前置条件 #

• 运行代码的页面必须部署在HTTPS环境下，本地开发时可使用localhost（Service Worker对localhost做了HTTP豁免），普通HTTP站点无法使用Service Worker相关API。
• 页面必须先完成Service Worker注册，你可以写一个最简单的空SW文件，先在页面中调用navigator.serviceWorker.register('sw.js')完成注册后再测试通知代码。
• 提前获取用户的通知授权。

测试示例代码 #

// 页面初始化时先注册SW、申请权限
if ('serviceWorker' in navigator && 'Notification' in window) {
  window.addEventListener('load', async () => {
    // 注册SW，sw.js只需要是站点可访问的空js文件即可
    const reg = await navigator.serviceWorker.register('/sw.js')
    console.log('SW注册成功', reg)
    // 申请通知权限
    const permission = await Notification.requestPermission()
    if (permission === 'granted') {
      reg.showNotification('测试通知')
    }
  })
}

Push API入门学习资料推荐 #

• MDN Push API 官方教程：从基础概念、运行条件到完整的前后端实现示例都有覆盖，内容权威且门槛低，适合新手入门
• 谷歌开发者Web Push系列指南：包含可直接运行的Demo代码，覆盖Service Worker注册、推送订阅、服务端消息发送全流程，还有常见问题排查方案
• web-push 开源工具库文档：提供了前后端封装好的推送实现方法，实际开发中可以直接调用，减少基础逻辑编写成本

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