Nativescript: Webview reloads when coming back on the page

[surdu]

I have a NativeScript Page (i.e. main page) that contains an WebView and means to navigate to another NativeScript Page (i.e. about page).

If I got to the about page, and then come back to the main page, on android only, the webview on the main page will reload with the initial URL.

The fact that on iOS it works as expected leads me to believe it's a bug.

I have this problem on two different applications that I'm working on now, and I also found another guy on StackOverflow with the same issue. If it is needed, I will also write a small example app that will illustrate the issue.

I'm using {N} with vanilla JS.

$ tns info
All NativeScript components versions information
┌──────────────────┬─────────────────┬────────────────┬──────────────────┐
│ Component        │ Current version │ Latest version │ Information      │
│ nativescript     │ 3.1.2           │ 3.1.3          │ Update available │
│ tns-core-modules │ 3.1.0           │ 3.1.0          │ Up to date       │
│ tns-android      │ 3.1.1           │ 3.1.1          │ Up to date       │
│ tns-ios          │ 3.1.0           │ 3.1.0          │ Up to date       │
└──────────────────┴─────────────────┴────────────────┴──────────────────┘

[tsonevn]

Hi @surdu,
I research this issue and it seems that this is something specific to the Android platform. I found this thread in StackOverflow where it is suggested to set android:launchMode="singleInstance" in your androidmanifest.xml, which will prevent reloading the WebView page.

[surdu]

Hello @tsonevn,

Nope, that doesn't solve this problem. 😢

Also, the problem described in that SO question is not reproducible on my apps. In my case, I don't leave the app, just move to another screen (I don't think it's even another activity ?)

[tsonevn]

Archive.zip
Hi @surdu,
I reviewed further this case and was able to reproduce similar scenario and found that this happens in the cases when you setup the URL for the WebView on navigatingTo event.
In this case, the URL will be reset every time when you navigating back from the previous page.

To resolve this you could setup the URL to the Observable outside the event, which will prevent resetting the page. For example:

import { EventData, Observable } from 'data/observable';
import { Page } from 'ui/page';
import {topmost} from "ui/frame"
import { HelloWorldModel } from './main-view-model';
var tmpObservable= new Observable();
tmpObservable.set("wurl", "https://google.com");
// Event handler for Page "navigatingTo" event attached in main-page.xml
export function navigatingTo(args: EventData) {

    let page = <Page>args.object;
    console.log("navigating to ")

    page.bindingContext = tmpObservable;
}
export function loadPage(){
    tmpObservable.set("wurl", "https://docs.nativescript.org");
}

export function onTap(){
    topmost().navigate("page2")
}

I am also attaching a sample project.

If your scenario is different please provide a sample project.

[tsonevn]

Hi @surdu,
Were you able to resolve your case with my latest suggestion?

[surdu]

@tsonevn Sorry, managed now to squeeze some time to test it.

In you code, you can change:
<WebView height="200" src="{{wurl}}" />
into:
<WebView height="200" src="https://docs.nativescript.org" />

and the problem is still reproducible.

[tsonevn]

Hi @surdu,
Thank you for your further investigation.
Indeed while setting the value for the src property inline in the XML the WebView page will be reloaded every time, when you navigate back to the previous page. This is caused due to fact that the native WebView will be destroyed and recreated every time when you navigate to the page with WebView.

However, this behavior has been fixed in @next modules and you could test it on your side while following the described steps:

tns plugin remove tns-core-modules

tns plugin add tns-core-modules@next

also before rebuild delete node_modules and platforms folders

[surdu]

@tsonevn

$ tns plugin add tns-core-modules@next
[...]

npm WARN [email protected] requires a peer of tns-core-modules@^3.0.0 ||
 ^3.0.0-rc.1 || >=3.0.0-2017 but none was installed.

Command npm install tns-core-modules@next --save failed with exit code 1

I've included that warning, but I don't believe that's the issue, as I get that warning also for tns-core-modules 3.1 and it works just fine.

Any idea how can I make the tns plugin add command more verbose in order to see what the problem might be ?

[hshristov]

@surdu
I think you can use npm i tns-core-modules@next --save instead of tns plugin add.

[surdu]

Works! Thanks a lot !

[abbas5454]

hiii @tsonevn and @surdu, i have the same problem but i i am using react native webview..
can you tell me how to solve this problem in react native webview

[surdu]

@abbas5454 This should have been already fixed. The only thing I did then was update tns-core-modules@next, but the fix should be live now in the latest NativeScript version.

[tsonevn]

Hi @abbas5454,
If you are facing an issue, while using nativescript-advanced-webview plugin, I would suggest contacting the authors

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.