Push Notifications

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.

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.chati.best/mqttchat_sw_1_0.js which corresponds to the root directory of the chati.best 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.

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'
  };