A JBoss Project
Red Hat

Posts tagged with 'cordovasim'

In this blog I would like to discuss probably the most important issue CordovaSim / Ripple users might face:

The $.ajax GET / POST / PUT / DELETE does not fire from inside of CordovaSim / Ripple - but it does via the IOS Simulator and from a real Android Device. How am I supposed to handle it?
— CordovaSim user

Firstly, let’s discuss the root of the problem…​

Same Origin Policy (SOP)

In computing, the Same Origin Policy is an important security concept for a number of browser-side programming languages, such as JavaScript. The policy permits scripts running on pages originating from the same site to access each other’s methods and properties with no specific restrictions, but prevents access to most methods and properties across pages on different sites. Basically, if the web application sends request to the same server, then there will be no restrictions and everything will work like a charm. However, if the request is sent to another server (Cross-domain request - XDR), the browser will block it with the following error:

No 'Access-Control-Allow-Origin' header error

How to workaround Same Origin Policy (SOP)?

In the general case there are several ways to do it:

  • Proxy - one can create a proxy and have it to fetch data from the remote server instead of sending request directly. To the browser it seems that web application exchanging the data on the same server:

No 'Access-Control-Allow-Origin' header error
  • JSON with padding (JSONP) - this approach takes advantage of the fact that <script> tags are not subject to the Same-Origin policy. For instance, JavaScript libraries like jQuery can be included to the web page even if they are hosted on another server. More information about JSONP can be found in the following article.

  • Cross-Origin Resource Sharing (CORS) - W3C standard that allows Cross-Domain communication from the browser. CORS support requires coordination between both the server and client. The basic idea behind CORS is to use custom HTTP headers to allow both the browser and the server to know enough about each other to determine if the request or response should succeed or fail. Cross-Origin Resource Sharing can be used as a modern alternative to the JSONP pattern. While JSONP supports only the GET request method, CORS also supports other types of HTTP requests. More information about CORS can be found in the following blog.

Ripple and CordovaSim use Proxy approach for handling Cross-domain AJAX.

Cross-domain AJAX in CordovaSim

There is a Cross Domain Proxy setting in CordovaSim / Ripple. Basically, Cross-domain AJAX work depends drastically on it. User can choose between three options:

  • Disabled - CordovaSim / Ripple will not proxy HTTP requests. This option should be used only if the remote server supports CORS. If it is not, Cross-domain requests will be restricted by the Same Origin Policy.

  • Local (default) - local proxy will be used for handling HTTP requests. However, local proxy is implemented differently in Ripple and CordovaSim. Ripple has local Node.js proxy server, whereas CordovaSim uses Jetty ProxyServlet for that purpose. Nonetheless, from the user perspective there are no differences at all.

  • Remote - both Ripple and CordovaSim will use the following remote server for HTTP requests proxying.

Proxy settings
In most cases "Remote" and "Local" options can be used interchangeably for remote server calls. However, if the server is running locally one must use either "Local" or "Disabled" option depending on the local server configuration (i.e. CORS compatibility).

Security note for "Remote" proxy

In the 4.2.3.Beta1 and 4.3.0.Alpha1 releases a security warning for "Remote" proxy was added.

Remote
If the app is transferring sensitive data (authentication tokens, credentials etc.), it is strongly recommended to use "Local" proxy (enabled by default) instead of the "Remote" one. The "Remote" proxy is cloud-hosted and there is a potential leak threat. Nonetheless, if the hybrid app has no sensitive data, one can safely use "Remote" proxy without any risk.

Conclusion

To put it in a nutshell, there is no silver bullet for handling all Cross-domain AJAX requests in CordovaSim / Ripple, due to the fact that it dramatically depends on the server side setup. So, if one has faced the issue coupled with the Same Origin Policy / Cross-Domain AJAX (i.e. GET / POST / PUT / DELETE requests the hybrid app is trying to perform are either blocked by the browser or server returns 5XX error), the first thing they should do is to "play" with Cross Domain Proxy settings. Using one of the options must definitely tackle the problem.
Have fun!

Ilya Buziuk
@ilyabuziuk

