Не удается установить сервисный работник workbox-webpack-plugin в корневом URL-адресе для приложения React, он устанавливается на локальный хост: 8080 / dist

Question

Я много читал о том, как установить workbox-webpack-plugin, но мне не удалось правильно установить его.Сервисный работник, кажется, устанавливает, но его установка в папке dist моего приложения (это путь вывода моих веб-пакетов).Я думаю, в этом нет ничего плохого, но когда я запускаю свое приложение, ошибок нет, но работник службы не работает, и я замечаю, что он устанавливается по адресу localhost: 8080 / dist (Выходной путь) и даже если я пытаюсьзапустить его на свободном сервере heroku, который устанавливается по URL "https://myherokuapp.com/dist" (тот же путь вывода). Не могу найти способ исправить и подумать, что это может быть связано с другим модулем веб-пакета?

Вот мой конфиг веб-пакета:

module.exports = (env) => {
  const isProduction = env === 'production';
  const CSSExtract = new ExtractTextPlugin('styles.css');

  return {
    entry: ['babel-polyfill', './src/app.js'],
    output: {
      path: path.join(__dirname, 'public', 'dist'),
      filename: 'bundle.js'
    },
    module: {
      rules: [{
        loader: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/
      }, {
        test: /\.s?css$/,
        use: CSSExtract.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true
              }
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true
              }
            }
          ]
        })
      }]
    },
    plugins: [
      CSSExtract,
      new webpack.DefinePlugin({
        'process.env.FIREBASE_API_KEY': JSON.stringify(process.env.FIREBASE_API_KEY),
        'process.env.FIREBASE_AUTH_DOMAIN': JSON.stringify(process.env.FIREBASE_AUTH_DOMAIN),
        'process.env.FIREBASE_DATABASE_URL': JSON.stringify(process.env.FIREBASE_DATABASE_URL),
        'process.env.FIREBASE_PROJECT_ID': JSON.stringify(process.env.FIREBASE_PROJECT_ID),
        'process.env.FIREBASE_STORAGE_BUCKET': JSON.stringify(process.env.FIREBASE_STORAGE_BUCKET),
        'process.env.FIREBASE_MESSAGING_SENDER_ID': JSON.stringify(process.env.FIREBASE_MESSAGING_SENDER_ID)
      }),
      new CopyWebpackPlugin([
      {
        from: './public/index.html',
        to: 'index.html'
      }
      ]),
      new WorkboxPlugin.InjectManifest({
        swSrc: './public/sw.js',
        swDest: 'service-worker.js'
      })
    ],
    devtool: isProduction ? 'source-map' : 'inline-source-map',
    devServer: {
      contentBase: path.join(__dirname, 'public'),
      historyApiFallback: true,
      publicPath: '/dist/'
    }
  };
};

Работник службы, который я предоставляю для workbox на swSrc:

workbox.routing.registerNavigationRoute('https://my-app123.herokuapp.com/dashboard');

workbox.skipWaiting();

workbox.precaching.precacheAndRoute(self.__precacheManifest);

И мой манифест:

{
    "dir": "ltr",
    "lang": "ES",
    "name": "PWAPRB",
    "icons": [
        {
          "src": "/images/icons/app-icon-48x48.png",
          "type": "image/png",
          "sizes": "48x48"
        },
        {
          "src": "/images/icons/app-icon-96x96.png",
          "type": "image/png",
          "sizes": "96x96"
        },
        {
          "src": "/images/icons/app-icon-144x144.png",
          "type": "image/png",
          "sizes": "144x144"
        },
        {
          "src": "/images/icons/app-icon-192x192.png",
          "type": "image/png",
          "sizes": "192x192"
        },
        {
          "src": "/images/icons/app-icon-256x256.png",
          "type": "image/png",
          "sizes": "256x256"
        },
        {
          "src": "/images/icons/app-icon-384x384.png",
          "type": "image/png",
          "sizes": "384x384"
        },
        {
          "src": "/images/icons/app-icon-512x512.png",
          "type": "image/png",
          "sizes": "512x512"
        }
      ],
    "display": "standalone",
    "start_url": "https://my-app123.herokuapp.com/dashboard",
    "scope": ".",
    "short_name": "PRBW",
    "theme_color": "#204080",
    "orientation": "any",
    "background_color": "#204080",
    "related_applications": [],
    "prefer_related_applications": false
}

Ивот регистрация от SW, где я вижу, что она установлена ​​в / dist url

Я очень ценю любую помощь, так как я очень новичокк веб-пакету и рабочей коробке, и я полностью застрял. Спасибо всем !!.

Answer 1

Проблема в scope вашего сервисного работника.Поскольку sw находится внутри dist/, он может только контролировать запросы к ресурсам в папке / dist / `.

Я бы рекомендовал использовать HTMLWebpackPlugin для вашегоindex.html, который затем обрабатывается Webpack и заканчивается в dist/, а затем вы развертываете папку dist/