Cordova 3.5 embedded webview with plugins - android

I have an existing native Android app to which I'm adding a cordova webview.
This is in the new gradle project format with Intellij.
I've successfully gotten the cordova activity loaded, and opens as expected.
I added the webview by following the cordova docs.
Now I'd like to use some of the plugins available but can't find a way to add them to the project.
Since this isn't a cordova generated project, plugman doesn't work. I've tried copying the JS and Java files for the plugins I'm interested in to my source dir but that results in various errors.
e.g. require is undefined, when this happened, I added requirejs to the webview's index.html
and it moved on to
Uncaught Error: Module name "cordova/exec" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded cordova.js:8
Failed to load resource file:///android_asset/www/scripts/cordova_plugins.js
deviceready has not fired after 5 seconds. cordova.js:1191
Channel not fired: onDOMContentLoaded
How do I get a plugin working with this?
EDIT:
I am manually moving stuff around.
This has to be put into an existing project which uses gradle for building.
Using cordova create generates a project in the old ANT format.
I followed the docs on embedding a WebView in an existing project (see the link above), but it doesn't mention any of the JavaScript files. So I just copied cordova.js from the android platform directory.
Like wise, I download the plugins I wanted, copied their JavaScript files, added the feature to build.xml and copied their Java files to my src directory.
I didn't know about cordova_plugins.js or that cordova prepare generates them.

You have to use Plugman to manage your plugins in the custom built Cordova WebView.
Please remove all your existing plugins and read them using plugman.
plugman install --platform android --project <proj> --plugin org.apache.cordova.battery-status --www <proj>/assets/www/scripts
where the <proj> is the folder where you main project is created,
Alternatively you could use --www parameter which allows you to specify where root of web application is stored. Example:
plugman install --platform android --project <proj> --plugin org.apache.cordova.battery-status --www <proj>/assets/www/scripts
Plugman reference
EDIT
If you have highly customized project, you could create empty Cordova project where you add
plugins, and copy cordova_plugins.js from this project to assets\www\scripts, Cordova should pickup these files. If you have your plugins JS files not in the assets\www\scripts\plugins\ folder, but instead of that in assets\www\plugins you have to modify content of cordova_plugins.js like that
module.exports = [
.....
{
"file": "../plugins/org.apache.cordova.inappbrowser/www/InAppBrowser.js",
"id": "org.apache.cordova.inappbrowser.InAppBrowser",
"clobbers": [
"window.open"
]
},
...
]

Here is some input on how I came though,
I am in a similar position like the OP, embedding a Cordova Web View in my Native Android Application.
After executing
plugman install --platform android --project <proj> --plugin org.apache.cordova.battery-status --www <proj>/assets/www/scripts
What happens is you get a new 'Cordova' folder in your original 'main' Folder, (Where your AndroidManifest.xml is). Besides that, there is the 'src' folder with the code you actually need generated.
What I did, was copying the org folder from src to the 'java' folder. And everything worked.

Related

Build Failing for React Native iOS, "Multiple commands produce" Error

