Webview src change huge loading time

#1

Hi,

I started to create an Angular [5.2.3] application with Nativescript [3.4.1] (using TypeScript [2.6.2]). At the start I only had a WebView for the native part of the app as I wanted to have a stable webapp first. Now I want to gradually use some angular components logic also on the native side with their dedicated native template so that in the long run I can get completely rid of the WebView.
I have already the native counterpart of my menu that is currently used to change the src of the WebView but my problem is that the navigation within the WebView by changing its source is very very slow (time of clicking on the menu button up to the page is loaded is 7sec).
After debugging my app, I found that the place where I was losing most of the time (>3/4 of the time) was between the WebView.loadStartedEvent and the WebView.loadFinishedEvent after having changed the src of the WebView simply like that:

private webView: WebView;

onMenuButtonTap(newUrl: string) {
	this.webView.src = newUrl;
}

My question is therefore two fold:

  • Is there another faster way to change the url of a WebView for navigation (triggered outside of the WebView) than directly touching its src property?
  • What is exactly happening between the WebView.loadStartedEvent and the WebView.loadFinishedEvent that can take that much time when changing the src property but that doesn’t have an impact while navigate in the webview as the user?

Webview Native Component
Android => android.webkit.WebView
iOS => WKWebView

Thank you in advance for any help you could provide me that could decrease this huge loading delay that I have.

#2

The WebView just tries to load the remote / local web page and renders same on screen, between load start and finish events.

So the question is, are you loading a remote web page? If that page is part of your app screens, you should think of bundling the web content with app.

#3

Thank you very much for your quick answer.

Indeed, we are loading a page that is part of our app screens. When we load some other website (like ‘https://www.google.com’) the loading time of the page goes down to less than 2sec.

This means you spotted well the problem which seems to be the size of our app to be loaded by the webview. Therefore we will try your proposed solution to bundle the web content within the app itself.

Do you have any hints (documentation, seed or so) how we can manage to do that?

#4

One quick fix is, if you have scripts being loaded at header section of document, rendering happens only after that. If you move them down after body / load them dynamically after body is loaded, at least user wont see a blank page.

#5

Hello,

So finally we tried as you advised to bundle the web content within the native app.
Our webview is correctly loading the index.html, css and javascipt files as well as the assets of our webapp located locally.
The only left problem we have is to load json files which doesn’t work with the ‘file://’ protocol because cross origin requests don’t support this protocol.

Do you have an idea if this can be fixed in some way?