非create-react-app创建的React 15.1项目能否添加Service Worker？

当然可以。Service Worker是浏览器提供的Web API，和React版本、项目初始化方式没有强绑定，只要目标浏览器支持（除IE外的现代浏览器均支持），就能完成集成。以下是具体实施指南，同时附上注册失败的常见排查方向：

一、前提确认 #

• 开发环境可直接用localhost测试（浏览器允许本地环境跳过HTTPS限制），生产环境必须部署在HTTPS服务上
• Node.js 8虽已停止维护，但只要能正常构建项目，就不影响Service Worker的集成

二、创建Service Worker核心文件 #

在项目的静态资源根目录（如public/或构建输出的dist/目录）新建sw.js，基础示例如下：

// sw.js
// 安装阶段：缓存核心资源
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('app-v1').then((cache) => {
      return cache.addAll([
        '/',
        '/index.html',
        '/static/js/bundle.js', // 替换为项目实际JS文件路径
        '/static/css/main.css'   // 替换为项目实际CSS文件路径
      ]);
    })
  );
});

// 请求拦截：采用缓存优先策略
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((cachedResponse) => {
      // 优先返回缓存，无缓存则发起网络请求
      return cachedResponse || fetch(event.request);
    })
  );
});

// 激活阶段：清理旧版本缓存
self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.filter(name => name !== 'app-v1').map(name => caches.delete(name))
      );
    })
  );
});

三、注册Service Worker #

在React入口文件（如src/index.js）中添加注册逻辑：

// 先检查浏览器是否支持Service Worker
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(reg => console.log('Service Worker注册成功:', reg.scope))
      .catch(err => console.error('Service Worker注册失败:', err));
  });
}

四、调整项目构建配置 #

由于项目未使用create-react-app，需确保构建工具（如Webpack）正确处理sw.js：

1. 若使用Webpack，安装适配Node.js 8的copy-webpack-plugin版本：

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

2. 在Webpack配置文件中添加插件，将sw.js复制到构建输出目录：

   const CopyWebpackPlugin = require('copy-webpack-plugin');
   module.exports = {
     // ...其他配置项
     plugins: [
       new CopyWebpackPlugin([{ from: './public/sw.js', to: './' }])
     ]
   };
   

3. 确认所有静态资源路径正确，避免缓存时找不到文件

五、注册失败的常见排查点 #

如果之前注册失败，大概率是以下原因：

• 路径错误：sw.js的注册路径需和文件实际位置匹配，若文件不在根目录，需通过scope参数指定作用域
• HTTPS限制：生产环境必须使用HTTPS（localhost除外），否则浏览器会阻止注册
• 文件可访问性：检查浏览器控制台的网络请求，确认sw.js能返回200状态码
• 浏览器兼容性：排除IE等不支持Service Worker的浏览器
• 构建问题：确认sw.js被正确复制到了构建输出目录中

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