relative dependencies differences between browser and cordova native

[Egnus]

trafficstars

Hi, it seems that there are some differences in how files in /public are interpreted depending on local browser debug and the cordova built in order to handle SPA requests.

for instance, in index.html the <script src='bundle.js'></script> will work perfectly in cordova (also ./bundle.js) and url paths in your app like localhost/user/42 will properly work without searching inside any "user" folder. (I believe this works because the app is not updated but if I manage to reload a page in another url which is not the base it will fail, like in the browser.

To solve this in browsers, both in my SCSS and HTML have to point to the files as /fonts/material-icons.woff or /bundle to get the files properly even when I reload the page in a inner subpath, but in cordova this fails from the beginning.

Do you have any idea how can I set the / for browser test and without it for cordova? or any other solution? This is a very big problem for almost any project in cordova working as a SPA

[Egnus]

adding <base href='/'> to index.html allows to have properly all the references correct even if they don't have slash during development (browser), but fails in cordova since "/" is not part of the app but the root of the phone.

[syonip]

Hi @Egnus ! In my project I refer to static assets without "/". For example, if I have a file in public/images/bg.jpg I'll refer to it from my svelte components using images/bg.jpg. This works for me in browser and in cordova.

Did you try without the "/"?

[Egnus]

Yes, and it works, initially.

Unfortunately, if your SPA starts at a nested route (like localhost:5000/user/example), if i dont use '/' the files will not load with the app in dev with a browser, for instance, bundle.js is not in any 'user/example' folder.

On the other hand, adding <base href='/'> will fix all cases in the browser but will break the app, so i added <base href='/'> to index.html and added some extra changes to your before-prepare.js by adding this function at the end of yours:

function removeRelativeReference() {
    info('Resolving SPA references for Android Cordova')
    let htmlContent = fs.readFileSync('www/index.html', 'utf-8')
    htmlContent = htmlContent.replace('<base href="/">', '');

    fs.writeFileSync('www/index.html', htmlContent)
}

Now with this, both, app and browser will run with the correct paths to locate the file even if the initial path is a nested url path.

If you want I can do a PR about it for you

[syonip]

Sure a PR would be great, thanks!

On Mon, 3 Feb 2020 at 15:06, Ignacio Bustos [email protected] wrote:

Yes, and it works, initially.

Unfortunately, if your SPA starts at a nested route (like localhost:5000/user/example), if i dont use '/' the files will not load with the app in dev with a browser.

On the other hand, adding will fix all cases in the browser but will break the app, so i added to index.html and added some extra changes to your before-prepare.js by adding this function at the end of yours:

function removeRelativeReference() { info('Resolving SPA references for Android Cordova') let htmlContent = fs.readFileSync(${publicFolder}/index.html, 'utf-8') htmlContent = htmlContent.replace('', '');

fs.writeFileSync('www/index.html', htmlContent)

}

Now with this, both, app and browser will run with the correct paths to locate the file even if the initial path is a nested url path.

If you want I can do a PR about it for you

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/syonip/svelte-cordova-template/issues/3?email_source=notifications&email_token=ABJKLCPIE4GTGWIWZB7AEKTRBAQH5A5CNFSM4KLI3TC2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKT6V7Y#issuecomment-581430015, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABJKLCNSHPNT67XSYFRZMJ3RBAQH5ANCNFSM4KLI3TCQ .