Javascript 如何使用webpack将firebase云消息传递包含到ReactJS项目中

我已经尝试在我的ReactJS网页包项目中实现FCM一周了。我能够生成一个服务工作者文件，如果我是正确的，它包含从云接收firebase通知的正确函数，但什么也没有发生。我已经用很多方法尝试过了，现在我陷入了两种困境：不知道我的网页包配置是否错误，或者服务工作者文件是否丢失了什么。我已经通过了所有的教程和问题，在SO和什么，但没有任何工作对我来说

这是我的webpack.config.js文件：

var path = require('path');
var util = require('util');
var autoprefixer = require('autoprefixer-core');
var pkg = require('../package.json');
var merge = require('webpack-merge');

var loaders = require('./loaders');
var plugins = require('./plugins');

var DEBUG = process.env.NODE_ENV === 'development';
var TEST = process.env.NODE_ENV === 'test';

var jsBundle = path.join('js', util.format('[name].%s.js', pkg.version));

var entry = {
  app: ['whatwg-fetch', './app.jsx'],
  sw: ['../app/sw.js']
};

if (DEBUG) {
  entry.app.push(
    util.format(
      'webpack-dev-server/client?http://%s:%d',
      pkg.config.devHost,
      pkg.config.devPort
    )
  );
  entry.app.push('webpack/hot/dev-server');
}

var common = {
  entry: entry,
  output: {
    path: path.resolve(pkg.config.buildDir),
    publicPath: '/',
    filename: jsBundle,
    pathinfo: false
  }
};

var config;

switch (process.env.NODE_ENV) {
  case 'production':
  config = merge(
    common, {
      externals: {
        'bootstrap': 'bootstrap',
        'font-awesome': 'font-awesome',
        'material-design-icons': 'material-design-icons'
      },
      context: path.join(__dirname, '../app'),
      target: 'web',
      devtool: false,
      entry: entry,
      output: {
        path: path.resolve(pkg.config.buildDir),
        publicPath: '/',
        filename: path.join('js', util.format('[name].[hash].%s.js', pkg.version)),
        pathinfo: false
      },
      module: {
        loaders: loaders
      },
      postcss: [
        autoprefixer
      ],
      plugins: plugins,
      resolve: {
        extensions: ['', '.js', '.json', '.jsx']
      }
    }
  );
  break;
  case 'development':
  console.log(entry);
  console.log(jsBundle);
  config = merge(
    common, {
      context: path.join(__dirname, '../app'),
      cache: DEBUG,
      debug: DEBUG,
      target: 'web',
      devtool: DEBUG || TEST ? 'inline-source-map' : false,
      entry: entry,
      output: {
        path: path.resolve(pkg.config.buildDir),
        publicPath: 'http://localhost:8000/',
        filename: jsBundle,
        pathinfo: false
      },
      module: {
        loaders: loaders
      },
      postcss: [
        autoprefixer
      ],
      plugins: plugins,
      resolve: {
        extensions: ['', '.js', '.json', '.jsx']
      },
      devServer: {
        contentBase: path.resolve(pkg.config.buildDir),
        hot: true,
        noInfo: false,
        inline: true,
        stats: { colors: true },
        disableHostCheck: true,
        watchOptions: {
          aggregateTimeout: 300,
          poll: 1000 // is this the same as specifying --watch-poll?
        },
        historyApiFallback: true,
        proxy: [{}] I have some proxies here
      }
    }
  );
  break;
}

module.exports = config;

当网页运行时，我为firebase消息提供的此文件（具有焦点）：

---

我已经尝试了几周了，我发现由sw precache webpack plugin’或worbox生成的webpack服务人员在导入脚本时遇到问题，GitHub问题在同一平台上丢失，没有明确的解决方案，谷歌是愚蠢的，任何人都可以使用谷歌的文档，而不是初学者，甚至是业余爱好者，因为他们缺乏理解人类学习曲线的能力。远离firebase，因为我正在尝试制作自己的服务人员并生成他们=firebase不起任何作用。

是的，在firebase工作后，我实际上废弃了它，因为每次都必须在屏幕上显示所有后台通知。开始使用WebSocket，但从未回头。

import * as firebase from 'firebase';
const messaging = {};

if ('serviceWorker' in navigator) {
  console.log('Service worker supported!');
  if(firebase.apps.length < 1) {
    var config = {
      apiKey: '***********************',
      authDomain: '*****.firebaseapp.com',
      databaseURL: 'https://*****.firebaseio.com',
      projectId: '*****',
      storageBucket: '*****.appspot.com',
      messagingSenderId: '*****'
    };
    firebase.initializeApp(config);
  }

  messaging = firebase.messaging();
  navigator.serviceWorker.register('js/sw.js').then(function(registration) {
    messaging.useServiceWorker(registration);
  }).catch(function(err) {
    console.log(err);
  });

  messaging.onMessage(function(payload) {
    console.log('Message received. ', payload);
  });

} else {
  console.log('Service worker not supported!');
}

export default messaging;

import * as firebase from 'firebase';
const messaging = {};

if ('serviceWorker' in navigator) {
  console.log('Service worker supported!');
  if(firebase.apps.length < 1) {
    var config = {
      apiKey: '***********************',
      authDomain: '*****.firebaseapp.com',
      databaseURL: 'https://*****.firebaseio.com',
      projectId: '*****',
      storageBucket: '*****.appspot.com',
      messagingSenderId: '*****'
    };
    firebase.initializeApp(config);
  }

  messaging = firebase.messaging();
  navigator.serviceWorker.register('js/sw.js').then(function(registration) {
    messaging.useServiceWorker(registration);
  }).catch(function(err) {
    console.log(err);
  });

  messaging.setBackgroundMessageHandler(function(payload) {
    console.log('[sw.js] Received background message ', payload);
  });
} else {
  console.log('Service worker not supported!');
}

"sw.fdf7b8aa233366ebfb8e.1.1.1.js:5 Uncaught e"
"FirebaseError: Messaging: This method is available in a service worker context. (messaging/only-available-in-sw)
app.fdf7b8aa233366ebfb8e.1.1.1.js:28
The script has an unsupported MIME type ('text/html').
/js/sw.js Failed to load resource: net::ERR_INSECURE_RESPONSE