What Is Cache And How Can We Utilize It?

Learn about different types of cache mode in Android WebView!

What did you have for breakfast? You may remember or you may not — maybe you didn’t even have breakfast today! The point is, just like how you can recall what you’ve encountered previously, computers can recall what they encountered in the past.

I personally spend a lot of my time on the Internet, and I visit certain websites everyday. For example, I visit Facebook a lot when I am bored, and I go to Google when I need an answer to a question. These two websites load almost instantly, and others seem to load somewhat more slowly. The browser behaves this way due to “cacheing”.

What is cache? Let’s dig in and talk about what cache is and how we can set different cache modes in WebViews to load websites faster!

What you’ll need

1. Sketchware — a mobile IDE on your smartphone
2. Passion to learn! :-)

What you’ll learn

1. Concept of Cache in programming
2. How to use setCacheMode block for WebView

Cache

Before we start anything, here is a definition of Cache:

(1) To store data locally in order to speed up subsequent retrievals.

(2) Reserved areas of memory in every computer that are used to speed up instruction execution, data retrieval and data updating.

And here is a definition of Browser Cache:

A temporary storage area in memory or on disk that holds the most recently downloaded Web pages. As you jump from Web page to Web page, caching those pages in memory lets you quickly go back to a page without having to download it from the Web again. In order to ensure that the latest page is displayed, the browser compares the dates of the cached page with the current Web page. If the Web page has not changed, the cached page is displayed immediately. If the Web page has changed, it is downloaded, displayed and cached.
— PCMag

Basically, think of cache as memory for computers. Just like how we remember the faces of other people we meet and recall them in the future, computers remember websites it visits and make them load faster next time it loads. That is why when you visit new websites, it loads much slower than it would take when you visit a site you’ve visited before. These saved memories, however, are temporary, and you could delete them if you wanted to or even disable this whole “cacheing” mode.

Applying this concept in Sketchware

A lot of Sketchware developers have been developing interesting Web Browsers lately!

All these applications share a common widget — WebView. WebView in Sketchware allows you to render websites inside your application. WebView can be found under the “Widgets” tab inside the project. Simply drag and drop it into your design screen.

These are some blocks that come with WebView, and their names are pretty straight forward for you to use.

1. loadUrl — it loads the WebView with a specific URL, or website address.

2. setCacheMode — to be explained below! :-)

3. goBack — goes back a page.

4. goForward — goes forward a page.

5. clearCache — clears Cache.

6. clearHistory — clears your browsing history.

7. stopLoading — stops the WebView from loading.

8. zoomIn — zooms into the WebView.

9. zoomOut — zooms out from the WebView.

10. getUrl — gets the url of the current page.

11. canGoForward — checks if WebView can go forward.

12. canGoBackward — checks if WebView can go backward.

However, there is one block that raises a question:

When I click on the spinner, it gives me all these different options. What do these options even mean? Let’s go through them one-by-one.

1. LOAD_DEFAULT — Default cache usage mode. If the navigation type doesn’t impose any specific behavior, use cached resources when they are available and not expired, otherwise load resources from the network.

2. LOAD_CACHE_ELSE_NETWORK — Use cached resources when they are available, even if they have expired. Otherwise load resources from the network.

3. LOAD_NO_CACHE — Don’t use the cache, load from the network. Will do a fresh load every time

4. LOAD_CACHE_ONLY — Don’t use the network, load from the cache.

If you’re interested in learning them in greater detail, check them out here.

Conclusion

Now that you understand the concept of Cache, you can optimize your browser and have better user experience by setting different cache modes. Experiment them and see how it affects the loading speed of the WebView!

Happy coding! :-)

If you enjoyed this article, please press the 💚 below so others can find this article too!