为什么PWA只能在dev模式下安装？

Question

我正在尝试将 PWA 集成到我的 React 项目中，当我运行使用 webpack-dev-server 我可以看到我可以在我的计算机上安装的 PWA 应用程序，但是当我构建项目时用 webpack 并尝试运行它，我不能再这样做了

webpack.config.js

const path = require("path");
const webpack = require("webpack");
const { styles } = require("@ckeditor/ckeditor5-dev-utils");
const MomentLocalesPlugin = require('moment-locales-webpack-plugin');

const BUILD_DIR = path.resolve(__dirname, "public");
const APP_DIR = path.resolve(__dirname, "src");

const envs = require('./config/envs').getEnv;
const plugins = require('./webpack-plugins');

module.exports = (env) => {
  console.log("OUTPUT: env", env)
  const config = envs(env.NODE_ENV);
  const mode = env.production ? 'production' : 'development';
  return {
    mode,
    entry: `${APP_DIR}/index.js`,
    output: {
      filename: "js/bundle.js",
      path: BUILD_DIR,
      publicPath: "/"
    },
    node: {
      net: "empty",
      tls: "empty",
      dns: "empty",
      fs: "empty"
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: ["style-loader", "css-loader"],
          exclude: /ckeditor5-[^/\]+[/\]theme[/\].+\.css/
        },
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: [
            "babel-loader",
            {
              loader: "eslint-loader",
              options: {
                failOnError: true,
                emitError: true,
                emitWarning: true
              }
            }
          ]
        },
        {
          test: /\.(graphql|gql)$/,
          exclude: /node_modules/,
          loader: "graphql-tag/loader"
        },
        {
          test: /\.(jpg|png|gif|svg|pdf|ico)$/,
          use: [
            {
              loader: "file-loader",
              options: {
                name: "[path][name]-[hash:8].[ext]"
              }
            }
          ],
          exclude: [
            /\.(js|jsx|mjs)$/,
            /\.html$/,
            /\.json$/,
            /ckeditor5-[^/\]+[/\]theme[/\]icons[/\][^/\]+\.svg$/,
            /ckeditor5-[^/\]+[/\]theme[/\].+\.css/
          ]
        },
        {
          test: /ckeditor5-[^/\]+[/\]theme[/\]icons[/\][^/\]+\.svg$/,
          use: ["raw-loader"]
        },
        {
          test: /ckeditor5-[^/\]+[/\]theme[/\].+\.css/,
          use: [
            {
              loader: "style-loader",
              options: {
                singleton: true
              }
            },
            {
              loader: "postcss-loader",
              options: styles.getPostCssConfig({
                themeImporter: {
                  themePath: require.resolve("@ckeditor/ckeditor5-theme-lark")
                },
                minify: true
              })
            }
          ]
        }
      ]
    },
    devServer: {
      historyApiFallback: true,
      watchContentBase: true,
      contentBase: "./public"
    },
    resolve: {
      extensions: [".js"],
      alias: {
        src: path.resolve(__dirname, "src"),
        shared: path.resolve(__dirname, "src", "shared"),
        config: path.resolve(__dirname, "config"),
        screens: path.resolve(__dirname, "src", "screens"),
        package: path.resolve(__dirname, "package.json")
      }
    },
    plugins: [
      new webpack.NamedModulesPlugin(),
      new webpack.HotModuleReplacementPlugin(),
      new MomentLocalesPlugin({
        localesToKeep: ['es-us', 'fr', 'es'],
      }),
      new webpack.DefinePlugin({
        CONFIG: JSON.stringify(config),
      }),
      plugins.manifest,
      plugins.sw
    ]
  }
};

package.json

上的脚本

"build:local": "webpack --env.NODE_ENV=local --env.production --progress",

“开始”：“节点server.js”，

"dev": "webpack-dev-server --inline --watch --host 0.0.0.0 --env.NODE_ENV=local --env.development --progress"

使用的Webpack包：

"webpack": "4.19.1", “webpack-cli”：“^2.0.15”， "webpack-dev-server": "^3.1.3", “webpack-manifest-plugin”：“^2.2.0”

PS: 我在构建中尝试了 --env.production 和 --env.development 但都没有用

如有线索，我们将不胜感激！

Answer 1

制作应用 HTTPS 修复它，非常感谢@Mathias

为什么PWA只能在dev模式下安装？

Why PWA can be installed only in dev mode?

javascript

reactjs

webpack

progressive-web-apps

webpack-4