Ably Phonegap / Cordova / Browser demo
Ably is the platform that powers synchronized digital experiences in realtime. Whether attending an event in a virtual venue, receiving realtime financial information, or monitoring live car performance data – consumers simply expect realtime digital experiences as standard. Ably provides a suite of APIs to build, extend, and deliver powerful digital experiences in realtime for more than 250 million devices across 80 countries each month. Organizations like Bloomberg, HubSpot, Verizon, and Hopin depend on Ably’s platform to offload the growing complexity of business-critical realtime data synchronization at global scale. For more information, see the Ably documentation.
This Phonegap / Cordova demo uses the Ably real-time message service and provides a simple example of how to use the following features:
- Channels and publishing and subscribing to messages
- Presence, entering channels and subscribing to presence events
- Token authentication from a URL
- Message and presence history
Want to try this demo now? Deploy to Heroku for free:
If you are deploying to Heroku, then your app by default will not have history enabled which means all chat data is lost after 2 minutes. See enabling history below.
Remember to set your api key on Heroku via the CLI (heroku config:set ABLY_API_KEY=<YOUR_KEY>
) or the dashboard
- Run
npm install
. This will install the dependencies and the Cordova Command-Line Interface. - Install cordova-plugin-whitelist by running
./node_modules/.bin/cordova plugin add cordova-plugin-whitelist
in the root folder of the project. - Add the needed platforms (e.g. Android, iOS):
./node_modules/.bin/cordova platforms add android
. The cordova CLI tool should install the whitelist plugin for the specific platform. - Run the application on your mobile device:
./node_modules/.bin/cordova platforms run android
- Use the app.
You can use the remote debugging feature of Chrome, or Safari.
Deploy to Heroku for free:
If you are deploying to Heroku, then your app by default will not have history enabled which means all chat data is lost after 2 minutes. See enabling history below.
OR access our demo app running on Heroku at:
This static site demo is hosted on Heroku, there is no server-side code to run this demo. If you want to run this app with a local static website server, you can use Grunt grunt server
. Make sure you have run npm install
beforehand.
Use the same steps as running on a mobile device, but use browser
as a platform:
- Make sure you have Cordova CLI installed.
- Add cordova-plugin-whitelist.
- Use
cordova platforms add browser
to add abrowser
platform. - Run in the browser:
cordova run browser
.
In order to make changes to the app, you will need grunt to compile the SCSS
files into CSS
.
A grunt task has been set up to spin up a local server and watch for any changes you make, and then build the CSS
files automatically.
You can run the grunt task as follows:
npm install
grunt watch:server
If your app is running on Heroku, or you have run the Express server with an ABLY_API_KEY
environment variable, then it is likely that history is not yet enabled for your application. As such, all message and presence history will be discarded by Ably after 2 minutes.
The app publishes, subscribes and registers presence on a channel named mobile:chat
. To enable history on this channel, please see our support article how do I enable history.
The following query string params can be appended to the app URL to change the default configuration of the demo:
autoLogin
: do not prompt the user for a username and log the user in automaticallylogLevel
: configure the Ably Realtime log level: 0 is lowest, 5 is most verbosekey
: use this API key instead of the default end point for generating a tokenenvironment
: defaults toproduction
, but can be configured assandbox
for example