HTML5 Realtime Push Notifications
CSS PHP JavaScript Shell Ruby
Switch branches/tags
Nothing to show
Clone or download
Latest commit 8d25d91 Oct 21, 2014
Failed to load latest commit information.
examples Added HTTPS support Oct 21, 2014
.gitignore Added node example and tidied up everything else Jul 23, 2014 Updated demo link Jul 24, 2014

HTML5 Realtime Push Notifications using Pusher


The purpose of the PushNotifier.js library is to make is super easy to add simple Push notifications to any web application. It uses the jQuery Gritter Growl plugin for the UI and Pusher for realtime push notifications.

The first version of this sample shows examples of server functionality in PHP and Ruby with Sinatra. If you'd like to see the example in other languages please get in touch.

How easy is it?

It's as easy as:

  1. Include the PusherNotifier.js libraries and the jQuery Gritter files:

      <script src=""></script>
      <script src="html5-realtime-push-notifications/lib/gritter/js/jquery.gritter.min.js"></script>
      <link href="html5-realtime-push-notifications/lib/gritter/css/jquery.gritter.css"rel="stylesheet" type="text/css" />
      <script src="//"></script>
      <script src="html5-realtime-push-notifications/PusherNotifier.js"></script>
  2. Create a PusherNotifier instance:

      $(function() {
        var pusher = new Pusher('YOUR_APP_KEY');
        var channel = pusher.subscribe('my_notifications');
        var notifier = new PusherNotifier(channel);
  3. Trigger events on your server and see them instantly appear in your web app:


     $app_key = 'YOUR_APP_KEY';
     $app_secret = 'YOUR_APP_SECRET';
     $app_id = 'YOUR_APP_ID';
     $pusher = new Pusher($app_key, $app_secret, $app_id);
     $data = array('message' => 'This is an HTML5 Realtime Push Notification!');
     $pusher->trigger('my_notifications', 'notification', $data);

Ruby require 'pusher'

    Pusher.app_id = 'YOUR_APP_ID'
    Pusher.key = 'YOUR_APP_KEY'
    Pusher.secret = 'YOUR_APP_SECRET'

    data = {'message' => 'This is an HTML5 Realtime Push Notification!'}
    Pusher['my_notifications'].trigger('notification', data)


A tutorial explaining how to use the example can be found here:




  1. Rename examples/php/config.example.php to config.php and add your Pusher app credentials.
  2. Running on a web server navigate to examples/index.html to see a side-by-side page example and click the 'Notify' button to trigger a notification.

Ruby - sinatra

  1. Rename examples/ruby-sinatra/config_example.rb to config.rb and add your Pusher app credentials
  2. Update examples/notify.html so that the NOTIFY_ENDPOINT has the value /notify
  3. In examples/ruby-sinatra run bundle install to install the dependencies defined in examples/ruby-sinatra/Gemfile
  4. Start the Sinatra server by running bundle exec ruby -rubygems notify.rb
  5. Navigate to http://localhost:4567 (default for sinatra) to see a side-by-side page example and click the 'Notify' button to trigger a notification.