Next.js集成PushPad Web通知时遇importScripts DOMException错误

1. 修正Service Worker文件位置与脚本路径 #

Next.js的静态资源都存在public目录下，必须把你的service-worker.js放在public文件夹根目录。然后把脚本里的import路径改成绝对路径，避免Next.js路由解析问题：

importScripts('https://pushpad.xyz/service-worker.js');

如果用的是PushPad自定义脚本，确保路径是浏览器能直接访问的绝对地址。

2. 调整App组件中的Service Worker注册逻辑 #

Next.js开发环境对Service Worker有特殊限制，仅在生产环境注册即可。修改_app.tsx：

import { useEffect } from 'react';

export default function MyApp({ Component, pageProps }) {
  useEffect(() => {
    if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
      window.addEventListener('load', async () => {
        try {
          await navigator.serviceWorker.register('/service-worker.js');
        } catch (err) {
          console.error('Service Worker注册失败:', err);
        }
      });
    }
  }, []);

  return <Component {...pageProps} />;
}

3. 给next.config.js加Service Worker专属配置 #

Next.js默认会处理静态资源，得让它放过service-worker.js，还要设置允许的作用域：

const nextConfig = {
  async headers() {
    return [
      {
        source: '/service-worker.js',
        headers: [
          { key: 'Service-Worker-Allowed', value: '/' }
        ]
      }
    ];
  },
  // 生产环境部署用standalone输出更稳妥，可选
  output: 'standalone'
};

module.exports = nextConfig;

4. 检查tsconfig.json的全局API支持 #

确保tsconfig里包含dom相关的lib，避免TypeScript报错：

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "types": ["node"]
  }
}

最后排查步骤 #

• 清除浏览器缓存，在开发者工具的Application面板里注销旧的Service Worker后刷新页面
• 确认PushPad项目的公钥、配置与你的站点完全匹配
• 测试服务器必须使用HTTPS（localhost除外，浏览器允许本地HTTP环境使用Service Worker）

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