How to build your own Hybrid JS Interface with Android?

By Swagat Parida

Webview <----> Native JS

Introduction

Sample Android app with JS <-> WebView <-> Native communication. This application explains about base communication between JavaScript and Native code in Android. Also, this sample app has WebView implementation using JavascriptInterface implementation.

Background

How does hybrid mobile app framework work behind the scenes? How does WebView communicate with JS/Web pages?

Using the CodeThe below steps will let us create a base framework which allows a native app to communicate with JavaScript or WebView components.

STEP 1: Create JavascriptInterface Class

STEP 2: Create WebView Activity

Webview JS Injection

STEP 3: JS Functions to Call Native Implementations

Plugin Callback Handler

STEP 4: Manifest Settings

STEP 5: Assets Directory

The complete sample app and source code can be downloaded @https://github.com/swagatblog/WebViewJSBridgeAndroid.

???

??

?

? ??

??

???

? ??

??Please contact

Swagat Parida