If hostname set, cannot navigate certain app's url - it tries to open the remote one

[1aerostorm]

Bug Report

Problem

I set preference name="hostname" value="site.com" /> and I trying to navigate

What is expected to happen?

window.location.href = 'https://site.com';

should open corresponding application URL.

And:

window.location.href = 'https://site.com/page';

should open corresponding application URL, too.

What does actually happen?

First one works, but second one doesn't. It tries to open remote URL with same host. And, it opens that URL in Cordova's webview, not in external browser...

Information

<?xml version='1.0' encoding='utf-8'?>
<widget id="gls.messenger" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>Hello World</name>
    <description>Sample Apache Cordova App</description>
    <author email="[email protected]" href="https://cordova.apache.org">
        Apache Cordova Team
    </author>
    <content src="/" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <preference name="hostname" value="site.com" />
</widget>

Command or Code

See above.

Environment, Platform, Device

Android.

Version information

cordova 11.0.0
cordova-android 10.1.2

Checklist

• I searched for existing GitHub issues
• I updated all Cordova tooling to most recent version
• I included all the necessary information above

[breautek]

Successfully reproduced in an API 30 emulator.

I think the intended behaviour is if page exists, (as in a document exists in www) it should load that document.

If it doesn't, a standard 404 should be present I think.

[1aerostorm]

@breautek

I think the intended behaviour is if page exists, (as in a document exists in www) it should load that document.

It is a very archaic approach, modern Web applications are often Single-Page Applications, with only one page (e.g. index.html), but it can handle uris like http://site.com/alice or even http://site.com/alice.png when alice.png is not a file.

So it is better to open any URLs correctly (or add a special option on behaviour)

[breautek]

It is a very archaic approach, modern Web applications are often Single-Page Applications, with only one page (e.g. index.html), but it can handle uris like http://site.com/alice or even http://site.com/alice.png when alice.png is not a file.

That specifically is a problem that Cordova won't solve. I agree that the domain that is set for the WbebViewAssetLoader should be captured and not attempt to load in the systems web browser, that's definitely a bug. But Cordova will not do any other rerouting or redirecting of paths to another file. It won't be a router in that sense. For client side routing in single page applications, I'd suggest using a hash-based routing strategy on Cordova apps

So if /alice or /alice.png does not exist and you tried to location.href to that path, then I'd expect the webview to display the webview's internal 404 page.

[1aerostorm]

@breautek

It won't be a router in that sense.

Not router... Please just add preference: if true - forward all requests to index.html, in order to handle 404 in index.html, not in Cordova... It is primitive, but it will be really useful for any SPA Web-application, built on React, Vue, Angular, Svelte...

I'd suggest using a hash-based routing strategy on Cordova apps

It is definitely obsolete in 2022 year.

If you do not want to learn modern approaches in 2022 year - let's just close that issue at all...

I will develop my own plugin (or some other architecture) which will solve the problem...

[breautek]

What is the actual use case for having clean URLs in a cordova application where URLs are never shown to the user?

[1aerostorm]

@breautek we are developing hybrid applications, which can work both in Web browser (on PC), and as Cordova application.

Also, we are using different JS libraries which are better supporting HTML5 History API (clean URLs) than hashes.

Hashes are just unfamiliar for any web developer in current decade.

[breautek]

For Cordova specific frameworks we have

Ionic / Angular / React (Framework for Cordova) uses hash based routing by default.

For non-cordova specific frameworks we have the common:

react-router that provides a Hash strategy. It does state it shouldn't be used unless necessary because they are thinking in the context of where URLs are seen in traditional web applications, where unclean URLs effects SEO. It doesn't have a default routing strategy, you have to declare it.

I'm less familiar with svelte but one of the recommended packages I saw was svelte-spa-router which uses hash based routing by default.

Hashes are just unfamiliar for any web developer in current decade.

So I don't really think has it's place.

Hashes are definitely obsolete for traditional web development, especially for any system that is sensitive to SEO, which Cordova applications are not.

Part of my push-back is because this was something that was discussed previously in #1137 Adding the flag as suggested to redirect to the html file on not found files I think would fall into the same category.

I will develop my own plugin (or some other architecture) which will solve the problem...

If you truely need clean URLs for your cordova application, then this would be your path forward. But I've already listed above that all modern frameworks have a hash-based strategy available, either built-in, or as a third-party library. Abstractions can easily be made so that the cordova applications uses hash-based routing while your web portal uses clean urls.

If you think Cordova should reconsider this stance, then I'd suggest opening a thread on our Dev Mailing List, so other project members can pitch in.