Good News! We’ve launched an all new Chat Resource Center.
We recommend checking out our new Chat Resource Center, which includes overviews, tutorials, and design patterns for building and deploying mobile and web chat.
We’ve updated our SDKs, and this code is now deprecated.
In this tutorial, we’ll walk you through how to appify your desktop app with PhoneGap and build a responsive UI for your chatroom.
This is Part Three of our three part tutorial series on how to build a fully-featured JavaScript group chat application with jQuery Mobile and PubNub. Here are the other posts:
- In Action: JavaScript Chat App Demo
- Group Chat App Series Overview
- Part One: Building a simple JavaScript chat app
- Part Two: Managing multiple rooms, showing users a history of previous messages, and showing what users are in the room.
As a quick note from here on out I will be showing fragments of the final source code that will not work by copy and pasting. This is in order to focus on the learning points and keep the code examples shorter. If you would like the fully working version please check out the final version of this demo at https://github.com/dristic/pub-messenger.
Using PhoneGap
PhoneGap is a hot topic in the JavaScript world now and has been for a little while. It is a great framework that gives you a base for taking HTML and JavaScript applications and turning them into native mobile applications. I have used a few different frameworks of the same type and would have to say PhoneGap is the easiest to get up and running quickly.
What I used PhoneGap for is turning PubNub Messenger into a native application for iOS and Android. This works by creating a web view for the application that loads the index.html file into it and displays the output on the screen much like a web browser would. In both cases PhoneGap utilizes the underlying web browser technology meaning you will not find much difference in functionality between the two. It also gives us access to native interfaces for geolocation, accelerometer, camera, and more.
Improving With Appcache
Application cache is one of my favorite API’s from the latest HTML 5 specification. What it does is allow much more control over the caching and versioning of files and even lets the user load your app without network access. This is done by adding a cache manifest file and including it in the html header through <html manifest=”my-manifest.appcache”>. You can see my cache manifest here:
I am basically caching everything on the page so it forces loading from the cache as much as possible. This greatly increases performance on mobile phones because even going to the server to see if a file has changed can take a long time. This prevents that by only having to check once for a new appcache file, and if a new appcache file isn’t available, loading everything from disk. Also, do not forget to add the network portion to the cache to fix issues with ajax requests not going through. Now our application is loading quickly inside of a native mobile application. Let’s pat ourselves on the back and move on to responsive UI design.
Responsive UI Design
I know many of you are thinking it is just a buzzword but I wanted to talk a little bit about responsive UI design and how it fits with PubNub Messenger. Personally I think being “responsive” is an overused term that people use as a silver bullet but it does have its place in front end development.
In the application I use media queries to give the user a degraded experience when working on smaller screen sizes. The one place I use this is on the chat room screen. On a smaller screen size I decided that there was not enough room to show the user list as well as the current chat messages. I use media queries to hide the user list box so it does not appear at all. In the future I might spend more time with it and add a button that allowed the user to pull up the list when they wanted to. I also added some queries that scale the portion of the screen taken up by the user list to ensure that the page looks balanced on larger screen sizes. To me this was the best decision to be able to use the same code base for all platforms without having to compile multiple versions of the app.
If the app was much more complicated I would start looking into producing multiple versions for different screen sizes. The idea here is that contextually the user is looking for something different from each device. They might want a quick message update on the phone and a large overview of all chats in the desktop version. This all leads into scalability and future improvements.
Future Improvements
Overall I would say the app is pretty sound. We get some great scalability built-in by using jQuery Mobile and PubNub. Using jQuery Mobile allows us to add screens and components easily and quickly knowing that they will work across many devices. The PubNub API then gives us the back end scalability to go global with a large load of users out of the box. We can then upgrade our service with the click of a button once we acquire more users.
The biggest improvements that we can make to the code is starting to split the JavaScript into multiple files. We can then use something like Grunt to build our source code into one JavaScript file for the application to download. We can also utilize frameworks like SASS to allow our style sheets from growing too large.
We can also improve the functionality of the app by building additional features such as buddy lists, Facebook and Google login, and private messaging. It would be easy to take this project and upgrade it to a full-fledged chat application that rivals some of the best commercial ones available today. I hope you enjoyed this three part series on creating PubNub Messenger and look forward to more tutorials on the amazing things you can do with PubNub. We also want to hear about your improvements to PubNub Messenger so tweet us links to source code and demos we can check out!