How to implement Push Notification for PHP website

Need of push notification in website :

  • a business can notify customers about special offers
  • a notification can be sent when a particular task or job is finished
  • a news website can notify subscribers when new content has been published

The three key steps to implementing push are:

  1. Adding the client side logic to subscribe a user to push messaging(i.e. the JavaScript and UI in your website that registers a user to push messages).
  2. The API call from your back-end / application that triggers a push message to a user’s device.
  3. The service worker JavaScript file that will receive a “push event” when the push arrives on the device. It’s in this JavaScript that you’ll be able to show a notification.

Client Side :

The first step is to “subscribe” a user to push messaging.

Subscribing a user requires two things. First, getting permission from the user to send them push messages. Second, getting a PushSubscription from the browser.

A PushSubscription contains all the information we need to send a push message to a particular user

This is all done in JavaScript with the Push API.

Send a Push Message :

When you want to send a push message to your users you need to make an API call to a push service. This API call would include what data to send, who to send the message to and any criteria about how the push service should send the message. Normally this API call is done from your server.

Push events on user’s device :

Once we have send push message The push service will keep your message on server until one of the following events occurs :

  1. The device comes online and the push service delivers the message.
  2. The message expires (28 days). If this occurs the push service removes the message from its queue and it’ll never be delivered.

When the push service does deliver a message, the browser will receive the message, decrypt any data and dispatch a push event.

API Needed For Implementing Push Notification :

  • Notifications API: handles notification display
  • Service Workers API: handles the push message when it arrives in the background( service worker )
  • Push API: enables users to subscribe, unsubscribe and receive push messages
  • Web app manifest specification: configures meta information about a web

Web push library php : Click here web-push-php

Web push notifications: sequence diagram

php-push-notification

Some helpful code sample for php push notification:

1) Check if Push is supported:

if(‘PushManager’ in window) {

//Push supported!

}

2) Service workers are a key part of getting push notifications up and running. To register a service worker, first check for support, then call the register() method.

//check for support

if (‘serviceWorker’ in navigator) {

navigator.serviceWorker.register(‘serviceworker.js’).then(function(registration) {

// Registration was successful

}).catch(function(err) {

// registration failed :(

});

}

3) Check Subscription :

window.onload = function() {

if (‘serviceWorker’ in navigator) {

navigator.serviceWorker.register(‘/sw.js’).then(function(registration) {

// Registration was successful, show interface

document.getElementById(‘not-status’).innerHTML = ‘<h4>mobiForge notifications</h4><input type=”checkbox” name=”pushStatus” id=”pushStatus” value=”false” /><label for=”pushStatus”>Receive push notifications for new content</label><div id=”pushStatusMsg”></div>’;

//Check subscription state

checkSubscription();

//Attach listener

document.getElementById(“pushStatus”).addEventListener(‘click’, function(){

subUnsubPush();

});

}).catch(function(err) {

// registration failed :(

console.log(‘ServiceWorker registration failed: ‘, err);

});

}

else {

console.log(“ServiceWorker not supported :-(“);

document.getElementById(‘not-status’).innerHTML = ‘ServiceWorker not supported :-(‘;

}

};

4) Get Subscription :

function checkSubscription() {

navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {

serviceWorkerRegistration.pushManager.getSubscription().then(

function(pushSubscription) {

if(!!pushSubscription) {

//Send subscription to application server

sendSub(pushSubscription);

//Manage interface

pushStatus = true;

document.getElementById(“pushStatus”).checked = true;

document.getElementById(“pushStatusMsg”).innerHTML = ‘<span>You are subscribed!</span>’;

}

else {

//Manage interface

pushStatus = false;

document.getElementById(“pushStatus”).checked = false;

document.getElementById(“pushStatusMsg”).innerHTML = ‘<span>You are not subscribed!</span>’;

}

}.bind(this)).catch(function(e) {

console.error(‘Error getting subscription’, e);

});

});

}

5) A web app manifest is a JSON-based manifest that holds metadata associated with a web application.

{

“name”: “gizmostars.com”,

“short_name”: “Gizmostars”,

“start_url”: “/”,

“display”: “standalone”,

“gcm_sender_id”: “343259482357”,

“gcm_user_visible_only”: true,

“permissions”: [“gcm”]

}