webpack项目中注册Service Worker时报404错误如何解决

问题根本原因 #

报错404的核心是你启动的开发服务器在根目录下找不到sw.js文件，webpack默认只会处理你entry配置里关联的模块，单独放在项目里的sw.js没有被包含到构建产物里，自然无法被访问到。

报错信息原文：

A bad HTTP response code (404) was received when fetching the script.
index.js?15bb:21 Service Worker failed to install TypeError: Failed to register a ServiceWorker for scope ('http://localhost:8080/') with script ('http://localhost:8080/sw.js'): A bad HTTP response code (404) was received when fetching the script.

具体解决步骤 #

方案：使用copy-webpack-plugin复制sw.js到构建目录 #

这是最适合基础webpack项目的方案，不需要改现有业务逻辑：

• 第一步：安装依赖

  npm install copy-webpack-plugin --save-dev
  

• 第二步：修改webpack.config.js配置，引入并配置插件
  首先在文件头部引入插件和路径处理模块：

  const path = require('path')
  const CopyWebpackPlugin = require('copy-webpack-plugin')
  

  然后在配置的plugins数组中添加插件实例，注意from路径要和你项目中sw.js的实际存放位置一致：

  module.exports = {
    // 其他原有配置...
    plugins: [
      // 其他原有插件...
      new CopyWebpackPlugin({
        patterns: [
          // 示例是sw.js放在src根目录的情况，按需调整路径
          { from: path.resolve(__dirname, 'src/sw.js'), to: 'sw.js' }
        ]
      })
    ]
  }
  

• 第三步：重启开发服务器，重新访问即可。

其他注意事项 #

• 不要在业务代码中用import './sw.js'的方式引入Service Worker文件，webpack会把它打包进普通业务bundle，不会单独生成sw.js文件，注册SW的代码保持你原来的navigator.serviceWorker.register('/sw.js')即可。
• 你可以直接在浏览器地址栏输入http://localhost:8080/sw.js验证文件是否可访问，能正常访问就说明配置生效了。
• 如果是webpack5+的项目，确认webpack.config.js中devServer的static配置指向的是构建输出目录，默认配置下不需要额外修改。

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