How to push notifications with angular.js?

Question

I have been building a simple application to learn angular.js. So far I hooked up all the pieces in the MEAN stack and I am able to save and retrieve data from Mongo.

The app is essentially a todo list. The user can create a project and inside the project create "cards" with "todos" which can then be moved from state to state ("backlog", "in progress", "complete", etc.)

I would like to be able to push the notifications to all the people who are connected to tell their apps that a refresh is needed to get the latest todos. In other words, let's say that user A adds a new card to project A, I would like to send a message out to all users who are currently watching project A so that their application issues a project refresh to get the latest and greatest.

Any suggestions on how to proceed? Which technology, if any, I need to add to the MEAN stack to be able to do something like this?

Thanks in advance

Solution 1

Since you're on the MEAN stack, the standard recommendation in Node would be to use the Socket.IO API.

They provide the following example of two way messaging (which would facilitate your push messages very easily):

Client

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io.connect('http://localhost');
  socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
  });
</script>

Server

var app = require('http').createServer(handler)
  , io = require('socket.io').listen(app)
  , fs = require('fs')

app.listen(80);

function handler (req, res) {
  fs.readFile(__dirname + '/index.html',
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }

    res.writeHead(200);
    res.end(data);
  });
}

io.sockets.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
});

It will use websockets where possible, and fallback to AJAX long polling or Flash polling in browsers where there is no websocket support.

As for integrating with Angular, here's a good blog post on Socket.IO and Angular:

I'll be writing about how to integrate Socket.IO to add real-time features to an AngularJS application. In this tutorial, I'm going to walk through writing a instant messaging app.

Solution 2

If you're already working with Express, you should check out express.io.

It has a bunch of cool features like Session support and the ability to forward normal HTTP routes to realtime routes.

Solution 3

Here is a module we have written for getting AngularJS push notifications working in PhoneGap / Cordava (with full instructions): http://www.scorchsoft.com/blog/free-angularjs-cordova-push-notification-plugin/

Simply download the example code and install. There is also code included for setting up the pushing component in PHP.

Solution 4

Why not with HTML5 Notification API....

export default class NotificationService {
    /**
     * Constructor of the class.
     *
     */
    constructor() {}

    showPushNotification(title: string = '', message: string, iconPush) {
        if (window.Notification && Notification.permission !== "denied") {
            Notification.requestPermission(function(status) {
                var n = new Notification(title, {
                    body: message,
                    icon: iconPush
                });
            });
        }

    }
}

View more solutions

Comments

[Francesco Gallarotti]

I know, I am not supposed to use comments to thank people, but I just wanted to say thank you for taking the time to answer. :) You have opened for me a whole new world of things to learn :)

[William Gaul]

Your code works great! I did have to do some modifications to pushnotification.js. 1) You need an empty "[]" argument at "angular.module('pushNotify', [])" and 2) you're missing a closing ")" at "phonegapReady().then("... why not create this on Github? Would be easier to make people use and also others to contribute.