Ember CLI Push.js Shim

Add native javascript Notifications to your application

---

Installation

You can install it like a standard Ember addon. This brings in the Push.js dependency and makes it available as an ES6 style import

ember install ember-cli-push-js-shim

---

Creating Notifications

Here is a simple example showing how to display a notification

import Ember from 'ember';
import Push from 'pushjs';

export default Ember.Route.extend({
  actions: {
    createNotification() {
      Push.create('Hello World!');
    }
  }
});

Fire Notification

---

Closing Notifications

You can close notifications in two ways, either by giving the notifcation a tag

import Ember from 'ember';
import Push from 'pushjs';

export default Ember.Route.extend({
  actions: {
    createTaggedNotification() {
      Push.create('Hello World!', {
        tag: 'example'
      });
    },

    closeTaggedNotification() {
      Push.close('example');
    }
  }
});

Fire Tagged Notification Close Tagged Notification

Or by storing a reference to the promise created

import Ember from 'ember';
import Push from 'pushjs';

export default Ember.Route.extend({
  actions: {
    createPromiseNotification() {
      this.set('createPromise', Push.create('Hello World!'));
    },

    closePromiseNotification() {
      this.get('createPromise').then( notification => {
        notification.close();
      });
    }
  }
});

Fire Promise Notification Close Promise Notification

---

Closing All Notifications

You can clear all notifications with one method

import Ember from 'ember';
import Push from 'pushjs';

export default Ember.Route.extend({
  actions: {
    createMultipleNotification() {
      Push.create('First Notification');
      Push.create('Second Notification');
      Push.create('Third Notification');
    },

    closeAllNotification() {
      Push.clear();
    }
  }
});

Fire Multiple Notifications Close All Notifications

---

Options

In addition to the required title there are also several options

• body: The body text of the notification
• icon: Can be either the URL to an icon image or an array containing 16x16 and 32x32 pixel icon images
• onClick: Callback to execute when the notification is clicked
• onClose: Callback to execute when the notification is closed (obsolete)
• onError: Callback to execute when if the notification throws an error
• onShow: Callback to execute when the notification is shown (obsolete)
• tag: Unique tag used to identify the notification. Can be used to later close the notification manually
• timeout: Time in milliseconds until notification closes automatically
• vibrate: An array of durations for a mobile device receiving the notification to vibrate. For example, [200, 100] would vibrate first for 200 milliseconds, pause, then continue for 100 milliseconds

For example here is a notification which times out after 2 seconds with a description and an image

import Ember from 'ember';
import Push from 'pushjs';

export default Ember.Route.extend({
  actions: {
    createOptionsNotification() {
      Push.create('Notification With Options', {
        timeout: 2000,
        body: 'A longer description goes here.',
        icon: 'assets/images/chrismasters_icon-f1839364625d2d9882a5c2127a8f1bf7.png'
      });
    }
  }
});

Fire Options Notification

---

Further Information

See Push.js for more details, or the Github repo for this project