Main

Using WebViews in your native application is very common these days but when it comes to performance, rendering of a WebView is quite slow. As most of the heavy lifting done by WebView is loading images. In our Web-Pages we tend to use many images and most of those images are really large in size and loading them every time the user opens the App’s WebView is not good.

I read about how to increase performance of WebView by implementing Caching web resources like JS, CSS and image files. You can also static resources in your native application, and by intercepting the Resource requests you can override the default behaviour of WebView. But do we really need to do that.

Read: Super Charing your WebView

So we can implement our LRU or FIFO cache if we want, there is no problem there, but why reinvent the wheel when there are libraries that can handle image loading far better, already tested and used by thousands of developers. One of those libraries is Glide. Apart from Image Loading, using Glide has many advantages like scaling, cropping, compressing images and Caching strategy is really impressive, well the library is handled by Google developers so, and has many options to control the behaviour of your Image Loading. So let’s jump to the code.

Steps to Implement:

1. Now, which method to override to take control of Image Loading? If you are using WebView then you are definitely using WebViewClient. So just override shouldInterceptRequest (if not already overridden). 
   Few things to note about this method:
   i) shouldInterceptRequest gets called on the background thread.
   ii) You have to return the WebResourceResponse object if you are handling any resource request. 
   iii) If you return the value null, then WebView will handle the request.
2. Now to use Glide, first add library’s gradle dependency in your project if not added already.

Glide gradle dependency:implementation ‘com.github.bumptech.glide:glide:4.11.0’annotationProcessor ‘com.github.bumptech.glide:compiler:4.11.0’

3. Setting up your WebView (optional)

Setting up WebView in Android Activity (Kotlin)

4. Load Bitmap using Glide and setup default Cache Strategy. You can also add default RequestOptions here.

Load Bitmap with target view. (Kotlin)

5. Overriding shouldInterceptRequest method and adding Glide to it.

shouldInterceptRequest after adding Glide. (Kotlin)

6. Converting Bitmap to InputStream as WebResourceResponse only accept InputStream as data and process it on its own based on its mimeType.

Every thing put together and we have something like this.

That it. It’s that easy add Glide to load your web page images. You can configure your Glide defaults as you want.

Try run this project you see for your self a significant difference in the performance in your WebView. And, throughout your project, using one Image Loading library is really helpful. As most of the images we use in our native app are common to that we use in Web, this code significantly increase your web page’s load time.

Want to know more about Glide, hit https://bumptech.github.io/glide/.

If you want to suggest some changes or contribute this than checkout the Repo.

Note: This change is more suitable for static web pages than dynamic web pages or if you don’t let your WebView open all website. An organisation’s web pages should suffice.

muditsen/Glide-WebView-Caching You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or… github.com

And If you like this article: