Question

我一直在遵循很多有关如何安装workbox-webpack-plugin的教程，但是我没有成功地正确安装它。服务人员似乎正在安装，但安装在我应用程序的dist文件夹中（这是我的webpacks输出路径）。我认为这没什么问题，但是当我运行我的应用程序时，没有任何错误，但是服务工作者没有运行，我注意到它正在本地主机上安装：8080 / dist（输出路径），即使我尝试在Heroku免费服务器上运行它，并在URL“ https://myherokuapp.com/dist”（相同的输出路径）上安装它，我找不到解决方法，认为这可能与另一个webpack模块有关？

这是我的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/'
    }
  };
};

我要提供给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网址中

我非常感谢您提供的任何帮助，因为我对Webpack和Workbox还是很陌生，并且完全陷入困境。谢谢大家！！

Answer 1

问题是您的服务人员的scope。由于sw位于dist/内部，因此它只能控制对/ dist /`文件夹中的资源的请求。

我建议您为index.html使用HTMLWebpackPlugin，然后由Webpack处理并将其保存在dist/中，然后部署dist/文件夹

无法在React应用的根URL中安装workbox-webpack-plugin的service worker，它安装在localhost：8080 / dist

1 个答案: