running mapbox.js cordova application on mobile device - android

when i run the mapbox.js example in my cordova application using visual studio, it running and display the map correctly in visual studio emulator "simulate in browser-Nexus 4", if i run the same application apk file in my mobile device map is not loading.
The difference seems to be, in the example page on both, that the mapbox doesn't take up any difficulty in loading the map. The issue only appears to be an issue when running mapbox on mobile devices.

I got a solution for this question...
If we face the above problem means, we can install whitelist plugin with Cordova CLI, from npm. In the Command Prompt, change directories to the "(your cordova project\bin)" folder
(For example:C:\Users\user\Documents\Visual Studio 2017\Projects\DemoProject\DemoProject\bin )
and run the following command.
$ cordova plugin add cordova-plugin-whitelist
$ cordova prepare
By using this, we can easily run the cordova.apk in our mobile devices

Related

Stuck at Whitescreen after building Ionic React android app

ionic run android -l --external with this I got to test the app on phone with hot reloading, but when I try to build it on studio it just shows a blank white screen after the capacitor logo.
I am just testing out ionic, just got the tabs template going on to test it out.
here's how I build the apk.
ionic run android -> then on android studio -> build apk
I'm getting a similar problem, using WSL and the Windows Android Studio:
On WSL:
ionic start photo-gallery tabs --type=react --capacitor
cd photo-gallery/
ionic integrations enable capacitor
npx cap init photo-app com.mike.atkinson
mkdir www
-- create a www/index.html file
npx cap add android
ionic serve #check everything runs OK in a browser then ^C
#line below stops a warning in the Windows Android Studio when the App is run.
mkdir node_modules/#capacitor/android/capacitor/build/intermediates/check_manifest_result/debug/checkDebugManifest/out
On Windows:
Run Android Studio
Select photo-app
build it
Create an Android Virtual Machine - using Pixel XL with Android 10
Select it
Run photo-app <-- just a blank screen
Connect phone (Umidigi A3S running Android 10)
Select phone
Run photo-app <-- just shows the splash screen then a blank screen
As I am new to Android, it is probably something I'm doing wrong, but as this is an example React app I can't figure out what.
It turns out I made two simple errors:
In capacitor.config.json the webDir should be set to "build"
Ionic serve only does the build for the web service, to build for the android target you need to do:
npm run build
then run the Android Studio on the Windows side.
I'm using angular, but ran into the same situation. For me it was my (Windows) firewall blocking port 8100.
So I added the Inbound rule to allow TCP traffic on port 8100 (Private and Domain, NOT public).
Next problem was that my WiFi was, by default, set to a public WiFi... So I corrected this and it all worked!

Ionic cordova run android and update file from folder

I would like to be able to upload/update files from my local machine using real device android.
I've wrote this command line :
ionic cordova run android
from my ionic project folder.
I can see my app on the real device but when i update a file from the project folder, i can't see the result in the real device.
If i want to see the change i have to re-run android.
Is there a way without android studio to be able to see the changes after editing a file in the ionic project'folder ?
You need to build every time on mobile, you can run your application on browser if you want to see the results after editings.
Finaly i had to run this command and the local machine folder reflect the real device app :
ionic cordova run android --livereload -cs

Ionic Build or Ionic Run builds the wrong app

I am trying to build or run an Ionic Cordova App. But it always builds a default app with playlists.
OS is Windows 10
I do the following from my command prompt:
c:\users\martijn\documents\ionic start testapp blank
c:\users\martijn\documents\testapp\ionic run android
now it is building a different app then in my app directory. When I do ionic serve I see the right app in my browser. Can't figure out why running or building gives me a different app, I think it is a default example app.
Can somebody help?
See link here:
https://github.com/driftyco/ionic-cli/issues/1283
Appears you may have to delete the the last apk file from platforms\android\build\outputs\apk

Getting a white screen with my installed app in Android emulator (however works in browser)

