Webview - Cache webapp data for further (next time use)

Question

we recently received a request as following -

While loading a webapp (https://192.1.../poc/test.jsp) in android or iOS webview. It's taking some time while loading 1st time because of js, image, css etc files takes time to download including some APIs.

Client want to improve the experience and wanted 1st time even takes time and load the .js, images etc offline. When user launch app 2nd time onwards, use the loaded .js, images etc and make only API call from server.

We would like to check if what is the best way to achieving it? Any out of frame suggestion is also appreciated.

Answer 1

While digging too much, it was solved as following

• iOS having in-build property by WKWebView to store supporting web files like (js, css etc) and reuse if needed for further commmunication. Logic to clear cache etc we can manage it manually when it needed.

• Android it was webviewclient. Which is having a callback name shouldInterceptRequest(WebView view, WebResourceRequest request)

Everytime any webview page needs css, js etc, this callback to be invoked. So put the logic be like

if (if url extension is js|png|css){
    if (response for url is available within app cache) {
         return WebResouceResposne object from cache data
    } else {
         //Save file response in cache &
         return to super.shouldInterceptRequest() using interceptor WebResourceResponse
    }
}

Hope, it will help someone in anyways. Thank you!