Home

Android, Komunikasi Javascript dan Java di dalam WebView

Mari berdiskusi bersama kami di Group Facebook Kurung Kurawal

Saat ini, banyak sekali aplikasi mobile (kita bahas Android), yang sebenarnya menggunakan teknologi Web dalam pembuatan user interface nya. Selain karena memang lebih mudah, juga dikarenakan umumnya aplikasi sekarang ini hanya menjadi interface untuk mengkonsumsi web service dari sebuah website tertentu.

Post kali ini tidak membahas masalah web service tersebut, namun saya ingin membuat tutorial tentang bagaimana Javascript dalam webview Android, dapat berkomunikasi dengan Java (sebagai native Android), sehingga javascript dapat mengakses resources native android. Hal yang paling sederhana adalah misalnya, bagaimana dari dalam Javascript, dapat keluar dari aplikasi yang sedang berjalan.

Teorinya, untuk menutup sebuah activity Android, kita dapat memanggil method finish() dari activity tersebut, tentu saja, Javascript tidak dapat mengakses activity yang sedang berjalan, karena ruang gerak javascript hanya didalam webview itu saja.

WebView di android memungkinkan developer untuk memberikan interface javascript tambahan yang dapat digunakan untuk mengakses resource native Java.

Konfirmasi WebView Java Interface

Konfirmasi WebView Javascript

Saya asumsikan, pembuatan aplikasi dengan webview sudah dipahami, dan kita akan fokus ke bagaimana memberikan interface javascript kepada webview tersebut.

Jika belum, mungkin bisa baca disini.

Class Java sebagai Javascript Object

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
package com.namaAnda.webapp;
 
import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.webkit.JavascriptInterface;
 
public class JSBridge {
    private final Activity app;
    public JSBridge(Activity a){
        this.app = a;
    }
 
    @JavascriptInterface 
    public void exitApp(){
        app.finish();
    }
 
    @JavascriptInterface 
    public void confirmExitApp(){
        app.runOnUiThread(new Runnable(){
            @Override
            public void run() {
                new AlertDialog.Builder(app)
                .setIcon(android.R.drawable.ic_dialog_alert)
                .setTitle("Konfirmasi")
                .setMessage("Keluar dari aplikasi ? (ini konfirmasi dari Java)")
                .setPositiveButton("Iya", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        exitApp();
                    }
 
                })
                .setNegativeButton("Tidak", null)
                .show();
            }
 
        });        
    }
}

Class ini sederhana saja, hanya berisi constructor, dan 2 method (yang kurang lebih juga sama). Method exitApp, adalah untuk keluar dari aplikasi android tanpa basa basi, sedangkan yang kedua, confirmExitApp, sedikit lebih sopan, yaitu menanyakan konfirmasi terlebih dahulu sebelum keluar.

Anotasi @JavascriptInterface menandakan bahwa method tersebut dapat diakses oleh Javascript. Anotasi ini dibutuhkan untuk android 4.2 keatas.

HTML

Tombol HTML Sederhana

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE>
<html>
<head>
    <title>Test Exit Android APP</title>
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0, user-scalable=no">
    <style>
        body {
            padding: 20px;
        }
 
        button {
            padding: 5px;
            border: solid 1px #900;
        }
    </style>
</head>
<body>
    <button id='exit'>Exit Tanpa Konfirmasi</button>
    <button id='confirmExit'>Exit Dengan Konfirmasi</button>
    <button id='jsConfirm'>Exit dengan Konfirmasi dari Javascript</button>
 
    <script type='text/javascript'>    
    // tentu saja, ini akan lebih mudah jika menggunakan $('#id') milik jQuery
    // atau framework javascript lainnya.
    var g = function(id){ return document.getElementById( id ); }
 
    // Object android adalah interface yang diberikan oleh java kepada webview
    // android ini adalah root Object, artinya berada langsung dibawah window
    // sehingga bersifat global dalam Javascript di webview ini, 
    // bisa dipanggil dengan android atau window.android
 
    g('exit').onclick = function(){
        android.exitApp();
    }
 
    g('confirmExit').onclick = function(){
        android.confirmExitApp();
    }
 
    g('jsConfirm').onclick = function(){
        if(confirm('Keluar ? (ini pesan oleh webview/javascript)')){
            android.exitApp();
        } 
    }
    </script>
</body>
</html>

Activity

Perhatian, saya asumsikan, sudah mengerti cara membuat webview itu sendiri, atau paling tidak sudah mengetahui dimana object Webview tersebut dalam view activity/aplikasi.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
package com.namaAnda.webapp;
 
import android.os.Bundle;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.view.Menu;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
 
public class MainActivity extends Activity {
 
    @SuppressLint("SetJavaScriptEnabled")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        WebView view = (WebView) this.findViewById(R.id.webView1);
 
        view.setWebChromeClient(new WebChromeClient());
        view.setWebViewClient(new WebViewClient());
        view.getSettings().setJavaScriptEnabled(true);
 
 
        // disini kita membuat object baru (object apapun bisa sebenarnya)
        JSBridge jsb = new JSBridge(this);
 
        // kemudian kita memberikan interface untuk mengakses object tersebut
        // kepada webview dengan nama android (nama apapun bisa sebenarnya)
        view.addJavascriptInterface(jsb, "android");
 
        view.loadUrl("file:///android_asset/www/index.html");
 
    }
 
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        return true;
    }
 
}

Semoga bisa berguna. Enjoy!