无法在 React 应用程序的根 url 中安装 workbox-webpack-plugin 的 service worker，它安装在 localhost:8080/dist [英] Can't install service worker of workbox-webpack-plugin in root url for React app, it's installing at localhost:8080/dist

问题描述

我一直在关注很多关于如何安装 workbox-webpack-plugin 的教程，但我没有成功地正确安装它.服务工作者似乎正在安装，但它安装在我的应用程序的 dist 文件夹中(这是我的 webpacks 输出路径).我认为这没有任何问题，但是当我运行我的应用程序时，没有错误，但服务工作者没有运行，我注意到它被安装在 localhost:8080/dist(输出路径)上，即使我尝试在 Heroku 免费服务器上运行它，它安装在 url "

我真的很感激任何帮助，因为我对 webpack 和 workbox 非常陌生，而且我完全被困住了.谢谢大家！！！.

解决方案

问题在于 Service Worker 的 scope.因为sw在dist/里面，所以它只能控制对/dist/`文件夹内资源的请求.

我建议为您的 index.html<使用 HTMLWebpackPlugin/code> 然后将由 Webpack 处理并最终在 dist/ 中，然后您将部署您的 dist/ 文件夹

I have been following a lot of tutorials of how to install workbox-webpack-plugin but I haven't succesfully managed to install it correctly. The service worker appears to be installing but its installing in the dist folder of my app (This is my webpacks output path). I think there's nothing wrong with this but when I run my app, there are no errors but the service worker is not functioning and I notice that it is being installed at localhost:8080/dist (The output path) and even if I try to run it in a heroku free server it gets installed at the url "https://myherokuapp.com/dist" (The same output path) I can't find a way to fix and think this might be related with another webpack module?

Here's my webpack config:

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/'
    }
  };
};

The service worker I am providing to workbox at swSrc:

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

workbox.skipWaiting();

workbox.precaching.precacheAndRoute(self.__precacheManifest);

And my manifest:

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

And here is the registration from the SW where I see that its installed in the /dist url

I really appreciate any help since I'm very new to webpack and workbox and I'm completely stuck. Thank you all!!.

解决方案

The problem is the scope of your Service Worker. Because the sw is inside dist/, it can only control requests to resources inside the /dist/` folder.

I'd recommend using HTMLWebpackPlugin for your index.html which would then be processed by Webpack and ends up in the dist/, and then you'd deploy your dist/ folder

这篇关于无法在 React 应用程序的根 url 中安装 workbox-webpack-plugin 的 service worker，它安装在 localhost:8080/dist的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！