This repository contains example webapp with Twilio Programmable Chat client usage. This webapp supports FCM pushes in browsers supporting FCM.
You will have to create the FCM credentials by yourself.
Also, you will need to create credentials in the Twilio Console with created certificates and app identifiers and store it in configuration.json
file.
fcmConfig
-> firebaseConfig
JSON object.manifest.json
configuration should be saved in the fcmConfig
-> manifest
JSON object.Keep in mind, that to send pushes you have to turn on the push features for your service instance via Twilio Console
The app is served on localhost using express.js app on port 3000
.
The app uses ngrok
to expose the token provider to the internet - be careful with exposing your actual credentials and secrets to the internet.
It is possible to configure the ngrok
to use predefined subdomain via configuration.json
file:
{
...
"ngrokSubdomain": "somengroksubdomain",
...
}
In the result, the app and all it's supporting files are available on http://localhost:3000
and https://<yourngroksudbomain>.ngrok.io
.
Additionally, ngrok
exposes it's own status and inspect endpoint at http://localhost:4040
.
All JS and json files used in the project are served through the app.js:
/
- main entry point for the app.
/token
- token generator
/chat-client-configuration.json
- Twilio Programmable Chat configuration. Used to set Chat Client options, configured in configuration.json
:
...
"chatClient": {
"options": {
"logLevel": "info"
}
},
...
/firebase-configuration.json
- Firebase configuration used in FCM push registration
/manifest.json
- Firebase ServiceWorker configuration
/firebase-messaging-sw.js
- Firebase ServiceWorker JavaScript
/firebase-config.js
- configuration for Firebase (same data as /firebase-configuration.json
) exposed as JavaScript object. Used for ServiceWorker
/firebase-support.js
- helper for working with Firebase, handles registration, pushes and showing alerts
/logging.js
- logging helper, prints the info, warn, error, debug and events in console
/twilio-chat.js
- main Twilio Programmable Chat package
/chat-client-helper.js
- helper for Chat client. Handles registration, events and push registration
/test.js
- test file, running right after client is fully initialized. Used for quick testing / proof-of-concept scripting
Configuration for token provider is stored in the configuration.json
file. The example with correct structure can be learned from configuration.example.json.
tokenGenerator
JSON array contains keys needed for token composition (accountSid
, signingKeySid
, signingKeySecret
and serviceSid
keys) and Credential SID for FCM you've created earlier (fcm
key):
{
...
"tokenGenerator": {
"accountSid": "ACxxx",
"signingKeySid": "SKxxx",
"signingKeySecret": "xxx",
"serviceSid": "ISxxx",
"fcm": "CRxxx"
},
...
}
Token provider is served on http://localhost:3000/token
or https://<yourngroksubdomain>.ngrok.io/token
.
npm install
configuration.json
with your informationnpm start