Recently several people have asked me the following question:

How can I test Nexus 9 / Moto G / LG G3 etc. via BrowserSim? There is no such device in the preference list.
— BrowserSim user

Actually, it’s extremely easy to do…​

Basic concepts

Firstly, let’s introduce several fundamental concepts which we will need in the further discussion:

  • Physical pixel - the cell in the device’s display matrix.

  • Display resolution - the number of distinct physical pixels in each dimension that can be displayed. For instance, resolution 640 × 1136 means that the width of the display is 640 pixels and the height is 1136.

  • Pixel Ratio - the value which determines how a device’s screen resolution is interpreted by the CSS. Basically, CSS interprets a device’s resolution by the formula: Display Resolution / Pixel Ratio.
    For example, iPhone 5s has the following parameters:

    • Display Resolution: 640 x 1136

    • Pixel Ratio: 2

    • CSS Interpreted Resolution: (640 / 2) x (1136 / 2) = 320 x 568

The reason why pixel ratio was created is due to the fact that screens of the modern phones have high resolution. So, if devices with high resolution had pixel ratio of 1 (i.e. CSS Interpreted Resolution = Display Resolution), then it would be almost impossible to browse on the Internet cause the content would be too small to see.
  • User-Agent - HTTP header that identifies the client software. When you open a web page, your web browser includes a user-agent header in the request sent to the server that hosts the website. This string essentially introduces your browser to the server, describing which browser version you are using and relating other information about your computer or mobile device, such as the operating system and its version. The server can use this information to provide content that is tailored for your specific browser.

How to add custom device?

Now let’s move from theory to practice. Run BrowserSim, open preferences (Right click → Preferences…​) and push the Add button on the Devices tab :

BrowserSim preferences

The Add Device dialog will be shown:

Add device dialog

Now all you need is to input correct data for your specific device and press the "OK" button - newly created device will be added to the preferences. Let’s practice on the real sample - Microsoft Lumia 928. This phone has the following parameters:

  • Display Width: 768

  • Dispaly Height: 1280

  • Pixel Ratio: 2.4

  • User-Agent: Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 928)

All device specific information can be easily found on the web

Unfortunatelly, there is no Microsoft Lumia skin yet, so you will have to select some other one. Of course this doesn’t make the experience smooth and complete but you will be able to achieve the main aim: test and reproduce layout issues for that device. Although we are trying to update the list of skin / devices, we won’t be able to cover every single case anyway. So, from time to time you will need to do it manually. By the way, in the brand new 8.0.1.GA release we have added IPhone 6 / 6 plus devices:

IPhone 6 / 6 plus devices

BrowserSim standalone

For those who don’t use Eclipse / JBoss Developer Studio there is a standalone mode of BrowserSim. More details about BrowserSim standalone can be found in the following blog.

Conclusion

We are trying our best to make our tools as good as possible. User feedback is what we are seeking for now. We look forward to hearing your comments, remarks and proposals.
Merry Xmas and Happy New Year!
Have fun!

Ilya Buziuk
@ilyabuziuk

In this article, I’m happy to introduce you new BrowserSim / CordovaSim features, which are available in the new JBoss Developer Studio 8.0.0.GA. Basically, I want to focus on:

  • JavaFx web engine

  • Eclipse console logging

  • Dev Tools Debugger

JavaFx web engine

BrowserSim and CordovaSim have a new JavaFx web engine as an alternative to SWT WebKit. In the original there was only one web engine - SWT WebKit. Unfortunately, it has several drawbacks. For example, using SWT WebKit on Windows requires Apple Safari installation (provides SWT WebKit engine), which is pretty obsolete for now - May 9, 2012 is the date of the last update. Moreover, SWT WebKit doesn’t support Debugger API. Due to these limitations it was decided to add JavaFX web engine support. Web engine can be changed in Menu → Preferences → Settings Tab → Browser Engine.

JavaFx web engine
If you want to use JavaFX web engine, you need to run BrowserSim / CordovaSim against Oracle JDK version 7 or higher (version 8 is recommended)

Eclipse console logging

