PWA中Service Worker使用PeriodicSync请求自签HTTPS地址失败问题

现有部署架构 #

• 局域网设备层：ESP32内置搭载自签名证书的HTTPS服务，对外提供本地智能家居设备的状态查询接口
• 公网应用层：基于Vue开发的PWA应用部署在持有正规可信CA证书的公网HTTPS服务器上
• 前台跨域访问逻辑：PWA处于前台运行状态时，直接通过https://192.168.x.x 地址调用同局域网内ESP32的接口
• 现有临时兼容方案：用户在Chrome浏览器中单独访问ESP32的HTTPS地址，手动跳过NET::ERR_CERT_AUTHORITY_INVALID的不受信任证书警告完成授权后，前台PWA即可正常访问ESP32接口，该授权在浏览器重启、PWA版本更新后依然保持有效状态

功能实现与调试基础 #

• 核心需求：实现每日定时拉取ESP32设备状态，检测到设备状态异常时主动向用户推送通知
• 技术选型：采用PeriodicSync API实现后台定时任务能力，已在PWA的Service Worker中完成periodicsync事件监听，事件触发后通过原生fetch方法调用ESP32接口拉取设备数据

异常现象与问题定位 #

• 调试场景验证正常：通过chrome://inspect/#devices连接移动设备，手动模拟触发periodicsync事件时，接口调用流程完全正常，可成功获取ESP32返回的设备数据
• 系统自动触发场景异常：等待12-24小时由系统调度自动触发PeriodicSync事件时，fetch请求会抛出TypeError: Failed to fetch错误，请求完全无法建立连接
• 核心原因结论：该错误与自签名证书的授权范围直接相关——Chrome仅在PWA处于前台运行状态时，保留用户对该自签证书的临时授权，后台独立触发的Service Worker执行环境，不会继承该前台场景下的证书访问授权

已排除的不可行方案 #

• 通过修改浏览器启动参数的方式关闭站点安全校验
• 在ESP32设备上部署付费的长期可信公开CA证书

核心诉求 #

寻找可落地的实现方案，要么实现Service Worker执行环境信任该ESP32使用的自签名证书，要么让Service Worker直接继承PWA已经获得的证书访问权限。

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