|
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: "Web to native code communication on Android using JavaScript Interfaces" |
| 4 | +description: "Javascript Interface can be helpful when you need to call native code from a webview on Android." |
| 5 | +date: 2019-09-06 |
| 6 | +image: /assets/images/posts/android-js.jpg |
| 7 | +tags: [android, java, mobile application development, javascript, web development] |
| 8 | +comments: true |
| 9 | +seo: |
| 10 | + - type: "BlogPosting" |
| 11 | +authors: [fabrizio_duroni] |
| 12 | +--- |
| 13 | + |
| 14 | +*Javascript Interface can be helpful when you need to call native code from a webview on Android.* |
| 15 | + |
| 16 | +--- |
| 17 | + |
| 18 | +In a [previous post]( "javascript swift") I described how you can call native Swift code from the JavaScript code of web page loaded inside a `WKWebView`. Today I will show you how to achieve the same result for tan Android Apps. I will a part of the Android SDK called `JavascriptInterface`. |
| 19 | + |
| 20 | +#### Implementation |
| 21 | + |
| 22 | +I will use the same simple I used in the previous post for iOS. The html page contains a form with 2 input fields and a button. We want to be able to read the form data inserted when the user clicks on the button and do some action on the Java code side. In this sample case we will show a simple `AlertDialog` that contains the form data. |
| 23 | +Let's start by setting up the `Activity` that will display the form, `MainActivity`. The first thing to do is to setup the `WebView` by declaring it in the activity layout. After that we can already setup the code that will load the web page in the `onCreate` method of the `MainActivity`. |
| 24 | + |
| 25 | +```java |
| 26 | +public class MainActivity extends AppCompatActivity { |
| 27 | + |
| 28 | + @SuppressLint({"SetJavaScriptEnabled", "AddJavascriptInterface"}) |
| 29 | + @Override |
| 30 | + protected void onCreate(Bundle savedInstanceState) { |
| 31 | + super.onCreate(savedInstanceState); |
| 32 | + setContentView(R.layout.activity_main); |
| 33 | + |
| 34 | + WebView formWebView = findViewById(R.id.webview); |
| 35 | + formWebView.getSettings().setJavaScriptEnabled(true); |
| 36 | + formWebView.addJavascriptInterface(new FormJavascriptInterface(this), "Android"); |
| 37 | + formWebView.loadUrl("file:///android_asset/form.html"); |
| 38 | + } |
| 39 | +} |
| 40 | +``` |
| 41 | + |
| 42 | +The important thing to note in the code above is the call `formWebView.addJavascriptInterface(new FormJavascriptInterface(this), "Android");`. By calling this method we are creating on the `window` global javascript variable a new object called `Android`. I will be able to use it by calling `window.Android.<some method>`. Where are this method declared? As you can see the first parameter of the method `addJavascriptInterface` is an object called `FormJavascriptInterface`. This class contains a method named `showUser` annotated with `@JavascriptInterface`. This annotation enable the Android SDK to expose this method to the `window.Android` object exposed on the web side. |
| 43 | + |
| 44 | + |
| 45 | +```java |
| 46 | +public class FormJavascriptInterface { |
| 47 | + private Context context; |
| 48 | + |
| 49 | + FormJavascriptInterface(Context context) { |
| 50 | + this.context = context; |
| 51 | + } |
| 52 | + |
| 53 | + @JavascriptInterface |
| 54 | + public void showUser(String name, String email) { |
| 55 | + new AlertDialog.Builder(context) |
| 56 | + .setTitle("User") |
| 57 | + .setMessage(name + " " + email) |
| 58 | + .show(); |
| 59 | + } |
| 60 | +} |
| 61 | +``` |
| 62 | + |
| 63 | +So as you can imagine now I'm able to call the method `showUser` inside the html page loaded in the `WebView`. Let's see the final implementation of the web page. |
| 64 | + |
| 65 | +```html |
| 66 | +<!DOCTYPE html> |
| 67 | +<html> |
| 68 | + <head> |
| 69 | + <meta charset="utf-8"> |
| 70 | + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> |
| 71 | + <title>ExploreWKWebViewJavascript</title> |
| 72 | + <script type="text/javascript"> |
| 73 | + function submitForm() { |
| 74 | + Android.showUser(document.getElementById("name").value, document.getElementById("email").value); |
| 75 | + } |
| 76 | + </script> |
| 77 | + </head> |
| 78 | + <body> |
| 79 | + <div> |
| 80 | + <h2>Enter your data:</h2> |
| 81 | + <div> |
| 82 | + <label for="email">Email:</label> |
| 83 | + <input type="email" id="email" placeholder="Enter email" name="email"> |
| 84 | + </div> |
| 85 | + <div> |
| 86 | + <label for="name">Name:</label> |
| 87 | + <input type="value" id="name" placeholder="Enter name" name="name"> |
| 88 | + </div> |
| 89 | + <button onclick="submitForm()">Click me</button> |
| 90 | + </div> |
| 91 | + </body> |
| 92 | +</html> |
| 93 | +``` |
| 94 | + |
| 95 | +As you can see in the submit form we are calling the method we saw before annotated `@JavascriptInterface`. The parameter are passed as a normal JavaScript call. |
| 96 | +You can find the complete code example in this [github repository](https://github.com/chicio/Explore-JavascriptInterfaces "github repository"). |
| 97 | + |
| 98 | +#### Conclusion |
| 99 | + |
| 100 | +The `JavascriptInterface` is really powerful. It lets you implement a deeper web to native integration that could significantly improve the general user experiences. `JavascriptInterface`, the best web to native integration for :robot: Android :robot:. |
0 commit comments