Push Notifications

REST API Tutorials Back to mqtt-chat.com

Search…

Push Notifications

Web push notifications allow users to opt-in to timely updates from sites they love and allow you to effectively re-engage them with customized, relevant content.

MQTT Chat uses web push notifications to notify yours offline users of new received messages  even if your website is not opened in the browser. Your users will therefore be up to date with all  chat events on your site when they are consulting other sites.
For web push notifications MQTT Chat  use a proprietary solution developed in erlang so that it can be integrated into our MQTTs servers and therefore sending of PUSH messages will be done in a transparent way.  In addition, all sent messages are encrypted and compatible with major navigators such as chrome, firefox, opera, safari etc.
Integration
To integrate MQTT chat Web Push feature, simply download and unzip a service worker  mqttchat_sw_1_0.js at the root directory of your website . This service worker is responsible for displaying offline notifications to users. 
That's all. Communication with the service worker will be done automatically through the MQTT chat application.
MQTTChat service worker in the root folder of your website
Check integration
If the service worker is missing or not in the correct location, You will see the following error in the browser console when you launch MQTT chat. Error indiquate that the service worker is missing (404 not found).
 The MQTT chat service worker must be added to the addresshttps://www.website.com/mqttchat_sw_1_0.js  which corresponds to the root directory of the  website in this example.
So if we add  the service worker to the root directory of website. Error will no longer be displayed and user is successfilly registred to  web push notifications.
The user can now receive notifications about  received messages when he is offline.
Firefox Notificate for text message received
Chrome notification for text message received
Chrome notification for image message received
Samsung mobile browser & google fcm android
Customization
A little experienced developer can change MQTTChat  service worker code to customize notification icon and badge or  even messages  to be displayed to the user.  Source code is shared publicly in a github reposatory.
var notificationOptions = {
    body: 'mqttchat push message.',
   /*
    icon: server_url+'/images/logo-192x192.png',
    badge: server_url+'/images/badge-72x72.png',
    */
    tag: 'mqttchat-notification' ,
    data:'',    
    dir:  (lg==='ar')? 'rtl':'ltr'
  };

MQTTchat Cloud Web - Previous

Javascript Events

Next - MQTTchat Cloud Web

Webhooks

Last modified 25d ago

Copy link

Outline

Integration

Check integration

Customization