AppDynamics supports monitoring for hybrid applications based on the iOS/Android native SDK or any Cordova-based framework.

Hybrid Applications

Hybrid applications are web applications running inside an Android or iOS native shell. The web application can be in the form of an Android WebView, an iOS WKWebViews, or a Cordova web application that consists of HTML, CSS, JavaScript, and other resources just like a conventional web application. 

Hybrid Use Cases

Mobile RUM supports these two use cases.

  • Native Mobile applications that run web applications or web views. Examples of this are Android WebViews and iOS WKWebView.
  • Applications written in Cordova-based frameworks, such as Ionic, that provide a native shell for running a web application and an interface for native mobile APIs.

Hybrid Application Instrumentation Requirements

For instrumenting hybrid apps, you are required to:

  • Manually instrument the iFrames with the JavaScript Agent. For mobile native applications, the JavaScript Agent is injected into the top-level WebView or WKWebView instance, not in embedded web pages (iFrames). 
  • Manually report events for Cordova-based applications using the plugin JavaScript API.
  • Use Android WebViews or iOS WKWebView for hybrid applications with embedded web views. See Cordova アプリケーションのインストゥルメント化.

Instrumentation Steps

To monitor your hybrid applications, you will need to set up and access Mobile RUM and follow the steps below based on your hybrid use case:

How it Works

For native Android/iOS applications, the Android Agent or iOS Agent will inject the JavaScript Agent into an Android WebView or iOS WKWebView. For Cordova-based applications, the AppDynamics plugin will inject the JavaScript Agent into the web application. 

The diagrams below provide an overview of how Mobile RUM is used to monitor mobile native applications and Cordova-based applications.

Mobile Native Application Architecture
Mobile RUM Architecture Diagram

1 Icon You instrument your mobile application with either the Android/iOS Agent.

2 Icon When your mobile application instantiates a WebView or WKWebView instance, the Mobile Agent injects the JavaScript Agent into it.

3 Icon The JavaScript Agent monitors the performance and WebView usage.

4 Icon The JavaScript Agent reports the application activity by sending beacons to the Mobile Agent.

5 Icon The Mobile Agent repackages the browser beacons into mobile beacons and sends the beacons to the EUM Server.

Cordova-Based Application Architecture
EUM Server Infrastructure Diagram

1 Icon The AppDynamics Cordova plugin injects the JavaScript Agent into the Cordova WebView.

2 Icon The Cordova-based application uses the plugin's JavaScript binding to configure the Mobile Agent.

3 Icon The JavaScript Agent injected into the WebView monitors the application activity and performance.

4 Icon The JavaScript Agent sends browser beacons to the Mobile Agent.

5 Icon The Mobile Agent parses and converts the browser beacons into mobile beacons.

6 Icon The Mobile Agent sends the mobile beacons to the EUM Server.

Mobile Agent and JavaScript Agent Compatibility

When hybrid app support is enabled, the Mobile Agents use an embedded JavaScript Agent to monitor mobile web pages. If you are already monitoring the same mobile web pages with a browser application, the JavaScript Agent version used to instrument the browser application may be different than the JavaScript Agent version used by the Mobile Agent. If the two versions of the JavaScript Agent are incompatible, the Mobile Agent will not be able to instrument web views or access event notifications from web views.

How to Ensure Compatibility

To ensure compatibility, browser applications should use JavaScript Agent version >= 4.5.4 and mobile applications should use Mobile Agent versions >= 4.5.5. When using compatible versions of the JavaScript Agents, the JavaScript Agent of the browser app will report beacons for a web page, and the embedded JavaScript Agent of the mobile app will be ignored and not report beacons because a web page cannot be instrumented with the JavaScript Agent multiple times. 

If you have disabled the Mobile Agent's hybrid app support, there will be no compatibility issues regardless of the JavaScript Agent version used by the browser application.

Troubleshooting Incompatible JavaScript Agent Versions

If you are using incompatible versions of the JavaScript Agents, do one of the following to correct the problem:

  • Upgrade the JavaScript Agent that you are using to instrument the browser application.
  • In the mobile instrumentation, disable the hybrid support (iOS/Android), so that the mobile web pages are only instrumented by the browser application instrumented with the older version of the JavaScript Agent.

Hybrid Application Network Requests

Network calls made in the context of the WebView for Cordova-based applications show up as Ajax calls from the JavaScript Agent.