I am writing a PhoneGap Build 3.x program, and cannot figure out how to properly configure my config.xml and index.html files to access any of the plugins. Here is my config.xml file:
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "org.kirsches.PGB"
version = "1.0.0">
<name>PhoneGap Build Test</name>
<description>PhoneGap Build Test</description>
<author href="http://www.kirsches.org" email="mitch#kirsches.org">
Mitch Kirsch
</author>
<preference name="phonegap-version" value="3.1.0" />
<preference name="orientation" value="default" />
<preference name="target-device" value="universal" />
<preference name="fullscreen" value="false" />
<preference name="android-minSdkVersion" value="7" />
<gap:platform name="android" />
<gap:plugin name="org.apache.cordova.device" />
<icon src="icon.png" />
</widget>
and here is my index.html file:
<!DOCTYPE html>
<html>
<head>
<title>PhoneGap Build Test</title>
<script src="cordova.js"></script>
<script src="phonegap.js"></script>
<script >
document.addEventListener('deviceready',
onDeviceReady,
false);
function onDeviceReady() {
alert("using PhoneGap 3.1.0");
alert("model = " + device.model);
}
</script>
</head>
<body>
<h2>PhoneGap Build Test</h2>
</body>
</html>
The "using PhoneGap 3.1.0" alert fires, then the application hangs on my Android device. Am I incorrect in assuming that I don't need to set up an AndroidManifest.xml file, since I am using PhoneGap Build (it is my understanding that PhoneGap Build generates the AndroidManifest.xml file from my config.xml file)? Or, am I missing something in my config.xml file (it is my understanding that the feature tag is no longer used by PhoneGap 3.x)?
Thank you to anyone who can show me my error in the above two files.
The only odd thing is the fact you include phonegap.js AND cordova.js. Pick one, it doesn't matter, as PhoneGap Build simply injects the correct file for you (as long as you have one of those tags). So in case you have: don't include the actual files.
Hope this makes a difference..
Eddy
Two things had to be changed in my code:
As Eddy correctly pointed out, I just needed phonegap.js or cordova.js (but, this was not causing my hanging problem).
I had to delete (uninstall) my app on my Android device and then re-install it via my bar code reader app (I use QR Droid). I have enabled debugging and hydration on my app (since I am in the early stages of development), and I am guessing that a prior hydration operation must have corrupted something in my app. The hanging problem occurred on two different Android devices, with the interesting scenario of the app simultaneously working correctly on Android device # 1 (since I had already done the delete and re-install on it) and not working on Android device # 2 (since I had not yet done the delete on re-install on it).
Two lessons I learned from this are:
You can't count on the hydration process to work all of the time!
Unless you are in the habit of changing the name of your application each time that you upload it to PhoneGap Build, clicking on the "Install" or the "APK" buttons or the bar code on the PhoneGap Build web page will bring down the most recent version that has been stored in Amazon S3, which might not be the most recent version that you uploaded to PhoneGap Build!
Mitch
Related
A very frustrating issue while building an Ionic 4 app along with FCM plugin , is the inability to set a custom Notification Icon, with custom color. I figured out how to achieve this, so just wanted to share the solution with our beautiful StackOverflow community :)
So check out the solution to customize Firebase Cloud Messaging (FCM) Notification Icon and it's Color for Android platform, in my answer below.
I am using Ionic 4 + FCM plugin and here is what worked for me (November 2019). Please note that this solution is Android specific, i.e. the settings shown in this solution will help customize the Notification Icon look and feel on Android platform.
So let's begin in a series of steps:
1. In config.xml located in the root folder of your app: Example: (yourapp/config.xml)
Add the following to the <widget id=""...> tag at the end:
xmlns:android="http://schemas.android.com/apk/res/android"
It should look something like this now:
<widget id="com.mydomain.app" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
Or simply, copy the above line, replace the value of widget id, with your own.
2. In the same config.xml file:
Within the tags: <platform name="android"> and </platform>, add this:
<resource-file src="res/drawable-xhdpi/fcm_push_icon.png" target="app/src/main/res/drawable/fcm_push_icon.png" />
<resource-file src="res/drawable-hdpi/fcm_push_icon.png" target="platforms/android/res/drawable-hdpi/fcm_push_icon.png" />
<resource-file src="res/drawable-mdpi/fcm_push_icon.png" target="platforms/android/res/drawable-mdpi/fcm_push_icon.png" />
<resource-file src="res/drawable-xhdpi/fcm_push_icon.png" target="platforms/android/res/drawable-xhdpi/fcm_push_icon.png" />
<resource-file src="res/drawable-xxhdpi/fcm_push_icon.png" target="platforms/android/res/drawable-xxhdpi/fcm_push_icon.png" />
<resource-file src="res/drawable-xxxhdpi/fcm_push_icon.png" target="platforms/android/res/drawable-xxxhdpi/fcm_push_icon.png" />
<resource-file src="colors.xml" target="app/src/main/res/values/colors.xml" />
<config-file parent="/manifest/application/" target="app/src/main/AndroidManifest.xml">
<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="#drawable/fcm_push_icon" />
<meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="#color/colorPrimary" />
</config-file>
3. Visit the following link:
Notification Icon Generator
Upload a White version (single color) of your logo on a Transparent background. If you upload a colored version, you will get a dark gray icon, which would look nasty. If you don't have a white version of your logo, get it designed. Leave the rest of the settings as they are. For the Name textbox value, enter: fcm_push_icon. Then click on the Blue colored round shaped button to download the zip file.
4. Unzip the zip file and copy contents to your app root folder:
Unzip the zip file that you just downloaded in the step above and extract its contents to a folder. You will notice that it contains a res folder. If you open this folder, it will contain other folders with the following names:
drawable-hdpi
drawable-mdpi
drawable-xhdpi
drawable-xxhdpi
drawable-xxxhdpi
Each of those folders will contain a PNG icon by the name "fcm_push_icon.png". The only difference between the icons in those different folders is their size.
5. Copy the res folder to project root:
Copy the res folder from the Point 4 above, to the root folder of your app. So it should look like this now:
yourApp/res/drawable-hdpi/fcm_push_icon.png
yourApp/res/drawable-mdpi/fcm_push_icon.png
yourApp/res/drawable-xhdpifcm_push_icon.png
yourApp/res/drawable-xxhdpi/fcm_push_icon.png
yourApp/res/drawable-xxxhdpi/fcm_push_icon.png
6. Create colors.xml in the root folder of your app:
Now create a new file called colors.xml in the root folder of your app. So it should look like this now:
yourApp > colors.xml
7. Copy following content into colors.xml:
Copy the following content into the file colors.xml that you created in the Step 6 above and save it.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#3880ff</color>
<color name="colorAccent">#3880ff</color>
<color name="white">#FFFFFF</color>
<color name="ivory">#FFFFF0</color>
<color name="orange">#FFA500</color>
<color name="navy">#000080</color>
<color name="black">#000000</color>
</resources>
8. Change the value of colorPrimary:
Change the value inside the tags: <color name="colorPrimary"></color> to any color you like. For example, you can use:
<color name="colorPrimary">#eedd33</color>
9. Build your App:
That's it! Now just build your app. When the build runs, it will copy all the files from the src directory to the target directory and the app will read the contents from the target directory.
So from now on, whenever you send a notification on your Ionic based Android app, the receiver will see your Colored App icon in the notifications.
10. Enjoy!!!
AndroidManifest.xml duplicate line issue resolved!
I resolved this issue by adding a variable in package.json file.
Step 1: Visit the following link: Notification Icon Generator to generate your notification logo.
Step 2: If you open the zip file, you will get a "res" folder. Place the folder into your root directory
Step 3: "ANDROID_DEFAULT_NOTIFICATION_ICON": "#drawable/fcm_push_icon" - Add this line in your package.json file.
For example:
"cordova-plugin-fcm-with-dependecy-updated": {
"ANDROID_DEFAULT_NOTIFICATION_ICON": "#drawable/fcm_push_icon",
"ANDROID_FIREBASE_BOM_VERSION": "26.0.0",
"ANDROID_GOOGLE_SERVICES_VERSION": "4.3.4",
"ANDROID_GRADLE_TOOLS_VERSION": "4.1.0"
}
Step 4:
Add these lines in your config.xml Inside platform name="android"
<resource-file src="res/drawable-xhdpi/fcm_push_icon.png" target="app/src/main/res/drawable/fcm_push_icon.png" />
<resource-file src="res/drawable-hdpi/fcm_push_icon.png" target="platforms/android/res/drawable-hdpi/fcm_push_icon.png" />
<resource-file src="res/drawable-mdpi/fcm_push_icon.png" target="platforms/android/res/drawable-mdpi/fcm_push_icon.png" />
<resource-file src="res/drawable-xhdpi/fcm_push_icon.png" target="platforms/android/res/drawable-xhdpi/fcm_push_icon.png" />
<resource-file src="res/drawable-xxhdpi/fcm_push_icon.png" target="platforms/android/res/drawable-xxhdpi/fcm_push_icon.png" />
<resource-file src="res/drawable-xxxhdpi/fcm_push_icon.png" target="platforms/android/res/drawable-xxxhdpi/fcm_push_icon.png" />
That's it!
I followed Denver's solution too but I kept getting duplicate error in AndroidManifest while building the app so I removed this line from config.xml
<config-file parent="/manifest/application/" target="app/src/main/AndroidManifest.xml">
<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="#drawable/fcm_push_icon" />
<meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="#color/colorPrimary" />
</config-file>
and replaced it with
<config-file parent="./application" target="AndroidManifest.xml">
<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="#drawable/fcm_push_icon" />
</config-file>
The app builds and the notification icon works.
Denver's solution worked for me greatly, but in compile time it gave AndroidManifest.xml duplicate line issues.
If anyone facing same issue like me:
Just delete
<config-file parent="/manifest/application/" target="app/src/main/AndroidManifest.xml">
<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="#drawable/fcm_push_icon" />
</config-file>
In step 2: In my case, I am not bother about colors.
Add this in config.xml:
<plugin name="cordova-plugin-fcm-with-dependecy-updated" spec="^7.3.1">
<variable name="ANDROID_DEFAULT_NOTIFICATION_ICON" value="#drawable/fcm_push_icon" />
</plugin>
I know this is old, but just in case someone faces the same error, with the latest version of IONIC (I´m using 6.12.2), I kept on having the same issue and looking in the file (AndroidManifest) which is located in PathToYourProject\platforms\android\app\src\main\AndroidManifest.xml
I had found that the "build" creates 2 metas with the same value
<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="#drawable/fcm_push_icon" />
&&
<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="#someOtherName" />
So, what you have to do is:
Add to your AndroidManifest, above the 2 meta-data:
Delete the other 2 meta-data
open the AndroidManifest with VSCode and when you build your project keep an eye on the build process. When you see "cordova.cmd build android", bring to the front your VSCode and wait until you see the 2 meta-data added again.
As soon as you see them, delete the one with a name different than "#drawable/fcm_push_icon".
Wait until the process finishes and test it. You are going to have the color push notification icon with the desired color as explained by #Devner.
1. What we want to achieve
Install a pre-configured cordova app using fb cordova plugin ( cordova-plugin-facebook4 - https://github.com/jeduan/cordova-plugin-facebook4 )
2. Problem
The problem derives from the "pre-configured" part.
As a default, the plugin required to being install passing it some configurations like APP_NAME / APP_ID values, as documentation at < https://ionicframework.com/docs/native/facebook > specified.
This is a problem for us because our application creation flow process is based mainly onto the Cordova's configuration config.xml where clearly all plugins are listed.
3. Question
Our need is to be able to pass some configuration directly inside the config.xml file, like for other plugins here below shown:
<plugin name="cordova-plugin-camera" spec="2.4.1">
<variable name="CAMERA_USAGE_DESCRIPTION" value="Allow the app to use your camera" />
<variable name="PHOTOLIBRARY_USAGE_DESCRIPTION" value="Allow the app to access your photos" />
</plugin>
In the previous lines, variables for cordova-plugin-camera is the way to configure the plugin.
4. Alternative solutions not adopted
Reading around, some solution required to change plugin.xml file of facebook-plugin.
The problem of this solution is the cost for the forked plugin maintenance.
5. Question-based on 4.
Avoiding to fork plugin for configuration setting purpose, can be HOOKS approach usefull? I mean, can we replace "preference" tag inside plugin.xml at some build / prepare / plugin install time as wrote in the second answer at the following link < Cordova Facebook plugin : missing variables APP_ID, APP_NAME > ?
thanks for reading!!
You can specify the APP_ID and APP_NAME in the config XML as following:-
Under Android Platforms:-
<config-file parent="/resources" target="./res/values/strings.xml">
<string name="fb_app_id">574355309670137</string>
<string name="fb_app_name">HUB App</string>
</config-file>
And outside the platform and at the bottom(when installed fb plugin) it would be defined as below:-
<plugin name="cordova-plugin-facebook4" spec="^3.1.0">
<variable name="APP_ID" value="574355309670137" />
<variable name="APP_NAME" value="HUB App" />
</plugin>
Please let me know if you have any questions.
I'm developing an app with Ionic in version 3 but I'm having a problem with the build for IOS, just for IOS.
For several days I researched and did not find a solution to my problem, able to compile the last two versions without problem, but now that I need to release another version, but it is not going.
Only the build for iOS is giving trouble.
The problem
After the build, testing on a real device, the application enters the splashscreen and exits, entering a white screen that does not come out at all.
This occurs only in the build with the --prod flag. When I run in debug mode it works perfectly, with livereload and everything else.
Information
In the XCode console the only thing I see is all startup, and when the app is locked, on the white screen I see: TIC Read Status [10: 0x0]: 1:57 and TIC Read Status [11: 0x0]: 1:57
Any attempt to help is welcome. Thanks in advance!
I had a similar issue and nothing seemed to be working.
In the end, I added the browser as a platform.
ionic cordova platform add browser
Then, I tried to run that as production and it was from there, that I was able to diagnose the problem more, because the errors were shown then in the console.
ionic cordova run browser --prod --release
I didn't have much luck with XCode showing me and real errors.
I got a similar issue recently. Are you using ionic SplashScreen plugin? Can you try performing a clean installation after deleting node_modules, platforms and plugins directories.
If it didn't work update your app.component.ts like this.
import { SplashScreen } from '#ionic-native/splash-screen';
export class MyApp {
...
constructor(... public splashScreen: SplashScreen, ...) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
...
setTimeout(() => {
this.splashScreen.hide();
}, 2000);
...
});
}
In your config.xml set this perference.
<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="ShowSplashScreen" value="false" />
<preference name="SplashScreenDelay" value="3000" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="FadeSplashScreen" value="false" />
This is my code
angular.module('starter.controllers', ['ngCordova'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
setTimeout(function () {
navigator.splashscreen.hide();
}, 500);
});
})
Are you trying to hide the splash screen? If you are, why not set up your splash to be a blank image? Find a high res blank png and run the command ionic resources --splash and this will generate your splash image for all the devices.
Have a look a Cordova's documentation or the documentation on npm repository: you might need to set some preferences in config.xml.
First, the following is not mentioned on the first site but it might solve your problem:
<preference name="SplashScreen" value="screen" />
Maybe you could also have to change some settings such as disabling autohide (you already hide the splash screen manually when you hide your app so it shouldn't be a problem) :
<preference name="AutoHideSplashScreen" value="false" />
Note :
As Joseph Ocasio already mentioned, don't forget either to generate your resources with the Ionic CLI.
To generate all (application icons + splash screen images) :
ionic resources
To generate splash screen images only :
ionic resources --splash
Be sure that you have got already installed the plugin cordova-splash-screen (cordova plugin add cordova-plugin-splashscreen --save)
Then check you config.xml file and add this
<preference name="FadeSplashScreen" value="true" />
<preference name="FadeSplashScreenDuration" value="1000" />
<preference name="Fullscreen" value="false" />
It should be work :)
I cant deploy an unsigned bar to my playbook device , because the of : failure 881 application author does not match debug token author. How can I fix this ?
Ive installed a debug token with bb10 sdk, so on my device, in my Security >> Development Mode tab I have:
Debug Token ....... Installed
Valid ............ Yes
Author............ -
Expiration Thu Jan 17 2013 04:19:43 PM
I`ve tryed to deploy like 2 times with/without tags
config.xml
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
xmlns:rim="http://www.blackberry.com/ns/widgets"
version="1.0.0.0"
>
<name>AppDev2.0</name>
<author>-</author> <!-- and without <></> and still pops me the failure 881 author problem -->
<icon src="assets/icon.png"/>
<content src="index.html"/>
<rim:permissions>
<rim:permit>access_location_services</rim:permit>
</rim:permissions>
<!-- for flickr search data (json) -->
<access uri="http://api.flickr.com" />
<!-- for flickr images from farm1. to farm9. -->
<access uri="http://staticflickr.com/" subdomains="true" />
<!-- for google image search data (json) -->
<access uri="https://ajax.googleapis.com" />
<!-- for google images from t0. to t3. -->
<access uri="http://gstatic.com" subdomains="true"/>
<!-- for weather data (xml) from free. and icons from www. -->
<access uri="http://worldweatheronline.com/" subdomains="true"/>
<!-- used to create dialogs (location-details.js, splash.js, saved-locations.js-->
<feature id="blackberry.ui.dialog"/>
<!-- to enable the application to invoke the browser -->
<feature id="blackberry.invoke"/>
<!-- to trap the onswipedown event -->
<feature id="blackberry.app"/>
</widget>
"I had similar issue. Check that in blackbery-tablet.xml and fields are correct.
To get the right values for those fields just rename your packed .bar file to .zip, then unarchieve it. There will be manifest.mf file in META-INF folder. Open it with notepad. Grab and values from there and rebuild your app. If that does not help, then rebuild debug token and make sure you install it on the device. Debug token needs to have correct device pin.
Please click the Thumbs Up icon if this comment has helped you! If your issue is resolved, please click the solution button on the resolution!" -source http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/Failure-881-Application-Author-does-not-match-debug-token-author/m-p/2055935#M32567
I had similar issue. and it was not an "author" problem : I was trying to deploy in debug mode and the debugToken was just not installed on the device.
The debugToken must be on the device so that the deploy can work. You can upload the debugToken with :
blackberry-deploy -installDebugToken debugtoken.bar -device 169.254.0.1 -password
hope this helps :)
The value of the author tag must match your company name you have provided during creation of BlackBerry Signing keys.
Open with a text editor the file blackberry-tablet.xml, the file is inside your <BlackBerry WebWorks SDK Tablet install folder>\bbwp\AirAppTemplates\src\.
You should see a section with something like:
<publisher>Sample Inc.</publisher>
<category>core.internet</category>
after this section you have to add
<author>*replace with your author name info*</author>
<authorId>*replace with your author id info*</authorId>
You'll have to get your author and your author id info from the debug token that you uploaded on your PlayBook. You should have your debug token on your computer, rename .bar to .zip and extract. With a text editor look in the META-INF folder at the MANIFEST.MF file for values for Package-Author: and Package-Author-Id: folowed by the actual string values.
Hope this helps.