Using Ratchet with PhoneGap

Posted on by

When I saw the Ratchet project I was stoked. While the initial site talked about being able to prototype iPhone applications with HTML/JS/CSS it was pretty apparent that this could be something even bigger than that. And sure enough, on their README page it talks about long term goals:

We eventually want to extend Ratchet beyond the prototying for iPhone and create HTML/CSS/JS components for iPad and Android devices. Our dream is that Ratchet becomes the best way to create mobile experiences with web standard languages.

To me, that means this could be a great project for PhoneGap applications. So I threw it into a project and looked at getting it running. Unfortunately nothing happened. I could get some components to work but once I tried to move between pages it wouldn’t respond. I tracked it down to the push.js-esque functionality that they’re using. Specifically, it’s a single line of code that causes issues.

if (xhr.readyState == 4) xhr.status == 200 ? success(xhr, options) : failure(options.url);

The issue is that PhoneGap only seems to return a status of 0 when using XMLHttpRequest. I’m fairly sure this has something to do with the fact that it’s loading from the file system and not a server, but I’m not 100% sure. By making sure that Ratchet accounts for status of 0, page transitions work perfectly.

if (xhr.readyState == 4) xhr.status == 200 || (xhr.status == 0 && options.url.indexOf('file:///') != -1) ? success(xhr, options) : failure(options.url);

I’ve got the full project up on GitHub and you can bring it into PhoneGap Build and test it yourself. I’ve only tested it on iOS but it works pretty damn well. I’m definitely intrigued. I’ve also posted this to the Google Group to see if they can support this out of the box.

Update: Simon mentioned in the comments below that by tweaking the code to check for status 0 AND file system, it would be safer. So I modified the ratchet.js file in my project to take that into account. Thanks Simon.

Related posts:

  1. Using Lawnchair for Data Storage in PhoneGap
  2. PhoneGap for Flex Developers: Debugging PhoneGap Applications on Android
  3. PhoneGap 2.0 Released
  4. Installing the ChildBrowser Plugin for iOS with PhoneGap/Cordova 1.5
  5. The PhoneGap Starter Project
  • http://twitter.com/macdonst Simon MacDonald

    Yes, when you request a page over XHR on the file:// protocol there is no web server available to fill the status property with the correct value. When doing a request of file:// it is safe to equate 0 with 200. If ratchet would check if the requested url starts with file:// then they could conditionally allow 0 as a valid status and call your success callback. I know other frameworks like Dojo and jQuery handle this case correctly.

  • http://blog.digitalbackcountry.com Ryan Stewart

    Awesome, thanks Simon. I tweaked my ratchet.js file to incorporate that. Really appreciate the feedback. 

  • http://www.googma.blogspot.com/ Googma Sansar

    Thank you for nice article. it is really awesome and useful handsout.

  • majditoumi

    Thanks for this article, it’s very useful! I was thinking the same when I saw ratchet :)

  • Karlpcrowley

    Why not contribute this to the repo on github?

  • http://blog.digitalbackcountry.com Ryan Stewart

    I’m planning on it. I started a discussion about it on the mailing list but didn’t get any response. So I’m going to submit a pull request later today and see if they’ll take it.

  • drofnas

    I just read about Ratchet last night and found your blog post when searching to see if anyone had tried putting this together with PhoneGap. This combination works 1000 times better then the other solutions I’ve been trying lately (app-ui, jquery mobile, twitter bootstrap, etc).

    Now I can finally start writing a real application, instead of try to tweak everyone else’s frameworks to squeeze more performance out of them :-)

    I noticed a few issues on my Android device with the demo application. I’ll see if I can track them down and send a pull request your way.

    Samsung Galaxy S2
    Android 4.1.2 (AOKP)

    Again, thanks for combining these 2 awesome projects.

  • http://www.googma.blogspot.com/ Googma Sansar

    it is really awesome info. thank you for informatics post.

  • http://www.extremeictworld.blogspot.com/ Extreme ICT World

    A nice article….

  • http://itechgetfirst.blogspot.com/ iTechgetfirst

    good post and good topic.all the best.

  • http://googma.blogspot.com/ Googma Sansar

    It is really a nice ideas for phoneGap. thank you for sharing good ideas. 

  • Mateenanjum

    Hi Stewart, i just heard about phone gap and i m student of bachelors I want some idea for my FYP in phone gap would you suggest any plz…mateenanjum@gmail.com 

  • Paul

    Just if anyone had put anything in production using Ratchet as a basis for a web app?  Any device issues or advice?