Is there a way to disable all caching in WebView (both iOS and Andriod), in a NativeScript Angular app?

Question

I am making a NativeScript Angular app which uses WebView to display a remote web page, but as I am making changes on this page on a website, it doesn't get updated on Andriod nor on iOS devices I use for app development. Page is updated normally on regular browsers on these devices.

I've read what NativeScript Angular documentation has to say about the WebView control and it ain't very detailed.

I'd like to be able to do something like:

    mWebView.getSettings().setAppCacheEnabled(false);
    mWebView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);

... as described here.

Answer 1

Here is how you could get a reference to the NativeScript WebView and from there access the native Android control (android.webkit.WebView)

import { Component } from "@angular/core";
import { EventData } from "tns-core-modules/data/observable";
import { WebView } from "tns-core-modules/ui/web-view";
import { isAndroid } from "tns-core-modules/platform";

declare let android: any; // or even better - use tns-platform-declarations for intelliSense for the native APis

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html",
    styleUrls: ["./home.component.css"]
})
export class HomeComponent {

    onWebViewLoaded(args: EventData) {
        const webView = args.object as WebView;

        const nativeWebView = webView.nativeView; // equal to webView.android or webView.ios (depending on the platform)

        if (isAndroid) {
            nativeWebView.getSettings().setAppCacheEnabled(false);
            nativeWebView.getSettings().setCacheMode(android.webkit.WebSettings.LOAD_NO_CACHE);
        }
    }
}

Where onWebViewLoaded is used with the loaded event in the HTML

<WebView height="1200" src="https://www.nativescript.org" (loaded)="onWebViewLoaded($event)"></WebView>

A Playground app demonstrating the above here