Question

我已经尝试将FCM实施一周到我的ReactJS Webpack项目中。我能够生成一个服务工作文件，如果我是正确的，它包含从云端接收firebase通知的正确函数，但没有任何反应。我已经在很多方面尝试了这一点，现在我不知道我的webpack配置是否错误，或者服务工作者文件丢失了什么。我已经完成了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消息传递的文件：

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;

然后是我的sw.js文件

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!');
}

最后是我的构建目录js文件夹（捆绑的源代码和serivceworker文件）中的最新截图：

EDIT。我得到各种不同的错误，一个是serviceworker文件有不匹配的mime类型，还有一个firebase错误。它们在chrome控制台中看起来像这样（我拿走了一些东西，这给出了这些基本想法）：

"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

Answer 1

我已经尝试了数周的同一件事，发现从sw-precache-webpack-plugin'或worbox生成的webpack服务工作程序在导入脚本时遇到了问题，而GitHub问题却不清楚，解决方案方面，Google很愚蠢，因为任何文档都不适合初学者甚至业余爱好者，因为他们缺乏理解人类学习曲线的能力。在尝试做我自己的服务人员并生成它们的过程中，请远离firebase。

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

1 个答案: