- Hello, World!
- PhoneGap Initialization
- Leveraging PhoneGap APIs
- Enhancing the User Interface of a PhoneGap Application
- Testing and Debugging PhoneGap Applications
- Dealing with Cross-Platform Development Issues
This chapter is from the book
This chapter is from the book
This chapter is from the book
Dealing with Cross-Platform Development Issues
As interesting as all of these PhoneGap capabilities are, there are a lot of issues that make cross-platform development tasks difficult. The PhoneGap project is supported by developers from all over the world, including developers who may have experience with only one or a small number of mobile platforms and developers who have a strong opinion about how something should be done. The problem with this is that when you take development projects written by different people and try to collect them into a single framework, you can bump up against inconsistencies. Add to this that every mobile platform supported by PhoneGap is different and has different ways of doing things, and you have a difficult task to make everything work cleanly and seamlessly.
NOTE
To the PhoneGap project’s credit, things move pretty quickly, and the issues I’m complaining about here could very well be fixed in any subsequent release of the framework. Be sure to check the latest documentation before working around any of the issues listed in the sections that follow.
Let’s look at some examples.
API Consistency
Figure 2-18 shows the supported feature matrix from the PhoneGap web site; you can find the page at www.phonegap.com/about/features. As you can see, the table is pretty complete; there are some gaps, but it’s more full than empty. On the other hand, since PhoneGap is supposed to be a cross-platform framework, the gaps in this table make it very hard to truly create a cross-platform application using those APIs. If a particular feature you want to use in your application is supported on only some mobile platforms, then you’ll have to make special accommodation within your application for platforms that do not support the particular API.
)
Figure 2-18 PhoneGap-supported feature matrix
Another problem arises when you look through the API documentation found at http://docs.phonegap.com/. For most of the PhoneGap APIs, the documentation lists that the APIs are supported only on Android, BlackBerry, and iOS devices. It’s likely the issue here is that the PhoneGap developers are like most developers and don’t like to write (or update) documentation; the impact on you is huge. Do you rely upon the API documentation? Do you instead ignore the documentation and use feature matrix as the correct reference? Or do you cover your bases and assume it is all wrong and test everything?
No matter what, this can be quite a challenge; ideally the PhoneGap project team will get more organized and make sure all of the documentation is up-to-date as each new version is released.
Multiple PhoneGap JavaScript Files
One of the first issues I bumped up against when learning to do cross-platform PhoneGap development was that the PhoneGap JavaScript library is different between mobile platforms. So, the JavaScript code within the PhoneGap Java-Script file for BlackBerry projects is different from what is found in the PhoneGap Java-Script file for Android projects. My original thought when I started was that I could just copy the web content folder between projects, build the application, and be done, but since each platform’s JavaScript file is different, I would have to copy over the web content and then also make sure the correct PhoneGap JavaScript file was in the folder as well.
To make things work, with earlier versions of the PhoneGap framework, the BlackBerry and bada PhoneGap JavaScript libraries had different file names than on other platforms. This has supposedly been fixed, but you better check to make sure when building applications.
Web Content Folder Structure
As you will see in the chapters that follow, in some cases, some PhoneGap project developers have created nonstandard project folder structures for PhoneGap projects. For example, for a typical Symbian project (described in Chapter 7), the application’s web content files would normally be placed in the root of the project’s folder structure. The HTML, JavaScript, and CSS files should be placed right at the top of the folder hierarchy, so they can be easily accessed when working with the project. For some bizarre reason, the PhoneGap project places the files in a framework/www folder, complicating the project’s folder structure and making it more difficult to get to the application’s content files.
Application Requirements
One of the things you might bump into as you build cross-platform PhoneGap applications is the need to supply additional files in your application to accommodate the requirements for a particular OS version. For example, in the default PhoneGap project for iOS, you will find the following note:
<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
Apparently a feature was added in PhoneGap 0.9 that requires the use of the JSON.stringify() function, so you will have to make sure you include the appropriate JSON library in your application. This further complicates a developer’s ability to use an application’s web content across multiple device platforms since an iOS application in this example might have additional lines of code needed to support this iOS-specific feature.
Application Navigation and UI
Mobile device platforms typically share some common elements but at the same time implement unique features or capabilities that help set them apart from competitors. The Android and iOS operating systems support many of the same features but sometimes implement them in a different way. Because of this, any mobile application designed to run on different mobile operating systems must take into consideration the differences between mobile platforms.
As you build PhoneGap applications for multiple mobile device platforms, you will need to implement different UI capabilities on different operating systems. On the Android and BlackBerry platforms, there’s a physical Escape button that can be pressed to return to a previous screen; on iOS, there will need to be a back button added to the bar at the top of the application screen.
Because of this, a PhoneGap application will need to either contain additional code that checks to see what platform it’s running on and update the UI accordingly or it will need to have different versions of the application’s web content depending on which OS the application is running on. Neither approach is easy. There are several books on mobile web development available that deal directly with these types of issues.
Application Icons
Each mobile platform and often different versions of a particular device OS have different requirements for application icons. A developer building PhoneGap applications for multiple device platforms will need to be prepared to create a suite of icons for their application that addresses the specific requirements for each target device platform and/or device OS. The PhoneGap project maintains a wiki page listing the icon requirements for the different supported operating systems at http://wiki.phonegap.com/w/page/36905973/Icons%20and%20Splash%20Screens.
Additionally, for some devices on some carriers (older BlackBerry devices, for example), the mobile carrier applies a specific theming to the OS in order to help distinguish themselves in the market. Any application icon designed for one of these devices will need to accommodate, as best as possible, rendering pleasantly within different themes.