开发PWA时自定义Service Worker与Webpack关联问题咨询

嘿，我之前在自定义Service Worker并整合Webpack的时候也踩过坑，下面是一套亲测有效的配置步骤，帮你把src目录下的自定义SW和Webpack关联起来：

1. 在Webpack配置中添加Service Worker入口 #

首先，你需要把自定义的Service Worker文件作为一个独立的入口添加到Webpack配置里，这样Webpack会单独打包它。假设你的SW文件是src/service-worker.js，修改webpack.config.js：

const path = require('path');

module.exports = {
  entry: {
    main: './src/index.js', // 你的主应用入口
    'service-worker': './src/service-worker.js' // 添加SW独立入口
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'), // 输出到项目dist目录
    publicPath: '/' // 关键：设置公共路径为根目录，保证SW的作用域覆盖整个应用
  }
};

2. 在主应用中注册Service Worker #

接下来，在你的主应用代码（比如src/index.js）里添加注册SW的逻辑，确保页面加载时能识别并注册你自定义的SW：

// 仅在支持Service Worker的浏览器环境下执行注册逻辑
if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      const registration = await navigator.serviceWorker.register('/service-worker.js');
      console.log('Service Worker注册成功:', registration.scope);
    } catch (error) {
      console.error('Service Worker注册失败:', error);
    }
  });
}

3. 处理Service Worker的资源缓存（可选但关键） #

如果你想让SW缓存Webpack打包后的资源，因为Webpack会给文件名添加哈希值，你可以选择两种方式维护缓存列表：

• 手动维护（适合小型项目）：直接在service-worker.js里列出需要缓存的资源路径：

const CACHE_NAME = 'my-app-cache-v1';
// 替换成你实际打包后的资源文件名
const ASSETS_TO_CACHE = [
  '/',
  '/main.js',
  '/styles.abc123.css'
];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => cache.addAll(ASSETS_TO_CACHE))
  );
});

• 自动生成资源清单（适合复杂项目）：使用webpack-manifest-plugin生成打包后的资源清单文件，然后在SW里读取这个清单来自动缓存资源，避免手动维护的麻烦。

4. 开发环境的注意事项 #

• 如果你使用Webpack Dev Server，建议禁用inline模式（inline模式注入的socket脚本可能干扰SW的正常运行），同时开启HTTPS（部分浏览器要求SW必须在HTTPS环境下运行，localhost除外）：

devServer: {
  inline: false,
  hot: true, // 保留热重载功能
  https: true
}

• 修改SW代码后，需要刷新页面两次才能让新SW生效（第一次安装新SW，第二次激活），也可以在SW的激活逻辑里添加跳过等待的代码，让新SW立即生效：

self.addEventListener('activate', (event) => {
  // 删除旧版本缓存
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.filter((cacheName) => cacheName !== CACHE_NAME)
          .map((cacheName) => caches.delete(cacheName))
      );
    })
  );
  // 跳过等待，立即激活新SW
  self.skipWaiting();
});

按照这些步骤配置后，Webpack就会正确打包你的自定义Service Worker，主应用也能成功注册它，你可以完全自主控制SW的缓存、拦截请求等核心逻辑啦！

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