https://www.twilio.com/docs/flex/notifications-framework#browser-notifications-handler
Disclaimer: this plugin is an independent project that is not supported by Twilio.
The Push Notifications Flex Plugin allows you to create desktop notifications for agents using Twilio Flex. Notifications occur when a task is reserved for an agent.
Works in all browsers that support the Push API: https://caniuse.com/#feat=push-api
Make sure you have Node.js as well as npm
installed.
Afterwards install the dependencies by running npm install
:
git clone https://github.com/cweems/plugin-push-notifications.git
cd plugin-push-notifications
# If you use npm
npm install
Add these to the options
object in showLocalNotification
.
{
// Visual Options
"body": "<String>",
"icon": "<URL String>",
"image": "<URL String>",
"badge": "<URL String>",
"vibrate": "<Array of Integers>",
"sound": "<URL String>",
"dir": "<String of 'auto' | 'ltr' | 'rtl'>",
// Behavioural Options
"tag": "<String>",
"data": "<Anything>",
"requireInteraction": "<boolean>",
"renotify": "<Boolean>",
"silent": "<Boolean>",
// Visual & Behavioural Options
"actions": "<Array of Strings>",
// Information Option. No visual affect.
"timestamp": "<Long>"
}
In order to develop locally, you can use the Webpack Dev Server by running:
npm start
This will automatically start up the Webpack Dev Server and open the browser for you. Your app will run on https://localhost:8080
. If you want to change that you can do this by setting the PORT
environment variable:
PORT=3000 npm start
When you make changes to your code, the browser window will be automatically refreshed.
Once you are happy with your plugin, you have to bundle it, in order to deply it to Twilio Flex.
Run the following command to start the bundling:
npm run build
Afterwards, you'll find in your project a build/
folder that contains a file with the name of your plugin project. For example plugin-example.js
. Take this file and upload it into the Assets part of your Twilio Runtime.
Note: Common packages like React
, ReactDOM
, Redux
and ReactRedux
are not bundled with the build because they are treated as external dependencies so the plugin will depend on Flex which would provide them globally.
Made with gratitude to @master-atul for the article on implementing web push: https://medium.com/izettle-engineering/beginners-guide-to-web-push-notifications-using-service-workers-cb3474a17679