Xamarin Forms: Client-Side caching
In this post, we’ll learn what client-side caching is, why it’s needed, and how to use it in Xamarin Forms. This may require a basic understanding of how to retrieve data from a web server through API calls.
What is Caching?
Caching is a technique for storing data in memory for quick retrieval. When the data is accessed again, the data might be retrieved from the cache rather than from the original source. The data obtained from an API request is briefly kept in memory on the client-side(mobile device) in our example.
Why use Caching?
Large volumes of data might be costly to retrieve in terms of the time it takes to make the API call to retrieve the data, depending on the amount of data being retrieved from the source. If getting the data takes too long and an API call must be made every time a data request is made, this can cause performance concerns. Caching as a tactic, therefore, comes in handy because the data is kept locally and is thus more accessible.
How to implement caching.
Step 1: Create a file new Xamarin App
In a separate or new visual studio, create a file new Xamarin App name this ClientSideCachingApp and use the blank template to keep it simple. Run the app to ensure it works fine.
Step 2: Create a Model folder
In the shared project create a new file, name it Models and in this folder add two classes, a Product class, and a ProductList class these will have the dummy JSON data received from the server(https://dummyjson.com/products).
A. Your Product class should look like this
B. Your ProducList class should look like this
Step 3: Implement your UI
In the MainPage.xaml add a button to make the API call to get the products and a CollectionView with an x: Name attribute to identify it from the code behind.
Step 4: Implement the code-behind
In the code-behind file (MainPage.xaml.cs) of your MainPage.xaml, make sure your Onbutton_clicked method is an async method, so we can make asynchronous calls to get the data from the server. Install the newstonSoft.json nuget package to help you deserialize the data you will receive. Also, install the MonkeyCache.FileStore nuget package, that we will use for caching the data received.
- In the main page constructor, add a unique Barrel.ApplicationId
- Implement the Button_Onclicked event to Get the products and set our UIs
- Implement a GetProducts private method to call the API to get the data.
- Once the data is received, it is added to the cache, with a unique key and an expiration time.
- For all subsequent calls, if there is no internet connection and the cache data hasn’t expired, the data will now be received from the local cache
Conclusion
Data caching is a simple yet effective approach to improve app performance. One important line modification to note is line 38, which checks whether the device has an internet connection and whether the cached data is still valid or not. If that’s the case, we’ll go ahead and get the data from the cache. In Lines 44–51 If the preceding check returns false, we’ll execute an API request to retrieve the data and store it in the cache for later usage along with a unique key and expiration time.
