Блог

Я использую workbox-webpack-plugin для создания сервисного работника для меня, и я использую copy-webpack-plugin для перемещения сгенерированных файлов service worker в тот же каталог, что и main.js . Мой следующий файл конфигурации js выглядит следующим образом:-

 module.exports = {

 webpack: (config, {isServer, buildId, dev, ...rest}) => {

  if (dev) {

     const devSwSrc = join(__dirname, "register-sw.js");
     config.plugins.push(new CopyWebpackPlugin([devSwSrc]));
     config.plugins.push(new GenerateSW({ ...defaultGenerateOpts }));

     // Register SW
     const originalEntry = config.entry;
     config.entry = async () => {

     const entries = await originalEntry();
     const swCompiledPath = join(__dirname, 'register-sw-compiled.js');

     if (entries['main.js'] amp;amp; !entries['main.js'].includes(swCompiledPath)) {

       let content = await readFile(require.resolve('./register-sw.js'), 'utf8');

       await writeFile(swCompiledPath, content, 'utf8');

       entries['main.js'].unshift(swCompiledPath);

      }

    return entries;
 
};

}
 

Я пытаюсь скопировать своего работника службы в тот же каталог, что и main.js который является чанком / статическим, так что при его извлечении он не должен возвращать никаких ошибок. Но вместо этого я получаю эту ошибку.

 TypeError: Failed to register a ServiceWorker for scope ('[http://localhost:3000/](http://localhost:3000/)') with the script ('[http://localhost:3000/service-worker.js](http://localhost:3000/service-worker.js)'): A bad HTTP response code (404) was received when fetching the script.
 

Я знаю, что эта ошибка связана с тем, что она не обслуживается из того же каталога, что и main.js и мне нужно внести некоторые изменения в copy-webpack-plugin, чтобы добиться этого. Также я пытаюсь избежать пользовательских server.js маршруты передачи файлов на сервер, такие как /service-worker

Любая помощь была бы очень признательна. Заранее спасибо