使用 firebase.auth().signInWithPopup(firebase.auth.GoogleAuthProvider()) 时，弹出窗口会打开，但不会重定向到 account.google 登录页面，而是转到页面找不到我的应用程序的路径。我相信这与通过 offline-plugin 完成的服务 worker 有关。 。这是内置于 React-boilerplate 中的，该项目使用的是v3。我也在使用react-redux-firebase总体来说效果很好，所以我不认为这是设置的问题。

Webpack 产品文件

// Important modules this config uses 
const path = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const WebpackPwaManifest = require('webpack-pwa-manifest'); 
const OfflinePlugin = require('offline-plugin'); 
const { HashedModuleIdsPlugin } = require('webpack'); 
const TerserPlugin = require('terser-webpack-plugin'); 
const CompressionPlugin = require('compression-webpack-plugin'); 
 
module.exports = require('./webpack.base.babel')({ 
  mode: 'production', 
 
  // In production, we skip all hot-reloading stuff 
  entry: [ 
    require.resolve('react-app-polyfill/ie11'), 
    path.join(process.cwd(), 'app/app.js'), 
  ], 
 
  // Utilize long-term caching by adding content hashes (not compilation hashes) to compiled assets 
  output: { 
    filename: '[name].[chunkhash].js', 
    chunkFilename: '[name].[chunkhash].chunk.js', 
  }, 
 
  optimization: { 
    minimize: true, 
    minimizer: [ 
      new TerserPlugin({ 
        terserOptions: { 
          warnings: false, 
          compress: { 
            comparisons: false, 
          }, 
          parse: {}, 
          mangle: true, 
          output: { 
            comments: false, 
            ascii_only: true, 
          }, 
        }, 
        parallel: true, 
        cache: true, 
        sourceMap: true, 
      }), 
    ], 
    nodeEnv: 'production', 
    sideEffects: true, 
    concatenateModules: true, 
    splitChunks: { 
      chunks: 'all', 
      minSize: 30000, 
      minChunks: 1, 
      maxAsyncRequests: 5, 
      maxInitialRequests: 3, 
      name: true, 
      cacheGroups: { 
        commons: { 
          test: /[\\/]node_modules[\\/]/, 
          name: 'vendor', 
          chunks: 'all', 
        }, 
        main: { 
          chunks: 'all', 
          minChunks: 2, 
          reuseExistingChunk: true, 
          enforce: true, 
        }, 
      }, 
    }, 
    runtimeChunk: true, 
  }, 
 
  plugins: [ 
    // Minify and optimize the index.html 
    new HtmlWebpackPlugin({ 
      template: 'app/index.html', 
      minify: { 
        removeComments: true, 
        collapseWhitespace: true, 
        removeRedundantAttributes: true, 
        useShortDoctype: true, 
        removeEmptyAttributes: true, 
        removeStyleLinkTypeAttributes: true, 
        keepClosingSlash: true, 
        minifyJS: true, 
        minifyCSS: true, 
        minifyURLs: true, 
      }, 
      inject: true, 
    }), 
 
    // Put it in the end to capture all the HtmlWebpackPlugin's 
    // assets manipulations and do leak its manipulations to HtmlWebpackPlugin 
    new OfflinePlugin({ 
      relativePaths: false, 
      publicPath: '/', 
      appShell: '/', 
 
      // No need to cache .htaccess. See http://mxs.is/googmp, 
      // this is applied before any match in `caches` section 
      excludes: ['.htaccess'], 
 
      caches: { 
        main: [':rest:'], 
 
        // All chunks marked as `additional`, loaded after main section 
        // and do not prevent SW to install. Change to `optional` if 
        // do not want them to be preloaded at all (cached only when first loaded) 
        additional: ['*.chunk.js'], 
      }, 
 
      // Removes warning for about `additional` section usage 
      safeToUseOptionalCaches: true, 
    }), 
 
    new CompressionPlugin({ 
      algorithm: 'gzip', 
      test: /\.js$|\.css$|\.html$/, 
      threshold: 10240, 
      minRatio: 0.8, 
    }), 
 
    new WebpackPwaManifest({ 
      name: 'Applied Charts', 
      short_name: 'AW Charts', 
      description: 'A bespoke chart builder to streamline workflows', 
      background_color: '#fafafa', 
      theme_color: '#b1624d', 
      inject: true, 
      ios: true, 
      // icons: [ 
      //   { 
      //     src: path.resolve('app/images/icon-512x512.png'), 
      //     sizes: [72, 96, 128, 144, 192, 384, 512], 
      //   }, 
      //   { 
      //     src: path.resolve('app/images/icon-512x512.png'), 
      //     sizes: [120, 152, 167, 180], 
      //     ios: true, 
      //   }, 
      // ], 
    }), 
 
    new HashedModuleIdsPlugin({ 
      hashFunction: 'sha256', 
      hashDigest: 'hex', 
      hashDigestLength: 20, 
    }), 
  ], 
 
  performance: { 
    assetFilter: assetFilename => 
      !/(\.map$)|(^(main\.|favicon\.))/.test(assetFilename), 
  }, 
}); 
 

路由器目前只有两条路由 App.js

export default function App() { 
  return ( 
    <div> 
      <Switch> 
        <Route exact path="/" component={HomePage} /> 
        <Route component={NotFoundPage} /> 
      </Switch> 
      <GlobalStyle /> 
    </div> 
  ); 
} 

任何帮助将不胜感激。

请您参考如下方法:

您的问题是与 offline-plugin 相关的已记录错误。您可以在此处查看问题日志:https://github.com/NekR/offline-plugin/issues/412

您的 Service Worker 确实正在窃取对 _auth 的请求。如果您的问题对时间不敏感，您可能会等待该项目修复问题并提取更新，尽管此问题自 2018 年以来一直处于开放状态。否则，您可以手动向服务工作人员获取添加豁免。

在此回答时，线程中最有可能成功的评论建议使用以下代码，这可能会解决该问题:

new RemoveServiceWorkerPlugin({ filename: 'sw.js' }); 
 
new OfflinePlugin({ 
      relativePaths: false, 
      publicPath: '/', 
      appShell: '/', 
 
      ServiceWorker: { 
        output: 'newsw.js', 
        events: true, 
        navigateFallbackURL: '/', 
      }, 
 
      excludes: ['.htaccess', '*/__/auth*/{*.*,.*}'], 

最终，您需要找到一种方法来从 Service Worker 的处理中排除 __/auth 路径，事情应该没问题。