android-js/androidjs

Installing an androidjs app replaces any old androidjs apps

KCGD opened this issue · 3 comments

KCGD commented

Describe the bug
So far i've built 2 small apps in androidjs, i had already installed the first one, but when went to install and run the second one on my phone, i found that the apk didnt install a new app, but it replaced the androidjs app i had previously installed. Even on the phone's home screen, the shortcut i had set up for the old app was replaced with the new app

To Reproduce
Steps to reproduce the behavior:

  1. create an app
  2. create a second app
  3. install the first app
  4. install the second app
  5. notice how the first app has been replaced by the second app

Expected behavior
i expected the apk to install a completely separate app

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: Winds 10 Home (10.0.19042 Build 19042)
  • Browser: Chrome stable
  • Version: androidjs 2.2.4

Smartphone (please complete the following information):

  • Device: Razer phone 2
  • OS: Android 9
  • Browser: Chrome
KCGD commented

Found the issue, the "package-name" property in package.json was set to "webview", which was the same for both apps, i thought it would automatically set to the given name in androidjs init but it has to be set manually.

One other thing i noticed is that two androidjs apps cant be open at the same time. im guessing this is because of the localhost connection the frontend makes, and since the backend uses the same port, the new backend crashes and the app frontend connects to the already running app's backend.

@KCGD yes your hunch is correct.
We would love to have community contributions.

KCGD commented

@Chhekur hey i believe i found a fix to the problem but im not entirely sure how to implement it, im a bit new to using github.

the changes i made were to androidjs/lib where i added template versions of androidjs.js and front.js. when require('androidjs').back is called from the main process, it will find a random usable port and read the template versions of androidjs.js and front.js, injecting the new port into them before writing to the normal androidjs.js and front.js to be called in the browser.

the only drawback to this is since module.exports cant be called from inside a function (in back.js), i had to export it with a callback, so main.js would be more like this:

const backLoad = require('androidjs').back;

//invoke port selection and setup for androidjs.js and front.js
backLoad((back) => {

    //callback returns the "Back" module as per usual, but it wont be running on port 3000, change already applied to the scripts being called in the browser
    //this version of the back module can be used as normal, but calling it before this callback runs results in "not a function" errors as it hasnt been set up yet
    back.on("hello from front", function () {
        back.send("hello from back", "Hello from Android JS");
    });

})

as opposed to the normal:

const back = require('androidjs').back;

back.on("hello from front", function(){
	back.send("hello from back", "Hello from Android JS");
});

It may require some tweaking to work on mobile but i hope this works as a good proof of concept

the code is available here:
https://drive.google.com/drive/folders/1ij7BnghQcfW2-KHT5DrOtzASTQA7bq65?usp=sharing