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

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

Вот моя конфигурация веб-пакета:

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, где я вижу, что он установлен в URL-адресе / dist

введите здесь описание изображения

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


person Farid    schedule 22.11.2018    source источник


Ответы (1)


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

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

person Jad Joubran    schedule 22.11.2018
comment
Спасибо за ответ, Джад! Я думал, что CopyWebpackPlugin делает это, я уже пробовал с HTMLWebpackPlugin, но читаемый index.html находится в папке / public, а не в папке / public / dist, я знаю это, потому что заголовок файла index.html, созданного в / public / dist, отличается. Я попытался также изменить область видимости при регистрации работника службы на .register ('dist / service-worker.js', {scope: '/'}), но он говорит, что это невозможно, поскольку globalScope находится в / dist, и я не могу найти, как использовать HTTP-заголовок Service-Worker-Allowed из JS - person Farid; 22.11.2018
comment
Конечно! Да, вы не сможете повысить область видимости на 1 уровень выше. С веб-пакетом все файлы / ресурсы, которые проходят через него, будут находиться в папке dist после компиляции, поэтому вам нужно либо скопировать свой index.html, либо передать его через HTMLWebpackPlugin - person Jad Joubran; 22.11.2018