在 React-Boilerplate 中使用 Firebase 身份验证时，服务人员捕获到 Google 的 __/auth 请求

Question

当使用firebase.auth().signInWithPopup(firebase.auth.GoogleAuthProvider()) 时，弹出窗口会打开，但不会重定向到accounts.google 登录页面，它会转到我的应用程序找不到路由的页面。我相信这与通过offline-plugin 制作的服务人员有关。这是内置在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),
  },
});

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

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

任何帮助将不胜感激。

Answer 1

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

您的服务人员确实在窃取对 _auth 的请求。如果您的问题对时间不敏感，您可能会等待该项目解决问题并拉取更新，尽管此问题自 2018 年以来一直存在。否则，您可以寻求手动为 service worker fetch 添加豁免。

在回答此问题时，线程中最有可能成功的评论暗示了以下可能解决问题的代码：

new RemoveServiceWorkerPlugin({ filename: 'sw.js' });

new OfflinePlugin({
      relativePaths: false,
      publicPath: '/',
      appShell: '/',

      ServiceWorker: {
        output: 'newsw.js',
        events: true,
        navigateFallbackURL: '/',
      },

      excludes: ['.htaccess', '*/__/auth*/{*.*,.*}'],

最终你需要找到一种方法来从服务工作者的处理中排除 __/auth 路径，一切都应该没问题。

Answer 2

这可能不是问题的答案。但有人可能会得到这个。我正在使用 termly 进行 cookie 弹出和管理，它可以选择完全禁止包括 firebase 在内的 3rd 方 cookie，这是一个问题，导致 firebase 的 __auth URL 无法访问。关闭它