Capacitor加载Service Worker报错net::ERR_CONNECTION_REFUSED求助

问题根源 #

Capacitor Android应用的WebView加载本地资源使用file://协议，而非网页端的https://localhost，直接使用绝对路径/service-worker.js会导致请求指向不存在的localhost服务，从而触发net::ERR_CONNECTION_REFUSED错误。

解决步骤 #

1. 修正Service Worker注册路径 #

将注册代码中的绝对路径改为适配本地文件系统的路径，可通过两种方式实现：

方式一：使用相对路径（推荐，若SW文件与index.html同目录）

<script>
if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("./service-worker.js")
    .then((registration) => {
      console.log("Service Worker registered with scope:", registration.scope);
    })
    .catch((error) => {
      console.log("Service Worker registration failed:", error);
    });
}
</script>

方式二：拼接基准URL适配不同环境

<script>
if ("serviceWorker" in navigator) {
  const baseUrl = window.location.origin;
  navigator.serviceWorker
    .register(`${baseUrl}/service-worker.js`)
    .then((registration) => {
      console.log("Service Worker registered with scope:", registration.scope);
    })
    .catch((error) => {
      console.log("Service Worker registration failed:", error);
    });
}
</script>

2. 确保Service Worker文件同步到Android项目 #

• 确认service-worker.js位于你的Web项目根目录（与index.html同级）
• 执行命令同步资源到Android项目：

  npx cap sync android
  

  该命令会自动将Web资源复制到Android项目的app/src/main/assets/public目录下，确保Service Worker文件能被WebView访问。

3. 配置Capacitor Android权限与WebView设置 #

在capacitor.config.ts中添加如下配置，允许WebView访问本地文件：

export default defineConfig({
  android: {
    allowMixedContent: true,
    webViewSettings: {
      allowFileAccess: true,
      allowContentAccess: true
    }
  }
});

4. 调整内容安全策略（CSP） #

在index.html的<head>中添加或修改CSP meta标签，允许加载本地Service Worker脚本：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">

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