This repository contains an example Cordova app with Twilio Programmable Chat client usage. App is running on both iOS and Android (full functionality with FCM and APN pushes including).
Twilio Programmable Chat functionality achieved using cordova-plugin-twilio-chat plugin. Additionally in this project there is chat-client-helper.js, which subscribes to all events which Chat library emits, logs it in console and shows on screen once user is logged in.
You will have to create the FCM and APN credentials and certificates by yourself and pass it respectively in iOS and Android projects (through xcode in the iOS project and through google-services.json
for Android).
You will need to create credentials in the Twilio Console with created certificates and app identifiers and store it in configuration.json
file.
For getting push registration id on the iOS/Android device this example uses phonegap-plugin-push. Due to this plugin nature it wraps push message to it's own interface and to be able to process the received push in the Chat lib, in this example we are re-building raw notification from PhoneGap's push in the phonegap-push-reparser.js.
Keep in mind, that to send pushes you have to turn on the push features for your service instance via Twilio Console
Token is provided by locally running express.js app. The app uses ngrok to expose the token provider to the internet - be careful with exposing your actual credentials and secrets to the internet.
Configuration for token provider is stored in the configuration.json
file. The example with correct structure can be learned from configuration.example.json:
tokenGenerator
contains keys needed for token composition (accountSid
, signingKeySid
, signingKeySecret
and serviceSid
keys) and Credential SIDs for APN and FCM you've created earlier (fcm
and apn
keys). ngrokSubdomain
is optional field if you want to start ngrok with predefined subdomain for token generation
{
"tokenGenerator": {
"accountSid": "ACxxx",
"signingKeySid": "SKxxx",
"signingKeySecret": "xxx",
"serviceSid": "ISxxx",
"fcm": "CRxxx",
"apn": "CRxxx"
},
"ngrokSubdomain": "somengroksubdomain"
}
Token provider runs on port 3002
on localhost
and is exposed to the internet with ngrok
help.
Token provider has multiple exposed endpoints:
https://<yourngroksubdomain>.ngrok.io/token
) token generator GET endpoint, takes in query parameters identity
and pushChannel
(fcm
or apns
)https://<yourngroksubdomain>.ngrok.io/configuration
) exposes full configuration.json
for debugging the appAdditionally, ngrok exposes it's own status and inspect endpoint at http://localhost:4040
Create new Cordova project with help of cli: cordova create <project-path> <id> <display-name>
.
This repository project was made with this command: cordova create twilio-chat-js-cordova-example com.twilio.rtd.chat.js.cordova TwilioChatJsCordova
cordova plugin add cordova-plugin-twilio-chat --save
cordova plugin add phonegap-plugin-push --save
cordova plugin add cordova-plugin-whitelist --save
npm install --save-dev body-parser cors express ngrok twilio
configuration.json
file in the root folder of the project and fill it with your data (here is the sample configuration.example.json)app.js
and token-provider.js
to your project rootpackage.json
:
"scripts": {
"tokenProvider": "node app.js"
},
recursively copy www
folder from this repository to your project
cordova platform add android
google-services.json
from Firebase Console and put to the root of project<resource-file src="https://github.com/twilio/twilio-chat-js-cordova-example/raw/master/google-services.json" target="google-services.json" />
to the config.xml
inside <platform name="android">...</platform>
section.cordova build android
cordova platform add ios
pod install
inside platform/ios/
folder <your-project-name>.xcworkspace
file with XCode:
cordova build ios
npm install
to install all necessary packagesnpm run tokenProvider
and remember the ngrok url printed in the console.cordova run android
) or iOS (through XCode or with cordova run ios
)