CRA部署Netlify后navigator.serviceWorker.ready未触发的推送通知问题

问题核心原因 #

你遇到的是Create React App生产环境和Netlify部署规则下的Service Worker注册异常问题，localhost开发环境不受HTTPS、构建规则、重定向规则约束所以能正常运行，部署后触发了限制导致Service Worker从未完成注册，因此navigator.serviceWorker.ready永远处于pending状态不会resolve。

可直接落地的解决方案 #

• 确认你在生产环境显式注册了Service Worker：CRA默认的非PWA模板仅会打包Service Worker文件，不会自动执行注册逻辑。检查你的src/index.js代码，移除注册逻辑的开发环境判断，确保生产环境也执行注册：

// src/index.js 示例
import * as serviceWorkerRegistration from './serviceWorkerRegistration';

// 不要加 if (process.env.NODE_ENV === 'development') 的限制
serviceWorkerRegistration.register({
  onUpdate: registration => console.log('SW更新', registration)
});

• 确认生产构建生成了Service Worker文件：如果你的CRA项目没有启用PWA支持，执行npm install cra-template-pwa，然后按照PWA模板配置补齐service-worker.js和serviceWorkerRegistration.js相关代码，确保npm run build后build目录下存在service-worker.js文件。
• 排除Netlify重定向规则拦截Service Worker文件：大部分CRA项目部署Netlify时会配置SPA路由重定向规则/* /index.html 200，该规则会拦截service-worker.js的请求返回HTML内容导致注册失败。在你的public/_redirects文件最顶部添加一行规则放行Service Worker请求：

/service-worker.js /service-worker.js 200
/* /index.html 200

• 检查Netlify站点HTTPS配置：Service Worker仅可在HTTPS环境（localhost除外）下运行，进入Netlify站点控制台的「域设置」-「HTTPS」板块，确认「强制HTTPS」开关处于开启状态。
• 添加注册错误日志排查异常：在Service Worker注册逻辑中添加错误捕获，确认是否有其他运行时错误导致注册中断：

if ('serviceWorker' in navigator) {
  serviceWorkerRegistration.register()
    .then(reg => console.log('SW注册成功', reg))
    .catch(err => console.error('SW注册失败', err))
}

• 调用函数前先申请通知权限：生产环境下通知权限默认是拒绝状态，你需要在调用configurePushSub函数前先向用户申请通知权限，避免后续流程被权限拦截中断。

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