如何在本地配合Angular ng-serve运行Service Worker？遇部署安装错误#961

Service Worker部署出现问题，安装时显示状态错误#961。当前尝试在4200端口通过ng serve运行Angular项目，希望同时启用Service Worker，相关代码如下：

运行命令：

ng serve

项目index.html代码：

<head>
  <meta charset="utf-8">
  <title>mPokket| Admin</title>
  <base href="/v2">
  <!-- <base href="./"> -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <style>:root { --recon-theme-color-primary: #0EA3FF; --recon-theme-color-secondary: #767676; }</style>
  <link rel="manifest" href="manifest.webmanifest">
  <meta name="theme-color" content="#1976d2">
</head>
<body>
  <app-root></app-root>
  <script>
    if ("serviceWorker" in navigator) {
      navigator.serviceWorker
              .register("/ngsw-worker.js")
              .then(serviceWorker => {
                console.log("Service Worker registered: ", serviceWorker);
              })
              .catch(error => {
                console.error("Error registering the Service Worker: ", error);
              });
    }
  </script>
  <noscript>Please enable JavaScript to continue using this application.</noscript>
</body>
</html>

解决步骤 #

• 修正Service Worker注册路径
  你的base href设置为/v2，但注册路径写的是/ngsw-worker.js，浏览器会去根目录找文件，实际文件应该在/v2/下。修改注册代码：

  navigator.serviceWorker.register("/v2/ngsw-worker.js")
  

  或者用动态路径避免硬编码：

  navigator.serviceWorker.register(`${document.baseURI}ngsw-worker.js`)
  

• 确认Angular PWA配置
  确保已通过ng add @angular/pwa添加PWA支持，angular.json中build选项已启用serviceWorker：

  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "serviceWorker": true,
            "ngswConfigPath": "ngsw-config.json"
          }
        }
      }
    }
  }
  

• 用生产模式启动ng serve
  默认ng serve不支持Service Worker，需要加生产配置参数：

  ng serve --configuration production
  

• 清除浏览器缓存与旧Service Worker
  打开浏览器开发者工具（F12）→ Application → Service Workers，点击Unregister清除旧注册，同时清除缓存后重新加载页面。

• 验证文件存在性
  运行ng build --prod后，检查dist/你的项目名/v2/目录下是否存在ngsw-worker.js，确保构建产物路径正确。

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