Next.js 未捕獲的 DOMException：無法在“WorkerGlobalScope”上執行“importScripts”

Question

我正在嘗試在我的 next.js 頁面上實現按鈕 web 通知。

我在 devtools 中有以下錯誤

我的文件service-worker.js包含單行，關於文檔https://pushpad.xyz/docs/pushpad_pro_getting_started

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

我還在我的_app.tsx中添加了關於博客文章https://dev.to/josedonato/adding-a-service-worker-into-your-next-js-application-1dib的工人調用

// _app.tsx
// [...]
export default function MyApp(props: MyAppProps) {
  const {Component, emotionCache = clientSideEmotionCache, pageProps} = props;
  const store = useStore(pageProps.initialReduxState);

  useEffect(() => {
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('./service-worker.js').then(
          (registration) => {
            console.log(
              'Service Worker registration successful with scope: ',
              registration.scope,
            );
          },
          (err) => {
            console.log('Service Worker registration failed: ', err);
          },
        );
      });
    }
  });
  
  return (<></>);
}

還包括我的next.config.js

const withTM = require('next-transpile-modules')([
  '@mui/material',
  '@mui/system',
  '@mui/icons-material',
]); // pass the modules you would like to see transpiled

module.exports = withTM({
  reactStrictMode: true,
  swcMinify: true,
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
    };
    return config;
  },
});

我的tsconfig.json下面

{
  "compilerOptions": {
    "baseUrl": "src",
    "target": "es2016",
    "module": "esnext",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "noImplicitAny": false,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext",
      "webworker"
    ],
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules"
  ]
}

在本地和測試服務器上測試。

Answer 1

嘗試使用 http 而不是 https 導入腳本：

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