Skip to content
Firebase Cloud Messaging service worker support for Emberfire apps
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon
app
config
fastboot-tests
lib
service-worker
tests
vendor
.editorconfig
.ember-cli
.eslintrc.js
.gitignore
.npmignore
.nvmrc
.travis.yml
.watchmanconfig
LICENSE.md
README.md
ember-cli-build.js
index.js
package.json
testem.js
yarn.lock

README.md

Build Status Ember Observer Score Ember Version

ember-service-worker-emberfire-messaging

A push notification Ember Service Worker plugin for Firebase Cloud Messaging using Emberfire.

Installation

ember install ember-service-worker-emberfire-messaging

Configuration

Step 1: basic setup is done in the config/environment.js file:

// Ensure Emberfire is correctly configured
var ENV = {
  firebase: {
    apiKey: 'xyz',
    authDomain: 'YOUR-FIREBASE-APP.firebaseapp.com',
    databaseURL: 'https://YOUR-FIREBASE-APP.firebaseio.com',
    storageBucket: 'YOUR-FIREBASE-APP.appspot.com',
    projectId: 'my-firebase-app', // optional
    messagingSenderId: "123456789012" // Required!
  }
};

Message sender Id can be found in your firebase console > project settings > add app button > Add Firebase to your web app.

Set GCM Sender ID

Step 2: gcm_sender_id must be configured in your manifest.json file. For this purpose I recommend using Ember Web App where in your config/manifest.js you should add the following:

module.exports = function() {
  return {
    // ...
    // gcm_sender_id: '103953800507'
  };
}

This Google Cloud Sender ID is not the same as your message sender ID. You can simply copy the value 103953800507 into your manifest.json!

Request User Permission

Step 3: Use the Firebase Message Service to request the user's permission and subscribe to new message events.

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default Route.extend({
  firebaseMessage: service(),

  actions: {
    requestUserPermission() {
      /*
       Before you can receive any messages you need to request the users'
       permission to get push notifications
       */
      this.get('firebaseMessage').initialize()
      .then((token) => { // FCM registration token
        // Homework: persist this token to your server!
      });
    }
  },

  init() {
    this._super(...arguments);

    /*
     React to Firebase message when app is being viewed by user
     */
    this.get('firebaseMessage').subscribe((message) => {
      console.log('FCM JSON', message);
    });
  }
});

Misc Options:

Customize this addon by adding any of the following to the config/environment.js file:

var ENV = {
  'esw-emberfire-messaging': {
    firebaseVersion: '4.2.0', // default (Firebase version used by SW)
    defaultBackgroundMessageTitle: 'New Message', // default (fallback title for background message)
    notification: { vibrate: [200, 100, 200] } // optional global notification settings
  }
};

Possible global notification options will be overwritten by any individual FCM notification options. Browser support of various notification options may vary.

Triggering a Firebase Message

To test your app's Firebase Messaging try the following in the terminal:

curl -X POST -H "Authorization: key=<YOUR_SERVER_KEY>" -H "Content-Type: application/json" -d '{
  "data": {
    "title": "Portugal vs. Denmark",
    "body": "5 to 1",
    "icon": "firebase-logo.png",
    "click_action": "http://localhost:4200"
  },
  "to": <DEVICE_REGISTRATION_TOKEN>
}' "https://fcm.googleapis.com/fcm/send"

YOUR_SERVER_KEY can be found in the firebase console under Project Settings > Cloud Messaging > Server key. DEVICE_REGISTRATION_TOKEN is the token you requested via this addon's firebase-message service.

Please refer to the Firebase docs for more information

Contributing

  • git clone <repository-url> this repository
  • cd ember-service-worker-emberfire-messaging
  • yarn

Running Tests

  • yarn test (Runs ember try:each to test your addon against multiple Ember versions)
  • ember test
  • ember test --server

Building

  • ember build

For more information on using ember-cli, visit https://ember-cli.com/.

You can’t perform that action at this time.