I am having issues getting a legacy mobile app to run in an emulator - it all seems to run in the browser without any issues but when I run the cordova emulate command the app attempts to install but I always get a white screen (nothing else) & the app isn't visible to use.
I am running Cordova CLI v5.0.0 although the app was made about a year ago so was developed in an older version of Cordova.
Can anyone suggest the best ways to debug this app to find the cause of the problem & why the problem only persists when I run the emulate command but seems fine in the browser?
-- update --
I have installed the Samsung drivers to allow me to connect my OnePlusOne device to adb, and I am know using the Android Studio program to collate errors etc..
In Android studio I can see the logs (see gist below):
https://gist.github.com/gkimpson/fbde0f5a7d1017daae17
Its quite long so added it externally - any ideas why I am having problems with my app?
-- update --
This line seems to be the problem
D/SystemWebChromeClient﹕ file:///android_asset/www/js/app/modules/stickers/stickers.js: Line 357 : Uncaught TypeError: window.requestFileSystem is not a function
The code in stickers.js is below for that section..
if (window.isDevice) {
window.requestFileSystem(window.PERSISTENT, 512, onInitFs, errorHandler);
} else {
callback(fc);
}
Ok here is what I had to do when I migrated from cordova 3.6 to cordova 5.
But first, I suggest you a little reading :
Cordova Android 4 release notes
Plugins switch to npm
The white list plugin documentation And in addition the CSP documentation
To sum-up, the security has changed in cordova, if you don't add the white list plugin your app will have no network access, and the plugins are now installed via npm instead of via git.
So what I did (a little bit hardcore maybe):
delete completly the platforms/android folder
delete the plugins folder (maybe before cordova plugins list if you don't have the list somewhere)
reinstall the plugins with the new name (most of external plugins haven't changed name, but all cordova plugins have) for example cordova-plugin-camera replaces org.apache.cordova.camera
add the white list plugin and configure it (or if you're not concerned about security, install the white list-legacy plugin which should work as previous versions)
add the android platform
and you can run cordova plugin save and cordova platform saveto have all your plugins and platforms saved in config.xml

Installing phonegap app to android emulator using windows CLI

I'm trying to install my Phonegap application onto an Android AVD/Emulator. I have launched the AVD and it's registering as 5554:Nexus_S.
When using the Phonegap commands at the Windows prompt I am typing:
phonegap build android
phonegap install android
The output I get says it successfully installed the app onto the device, but it never shows up. This is the output of the install command:
[phonegap] detecting Android SDK environment...
[phonegap] using the local environment
[phonegap] trying to install app onto device
cp: dest file already exists: C:\Users\username\app\platforms\android\assets\www\phonegap.js
[phonegap] successfully installed onto device
I've tried variations of targeting the device using options with no luck:
--device=5554
--target=5554
Any ideas?
I figured it out. You have to specify the --emulator= in the call, so the command looks like:
phonegap install --emulator=emulator-5554 android
You can find the name/id of your running emulators by running the list-started-emulators.bat under the /platforms/android/cordova/lib/ folder in your project.
Another quick note is that sometimes even when you have started the emulator phonegap will not recognize it... so you have to start it from phonegap bat file so that the right process number is registered. to do this.
Use the following command,
1. List-emulator-images.bat : This will display available emulator images you have
2. start-emulator : This will start the emulator which will register with phonegap.
Also make sure you are running all of this from and ADMIN Enabled command prompt.
Okay, I've solved my problem. This solution may not be applied to all, but I was suffering from the same problem as I've mentioned in the comments of the question.
What did I do wrong?
I made some changes in one of the plugins.
I was working on my app and added the Vibration plugin. I made some changes in the plugin, both in the generic version [your_project_root\plugins\org.apache.cordova.vibration\src\android\Vibration.java] and also in the platform specific version [your_project_root\platforms\android\src\org\apache\cordova\vibration\Vibration.java].
But when I reverted the changes back, everything went fine.
I say it again, this solution may not be generic but can be useful for at least my type of problem.
And this gives rise to another question, can't we make changes in the Plugins?I think it is totally fine to make changes in them. Maybe I had done something wrong.

Categories

Resources