Angular 7集成PWA Service Worker遇404错误及Manifest配置疑问

关于Manifest中start_url使用服务器URL的问题 #

首先明确一点：不建议直接将start_url设置为外部服务器URL，这也是你本地环境出现404的核心原因之一。

Manifest的start_url作用是定义PWA被用户从桌面/启动器打开时加载的初始路径，它需要指向你的Angular应用本身的资源路径——因为PWA本质是要依托本地缓存的应用资源运行，而非直接跳转到外部服务器页面。如果硬设为服务器URL，本地环境下你的dev server并没有对应这个外部URL的资源，自然会返回404。

正确的做法是：

• 使用相对路径作为start_url，比如"/"（对应Angular应用的根路径），或者匹配你的base href配置（如果项目设置了自定义base href）。
• 如果需要打开后跳转到服务器的某个页面，可以在Angular应用的初始路由中添加重定向逻辑，通过应用内的HTTP请求或路由跳转实现，而非直接修改start_url。

关于Service Worker的404错误排查与解决 #

你遇到的sw.js/sw-app.js 404，大概率是Angular构建流程没有正确打包这些文件，或者注册路径有误，以下是具体排查步骤：

1. 确认文件被纳入Angular的资源打包列表 #

Angular默认只会把src/assets目录和部分指定文件打包到dist目录。你需要修改angular.json中的assets配置，确保sw.js和sw-app.js被包含：

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "options": {
          "assets": [
            "src/favicon.ico",
            "src/assets",
            "src/sw.js", // 添加这行
            "src/sw-app.js" // 添加这行
          ]
        }
      }
    }
  }
}

修改后重新执行构建命令（ng build或ng build --prod），检查dist目录下是否存在这两个文件。

2. 检查Service Worker的注册路径是否正确 #

在sw-app.js中注册sw.js时，要确保路径是相对于应用根目录的。比如：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js') // 这里用绝对路径（相对于域名根）
      .then(registration => {
        console.log('SW registered: ', registration);
      })
      .catch(registrationError => {
        console.log('SW registration failed: ', registrationError);
      });
  });
}

如果你的Angular应用部署在子路径下（比如https://example.com/my-app/），需要把注册路径改成'/my-app/sw.js'，或者使用相对路径'./sw.js'（但前者更可靠）。

3. 本地开发环境的特殊注意事项 #

Angular的ng serve默认在开发模式下不会启用Service Worker，甚至可能不会正确处理SW文件。如果你要在本地测试PWA功能，需要：

• 使用生产模式启动服务器：ng serve --prod
• 或者安装@angular/pwa插件（如果还没装），它会自动配置好Service Worker相关的构建和注册逻辑：

ng add @angular/pwa

这个插件会帮你生成正确的sw模板、更新angular.json配置，避免手动配置出错。

4. 检查文件名和路径拼写 #

确认你的sw.js和sw-app.js文件名大小写正确（比如Linux服务器区分大小写，本地Windows不区分，但部署后可能出问题），且index.html中引入sw-app.js的路径正确：

<script src="sw-app.js"></script>

如果构建后sw-app.js在dist根目录，这个路径是正确的；如果在子目录，要对应调整路径。

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