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.
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
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 address
https://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
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'
};
Last modified 2mo ago