We were working on a react native project. One of my team members added some native modules on Linux and linked android. By then I am trying to link things in iOS but the build is always failing with this kind of error trace. The Android project is building normally.
I deleted xyz.xcworkspace and Podfile.lock then tried pod install.
Also, I tried to delete my node_modules and then yarn install followed by yarn link.
react-native-cli: 2.0.1
react-native: 0.61.4
yarn 1.19.1
Pod 1.8.4
XCode Version 11.2.1 (11B500)
macOS Catalina 10.15.1 (19B88)
xyz warning
duplicate output file '/Users/user/Library/Developer/Xcode/DerivedData/xyz-hhesslamjsqmbobykhskliclusph/Build/Products/Debug-iphonesimulator/xyz.app/AntDesign.ttf' on task: PhaseScriptExecution [CP] Copy Pods Resources /Users/faisal/Library/Developer/Xcode/DerivedData/xyz-hhesslamjsqmbobykhskliclusph/Build/Intermediates.noindex/xyz.build/Debug-iphonesimulator/xyz.build/Script-47F818C57EEC47EA3303EA1B.sh
xyz workspace errors
Multiple commands produce '/Users/user/Library/Developer/Xcode/DerivedData/xyz-hhesslamjsqmbobykhskliclusph/Build/Products/Debug-iphonesimulator/xyz.app/Zocial.ttf':
1) Target 'xyz' (project 'xyz') has copy command from '/Users/user/Desktop/xyz/native/node_modules/react-native-vector-icons/Fonts/Zocial.ttf' to '/Users/user/Library/Developer/Xcode/DerivedData/xyz-hhesslamjsqmbobykhskliclusph/Build/Products/Debug-iphonesimulator/xyz.app/Zocial.ttf'
2) That command depends on command in Target 'xyz' (project 'xyz'): script phase “[CP] Copy Pods Resources”
There are multiple errors and warnings like this but have same format with different file names.
The problem is you have duplicate resources due to RN auto-linking.
To fix this
Click Your Xcode project Name on project files
Navigate to Build Phases tab
Scroll down to Copy Bundle Resources drop down to expand
Scroll down to Copy Pod Resources and compare the duplicates with the ones on Copy Bundle Resources
Delete the duplicates on Copy Bundle Resources not on Copy Pod Resources
Rebuild your project.
Also refer to this issue
The problem seems to be caused by the new autolinking feature in React Native 0.60 - the line use_native_modules! in ios/Podfile means when you do pod install, any pods found in node_modules are automatically linked. This means that links to all font files are added to [CP] Copy Pods Resources when you do pod install.
Please see this image.
Open Your iOS project in Xcode.
Then follow these steps in the image.
You will see input Files and output files under Copy Pod Resource. Remove the duplicate ones listed here from the above list in Copy Bundle Resources.
Run react-native run-ios
For the xCode 11+ and react-native 0.60+,
The answer is copied from this GitHub issue answer
The problem seems to be caused by the new autolinking feature in
React Native 0.60 - the line use_native_modules! in ios/Podfile
means when you do pod install, any pods found in node_modules are
automatically linked. This means that links to all font files are
added to [CP] Copy Pods Resources when you do pod install.
If you previously installed react-native-vector-icons manually by
adding the font files to Copy Bundle Resources, you then get a
"Multiple commands produce..." fatal build error.
So to fix the problem, just remove the font files from Copy Bundle
Resources, so that they are only in [CP] Copy Pods Resources.
So the official documentation on the repository of the library is outdated and does not mention it. You should follow installation steps up to adding the fonts list to info.plist, and DO NOT create Fonts folder-group and copy-paste the fonts into that folder.
You need to delete this manually from Copy Bundle resource.
Else You need to change build setting to build using legacy build.
You will find the Copy Bundle resource under build phases.
I am able to solve the issue by following this step.
All you have to do is open your project folder -> go to /ios and open file YourProjectName.xcodeproj then follow this https://lifesaver.codes/answer/error-multiple-commands-produce-in-xcode-10, then you just need to delete all fonts there and run npx react-native run-ios

Default Cordova index.html is compiling

I have cordova latest version installed on my system and I created the basic app with command
cordova create
and I added the platform using
cordova add platform android
and I replaced the default index.html in the www directory with my own index.html
but whenever i tried to generate apk, and tried to run it on my mobile. It was the apk generate with default index.html
the screen of my app will be
How to resolve this issue ?
This is a normal behaviour.
Cordova is going to take the index.html from your projects root folder, everytime you run cordova build, prepare or serve without attribues, which is located directly inside your projects www folder.
Root www folder inside your cordova project contains the index.html which is taken and "thrown" into all platform folders when you run those commands.
projectName -> www -> index.html
Solution
You work in your projects root folder, and run cordova prepare everytime after you did a change to your index.html file.
You work directly inside your android project folder and the index.html which is located inside the assets -> www folder
You can change default index.html file to your own .html file
Simply open config.xml file in your project folder and edit its src attribute in <content> tag:
like:
default:
content src="index.html"
edited:
content src="helloCounterApp.html"
(Then it will load helloCounterApp.html not index.html(default))