Eclipse console logging is available for both SWT Webkit and JavaFx web engines. Now the output of the main javascript console functions (console.log, console.info, console.warn, console.error) is displayed in the Eclipse console.

Eclipse Console Logging

Dev Tools Debugger

Dev Tools Debugger is available only for JavaFx web engine. One can connect the debugger to the BrowserSim / CordovaSim (Right click → Debug → Dev Tools…​) and step through the code, introspect variables and so forth.

Dev tools Debugger

Demo

Here is a short demo video with the new features:

All these features are also available for CordovaSim

BrowserSim standalone

For one who doesn’t use Eclipse / JBoss Developer Studio there is a standalone mode of BrowserSim. However, only SWT WebKit web engine is supported (we are planning to add JavaFx support in the next releases - JBIDE-18703). More details about BrowserSim standalone can be found in the following blog.

BrowserSim FAQ

BrowserSim FAQ can be found here. If you wasn’t able to find the answer, just post your question in the comments to this blog.

Known issues

  • Dev Tools Debugger doesn’t work properly with the Oracle JDK 8u20. I do hope it will be fixed in the upcoming JDK releases - RT-38918, JBIDE-18526

  • JavaFx which is shipped with Oracle JDK 7 has no localStorage support. Fortunately, it is fixed in JDK 8 - RT-29584

  • JavaFx which is shipped with Oracle JDK 7 has no WebSocket support, which is vital for LiveReload functionality. So, LiveReload doesn’t work with Oracle JDK 7 for JavaFx web engine. Fortunately, it is fixed in JDK 8 - RT-14947

  • JavaFx HTML 5 Date and time inputs do not function properly - RT-34974, JBIDE-17054

Conclusion

We are trying our best to make our tools as good as possible. User feedback is what we are seeking for now. We look forward to hearing your comments, remarks and proposals. Please, comment below about features you would you like to have in the upcoming releases!
Have fun!

Ilya Buziuk
@ilyabuziuk

In this article, I’m happy to introduce you the OAuth authorization via Phonegap’s inAppBrowser plugin with CordovaSim.

I was inspired to write this blog after reading a great article about Google API OAuth with PhoneGap’s InAppBrowser by Michael Dellanoce. I also want to spill the beans about new CordovaSim’s features like: JavaFx web engine, hybrid app debugging and eclipse console logging, that will be available in Beta3 (but you can try them now from the nightly build 4.2.x update site).

Overview

OAuth is an open standard for authorization. It specifies a process for resource owners to authorize third-party access to their server resources without sharing their credentials. Designed specifically to work with Hypertext Transfer Protocol (HTTP), OAuth essentially allows access tokens to be issued to third-party clients by an authorization server, with the approval of the resource owner, or end-user. PhoneGap Developers use inAppBrowser’s API to show the OAuth consent page.

Demo

CordovaSim supports inAppBrowser plugin and handles OAuth authorization. Here is a short video with OAuth demo and brand-new CordovaSim’s features (source code is also taken from the Michael Dellanoce’s article):

How to give it a go?

The sample should work with JBoss Tools 4.2.0 Beta3 release and later versions.

  • Clone the demo project

  • File → Import → Import Cordova Project

  • Right-click on the project → Properties → Hybrid Mobile Engine → Download → 3.4.0 (select as default engine)

  • Create a Google Developers Console project

  • Copy and paste Client ID and Client secret to index.js (lines 80-81) of the hybrid project

  • Right-click on the project → Run As.. → Run with CordovaSim

A few things to notice here : first, the Hybrid Mobile Tools imports the project into Eclipse and configures the proper plugins without there being any Eclipse specfic setup in the project. This works because the project is following the conventions from Cordova CLI generated projects and the import wizard understands this.

Secondly, when using Java 8, you can connect the Chrome debugger to the CordovaSimulator (Right click → Debug on browser) allowing you to step through the code, introspect variables and so forth.

Conclusion

We are trying our best to make CordovaSim as good as possible. User feedback is what we are seeking for now. We are looking forward to hearing your comments / remarks!
Have fun!

Ilya Buziuk
@ilyabuziuk

Looking for older posts ? See the Archived entries.
back to top