Next.js 15中Chrome DevTools应用标签下Service Worker不显示的原因

核心问题：错误使用开发服务器运行生产构建 #

你执行npm run build && npm run dev的操作逻辑有误：next dev是开发模式服务器，它会忽略build生成的生产资源（包括Service Worker），而是重新编译开发环境代码。即使你在配置中设置disable: false，@ducanh2912/next-pwa在开发模式下仍可能存在兼容逻辑，默认禁用Service Worker。

正确操作流程 #

执行构建后，必须用生产服务器启动：

npm run build && npm run start

启动后再打开Chrome，检查DevTools > Application > Service Workers，即可看到注册的Service Worker。

其他排查方向 #

如果上述操作后仍未显示，按以下步骤逐一排查：

1. 检查DevTools面板过滤设置 #

• 打开DevTools > Application > Service Workers
• 确保勾选Show all选项，避免过滤掉未激活或等待中的Service Worker
• 确认未勾选Bypass for network，否则Service Worker会被浏览器绕过

2. 验证包版本兼容性 #

Next.js 15属于较新版本，确保你使用的@ducanh2912/next-pwa是适配Next.js 15的最新版本：

npm install @ducanh2912/next-pwa@latest

更新后重新构建并启动生产服务器。

3. 手动添加Service Worker注册逻辑（App Router适配） #

Next.js 15的App Router中，可能需要手动在客户端组件中触发Service Worker注册。创建一个客户端组件（比如components/RegisterSW.js）：

'use client';

import { useEffect } from 'react';

export default function RegisterSW() {
  useEffect(() => {
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', async () => {
        try {
          await navigator.serviceWorker.register('/sw.js');
        } catch (error) {
          console.error('Service Worker注册失败:', error);
        }
      });
    }
  }, []);

  return null;
}

然后在layout.js中引入该组件：

import RegisterSW from '@/components/RegisterSW';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <RegisterSW />
      </body>
    </html>
  );
}

重新构建启动后，检查控制台是否有注册成功的日志。

4. 验证manifest.json有效性 #

• 打开Chrome DevTools > Application > Manifest，确认manifest加载正常，无报错
• 核对start_url、icons等路径是否正确，确保图标文件确实存在于public目录中

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