phonegap build command resetting the asset/www source code

Whenever I execute phonegap build android/ios, my asset folder is getting reset to sample folder and source code.
Because of this , whatever the code I am copying into the asset/www it is being overwritten by sample codes of phonegap
Does anybody come across this issue.
What could be the reason.?
This is the correct behavior of cordova/phonegap project.
Under yourProjectRoot/platforms/android/assets/www there are the source copied in build phase from the yourProjectRoot/www directory, you must implement your HTML5/js code in this folder, this is the entry point for you source.
I suggest you to take a look here: Build the App before start the development.
Help of PhoneGap build command says:
Builds your application for one or more specified platforms. When no
platforms are specified, all installed platforms will be built.
The build task will first prepare and then compile your application.
If you want more control, you can individually prepare and compile
your application with the commands.
Your platform specific www folder is overwritten because prepare command is fired.
If you preparing your entire project in platform specific folder like ${PROJECT_ROOT}/platforms/android and you want to compile it than you have to run phonegap compile your_platform. It will bypass prepare and go straight to compile.

How to merge or override the build.xml for Android in phonegap / Cordova

I'm working on a Multi-devices Hybrid Apps solution for Cordova in Visual Studio 2015.
I'm using Grunt for some reasons so there is a "node-modules" folder in my solution and I can't build for Android because of this folder.
The soluton is to add this property :
<property name="aapt.ignore.assets" value="<dir>node_*" />
in the build.xml for Android to exclude the node modules to be built in, but the build.xml file is generated with my visual studio solution build and it seems to have no way to specify the "ignore" property in the cordova config.xml.
I also tried to create a build.xml file in /res/native/android/ ( equivalent to the /res/cert/android/ in the previous CTP of MDHA ) but no merges was done.
Any idea ?
Try adding this to \res\native\android\ant.properties:
aapt.ignore.assets=<dir>node_*
This file appears to be imported into build.xml (which is generated) so it provides a roundabout way of getting your value in there.

How do I get Cordova 3.0 to recognize my own plugins in external project folders?

I am able to create a Cordova 3.0 project for Android using the platform specific tools (I tried the CLI approach but could not make it work). I added the standard core plugins using the plugman tool. My app's index.html and .js plugin files seem to be loading since I can see the start screen and do some basic things in the app. However, the advanced functions like calling out to the database and such are not working since these were implemented by me with my own custom plugins. These plugins exist in their project folders, and are added as library references in the main activity (the one I right click in Eclipse and select Debug as Android application). As such, they show up as .jar references in the Android Dependencies section of the Java Build Path for that specific project. I am about 90% certain my .js plugin files are correctly setup since I do have one plugin that is a package in the main activity's src tree. This is the only plugin that did work. When I removed that package to test and tried using that plugin functionality, it failed to work.
My plugins have been added correctly to the config.xml file. At least for the one custom plugin that exists in the main activity's src directory. Here is an example of a non-working plugin:
<feature name="DBHelper_Plugin">
<param name="android-package" value="com.cordova.plugin.dbhelper.DBHelper_Plugin" />
</feature>
Is it possible to use 3rd party plugins from external folders? If so, how? If not, do I have any alternative options other than cluttering up my main activity's src tree with a million plugin packages (as it is right now with the core plugins)?
For anyone who might also be having this issue, here is what I did:
Remove your external (outside of your main activity's src directory) plugins from the Android library references (right click main activity > Properties > Android > remove from Library section). Only do this for the plugin projects themselves.
Find your generated plugin .jar files in their bin directories in their respective project folders in Windows Explorer. If they are not there, build the projects in Eclipse. Drag these into the libs folder of your main activity. Eclipse will ask if you want to copy or link these files. Choose to link it.
And that's it. The plugins will now show under Android Private Libraries instead of Android Dependencies, and Cordova is able to see and use them (make sure to include them as feature references in your config.xml file). Since they are linked you can make changes to your plugin in Eclipse and not have to worry about copying it over again.
Cheers.

Categories

Resources