Node.js报错ReferenceError: navigator is not defined，如何注册Service Worker？

错误原因 #

navigator是浏览器专属的全局对象，出现这个错误意味着你的注册代码在非浏览器环境中被执行了（比如Node.js服务端、SSR框架的服务端渲染流程、静态站点生成的预构建阶段）。

解决方案 #

1. 确保代码仅在浏览器环境执行 #

添加环境判断，让注册逻辑只在浏览器中运行：

// 先确认当前处于浏览器环境
if (typeof window !== 'undefined' && 'serviceWorker' in navigator) {
    navigator.serviceWorker
        .register('/sw.js')
        .then(() => {
            console.log('Service worker registered!');
        })
        .catch(err => {
            console.error('Service worker registration failed:', err);
        });
}

2. 针对SSR/SSG框架的特殊处理 #

如果你使用Next.js、Nuxt.js这类服务端渲染/静态生成框架，需要确保代码只在客户端执行：

• Next.js：将注册逻辑放在pages/_app.js的useEffect钩子中：

  import { useEffect } from 'react';
  
  function MyApp({ Component, pageProps }) {
    useEffect(() => {
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/sw.js');
      }
    }, []);
  
    return <Component {...pageProps} />;
  }
  
  export default MyApp;
  

• Nuxt.js：创建客户端专属插件，在nuxt.config.js中配置仅客户端加载：

  // plugins/service-worker.js
  export default () => {
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/sw.js');
    }
  }
  
  // nuxt.config.js
  export default {
    plugins: [
      { src: '~/plugins/service-worker.js', mode: 'client' }
    ]
  }
  

3. 检查代码执行时机 #

确保注册代码在DOM加载完成后执行，避免提前运行：

window.addEventListener('DOMContentLoaded', () => {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js');
  }
});

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