Speed up Android WebView App by localising static resources

Recently I was developing an android app which was using a WebView to display some graphs on dashboard. Rest of application was build on native android code and only this dashboard portion was using webview to load a specific URL where dashboard graphs were displayed.

I used webview to load graphs because creating graphs is too complicated in android as compared to web. Also most of the android graph tools I found were not created to draw attractive graphs.

So I used WebView to display my graphs on android app but things become even worse because I was using this webview dashboard in my main activity. So every time when I open the app it was taking almost 15 to 20 seconds to load and this time is long enough to make users a safe distance from your app.

After searching for some time and doing some tweaking I reached to one of the most effective solution (at-least for my app scenario) and want other to get benefit from it.

1. So first thing we should do is copy all the external static resources (like css, js, fonts files etc) of the webpage to assets folder of your android project. If your project doesn’t have assets folder then you can create one on app root and copy all external static content of your page on this file.

This is specially helpful because most of the time a page takes to load is because of loading external resources like css, jquery file and other external file like in my case there were css, jquery, bootstrap file, fonts, morris chart js and css etc. So if we will load all these files from local devices instead of an http url then it will make a big difference.

2. Now next thing to do is rewrite your all you links to your static resources to local relative URLs. For example if you have added any script reference on your page like this

<script src="https://www.edunyte.com/script.js" type="text/javascript"></script>

or

<script src="../script.js" type="text/javascript"></script>

then change it to like this

<script src="script.js" type="text/javascript"></script>

Here we have assumed that script.js file was on your website root and you have copied it directly in assets folder. If you used to place all js in one folder (may be scripts) and all css in other (may be styles) then you can copy this complete folder to your asset toot and us link in your page like this:

<script src="scripts/script.js" type="text/javascript"></script>

and

<link href="styles/style.css" rel="stylesheet" type="text/css" />

3. Now after this we have to get the webpage content using http request. I normally use Volley StringRequest class for this. You can see code below to get HTML content of any webpage using Volley StringRequest:

  StringRequest strReq = new StringRequest(Request.Method.GET, String.format(Config.URL_DASHBOARD, apiKey, studentId),
            new Response.Listener<String>() {
       @Override
       public void onResponse(String response) {
           //You will get the page HTML in response string object
       }
   }, new Response.ErrorListener() {
       @Override
       public void onErrorResponse(VolleyError error) {
        //If anything goes wrong you can handle that here
       }
   }
  );
// Adding request to request queue
MyApplication.getInstance().addToRequestQueue(strReq);

In above code you will notice that I have used MyApplication class and added my request in it. This is class which manages the request queue using Singleton architecture. You can get code of this class from here.

4. Now comes the final step. In OnResponse method we will get the complete HTML string of page in response String object. This string we will us to load webview by making file:///android_asset/ as root of the page. There is a method loadDataWithBaseURL which gives us option to set page root, specify HTML string to load along with specifying encoding etc. Se below

myWebView.loadDataWithBaseURL("file:///android_asset/", response, "text/html", "utf-8", null);

Now as soon as we call loadDataWithBaseURL method your html string content will load in webview and all the external static content you have used in the page will be loaded from assets folder of your app (provided that you have already copied these resource in assets folder and used proper linking on the page).

That’s all from my side for this article. Please write in comments section below if you any question or facing any problem.

Leave a Reply