Next.js Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope'

Question

I'm trying to implement pushpad web notifications on my next.js page.

I have following error in devtools

My file service-worker.js contains single line, regarding to documentation https://pushpad.xyz/docs/pushpad_pro_getting_started

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

I also added worker invocation in my _app.tsx regarding to blog post 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 (<></>);
}

Also including my 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;
  },
});

My tsconfig.json below

{
  "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"
  ]
}

Tested locally and on test server.

Answer 1

Try importing script with http instead of https:

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