Cordova VS Android System Webview

[andgeci]

Hey guys Im new here sorry if Im doing not the way it should be. I am looking for help hopefully someone wise can advice. I have this old cordova application due to recent android system webview update(happened before xmas) when I log in to application I can see customers fine but products not being displayed when I go to phone settings and uninstall android system webview everything works. Maybe someone could help or advise how to debug what is causing this.
Only happens on android devices.

[breautek]

Maybe someone could help or advise how to debug what is causing this.

Because it sounds like you're able to reproduce the issue, my best advice is to use the Chrome remote debugger to see if there are any JS errors occurring, or if there are any network issues if the products data is pulled over the network, etc. If you're unsure how to open the debugger, then I have a blog post that explains how.

I have this old cordova application due to recent android system webview update(happened before xmas) when I log in to application I can see customers fine but products not being displayed when I go to phone settings and uninstall android system webview everything works.

Because your app works on an older version, but breaks on a newer version of the webview there are 3 likely scenarios that I would try to rule out first:

1. The code is using older/deprecated features that has since been removed in newer versions.
2. Assuming product data is pulled over the network, the network request is being blocked by CORS. If you see Access-Control errors, then this blog post might help. The article was written for ios/WKWebView, but all the concepts also applies to android as well, because CORS is a server side configuration.
3. Assuming product data is pulled over the network, the network request is relying on third-party cookies which I believe have stricter defaults now-a-days. I don't use cookies so I'm not as experienced if this is the case. I believe SameSite needs to be explicitly set to None on the server.

[andgeci]

Thanks for you swift response I will look into this and let you know my findings.

[andgeci]

in browser if I do window.products they are there but it is just not showing.

[breautek]

If you have ruled out the 3 potential problems, and you have the products data in memory, then that suggests the problem is perhaps in rendering.

So you should confirm that:

1. The HTML is actually in place. Whether it's all the div or table nodes, or whatever is used to render your products is actually is seen in the document. If the HTML for your products view is completely missing, then that indicates that whatever is responsible for rendering that HTML is not doing it some reason.
2. And if the HTML does look right, is your HTML nodes is receiving all the proper CSS to style your view properly?
3. Is there another HTML node overlapping the products view? An easy way to test for this is to use the "Pick" option

While Pick tool is active, click on the area that should be rendering the product view and it should pick the HTML node representing the Product. If it's picking something else completely unrelated, then that suggests you have a DOM node overlapping your products view.

It's pretty rare to have view related issues across webview versions, as the DOM api is very stable... but it's not completely unheard of especially if the app is using more modern view/css features.

The art of debugging is determining your expectation (e.g. I should be seeing products on screen) and determining the actual behaviour (e.g. no products on screen) and then trace the path it takes to get products on the screen, ruling out things along the way. So far we've determined that:

1. Network appears to be working.
2. Loading code seems to load data into memory
3. We don't know if associated HTML actually being produced and determining that will guide you to where you should be looking (e.g. HTML producing code, vs styling code)

[andgeci]

Hey I can see that everything is being downloaded I can log in as a customer but products is not being displayed.

[andgeci]

everything seems to be there. the funny thing is that it is loading customers in customer tab but not the products....

[breautek]

Well I see the UL node, but it has no items in it. So something must be not reading your products to actually create list and append li nodes.

[andgeci]

yes but remember when I delete android system webview in phone settings everything works

[breautek]

I'm actually a little bit confused on this because afaik you can't delete the Android System Webview, you can only disable it.

Cordova relies on a system webview. It doesn't necessarily have to be the Android System Webview, you must have a webview component installed on the device.

It is possible that you have more than 1 webview component installed on your device and that when you're disabling the android system webview, the system is choosing an alternate webview component to use.

You check what webviews are available on the device (and switch between them) by going to Settings -> Developer Options -> WebView Implementation.

Different webview implementations can obviously have different behaviours.

[andgeci]

yes Im not entirely deleting it I just uninstall updates. do you know where to check what was released I tried looking up but couldnt find anything.
I go settings apps android webview uninstall updates.

this is a live app and many customers on android devices are facing this issue. We keep asking them to delete webview updates for now.

[erisu]

Were there any errors in the console or network tab of the Chrome Dev Tools - Devices Remote Target?

You might need to reload the WebView to see the errors by pressing either Command + R or Ctrl + R in the Chrome Dev Tools - Devices Remote Target.

[andgeci]

thats the thing no errors ill try that later on and let you know.

[andgeci]

no issues there I can see it gets the products and I can access them in console: window.products I can see all products there it is just that it is not displaying on the screen by some reason

[breautek]

Based on #523 (comment) it's not displaying on the screen because it's not actually being "rendered", e.g. the HTML is not being appended to the DOM. So whatever is responsible for producing the HTML and appending it to the DOM is the next thing that needs to be investigated.

And just to make it clear (in case it wasn't by earlier comments), Cordova doesn't really play a major role with the webview. Cordova does not implement any webviews or browser engines. Cordova does implement a bridging API to allow Javascript code to call on Cordova plugins to do work using native APIs, to fill in feature gaps of the webview but Cordova itself does not implement any browser engine features. It relies on a webview system component, which is typically based on Chromium for android devices.

I understand that it works when you uninstall webview updates (and thus likely using a factory version of the webview) and it doesn't work when you have updates installed, which unfortunately doesn't really tell us much and most users are likely going to be running the latest version of the webview, so the fact that it works on older versions is mostly irrelevant. If you can pinpoint the exact webview version where it breaks, then the chrome changelogs could be consulted.

But it will be much easier to debug whatever is responsible of producing the HTML, using chrome web inspector if necessary to break point and step through that relevant code to determine what it is doing and why it's producing an empty <ul> list.