Closed zanemcca closed 8 years ago
I don't know the reason, but many ionic users report similar issues. However I'm not familiar with ionic framework. Please involve some ionic experts to help for this.
I give you one suggestion. Many bugs are fixed in the test branch. I thought I fixed one bug regarding with ionic one day. Please try to use the test branch.
$> cordova plugin rm plugin.google.maps
$> cordova plugin add https://github.com/wf9a5m75/phonegap-googlemaps-plugin#test --variable API_KEY_FOR_ANDROID=...
$> cordova run android
Try to use https://crosswalk-project.org so your Ionic project will include Chromium engine instead the slow web view that coming with Kitkat
Crosswalk is still not compatible with this plugin. We're still waiting for the new releases which will hopefully fix the problems with transparent webview background. When the running update of crosswalk is out, you will of course have all the benefits that crosswalk brings to you
@wf9a5m75 I tried the test branch but I was getting build errors so I couldn't test it.
BUILD FAILED
/usr/bin/android-sdk-linux/tools/ant/build.xml:653: The following error occurred while executing this line:
/usr/bin/android-sdk-linux/tools/ant/build.xml:698: null returned: 1
...
ERROR building one of the platforms: Error: ~/project/client/platforms/android/cordova/build:Command failed with exit code 8
You may not have the required environment or OS to build this project
@tyohan I think 4.4.4 has the Chromium engine as well. I was considering using Crosswalk for older devices though.
Could you show me the whole log? Not only the line. There is no enough infornation.
Please use gists.github.com
On Wed, Mar 4, 2015, 5:29 AM Zane McCaig notifications@github.com wrote:
@wf9a5m75 https://github.com/wf9a5m75 I tried the test branch but I was getting build errors so I couldn't test it.
BUILD FAILED /usr/bin/android-sdk-linux/tools/ant/build.xml:653: The following error occurred while executing this line: /usr/bin/android-sdk-linux/tools/ant/build.xml:698: null returned: 1
...
ERROR building one of the platforms: Error: ~/project/client/platforms/android/cordova/build:Command failed with exit code 8 You may not have the required environment or OS to build this project
@tyohan https://github.com/tyohan I think 4.4.4 has the Chromium engine as well. I was considering using Crosswalk for older devices though.
— Reply to this email directly or view it on GitHub https://github.com/wf9a5m75/phonegap-googlemaps-plugin/issues/426#issuecomment-77157228 .
Hi, i have the same problem. My phone is MI 3W, KitKat 4.4.4. I was upload a example in github: https://github.com/darkat/ionicslow/ If i remove the google-maps plugin, the app work well. Thanks
I agree. This plugin can give native maps but without crosswalk you can see the performance penalty on the Android devices clearly.. I believe it's because the transparency this plugin sets to the DOM. A very good alternative is to use Leaflet.js with Mapbox or HERE tiles (so to apply a Google like map style), until Crosswalk can support the transparency and this plugin can work with Crosswalk fine. Then again you have a storage penalty (my app grows up to 53MB - 5MB .apk and Data 48MB - without crosswalk and if I build it using Crosswalk it grows up to 115MB).
I don't think transparency is not this problem. Because the slow issue reports only ionic users.
Hi, @wf9a5m75 Maybe, but I am using Onsen UI. Without installing the plugin, the transitions between the pages (slide especially) are smooth and the feeling of the app is fine. Adding the plugin though, the transitions become heavy and you can see small lags. I have two versions of the same project, one with the plugin and one with the alternatives mentioned on my previous comment. The latter runs and feels much better (Maybe has to do with the UI frameworks that are being used - Onsen, Ionic etc), but either way there should be 100% compatibility with these frameworks as the community around them grows quickly. Again, when I build with Crosswalk and this plugin, the app runs like the version without the plugin installed. That is, smooth and lags free.
I guess that that these lags are related to the plugin's position watcher. In iOS it is perfectly smooth (I'm also using onsenui)
Android performance is usually bad on webview, just newer devices like s5 or htc one, note 3 are smooth.
Could you please try just one thing to confirm (but you need to have the test branch installed)
map.setWatchDogTimer(10000); I guess this will boost the performance. This is just a proof of concept, remove the code after test
Ok, please use crosswalk if you so. I haven't tested it yet, but crosswalk-12 beta seems support the background feature. I think the test branch code is better for this issue.
You need to know that this plugin check for its child elements and its own position every 100ms. Android has very bad performance with setInterval, as it is thread and ui-blocking operation and delayed to a queue of calls. Therefore you have this lags I guess. Try so set the watchdog timer to a higher value step by step (100 is default).
This will cause in slower element position recognition but it will definitely boost performance. Your could and should also destroy the map on prepush (and maybe recreate in post push) you just need to catch all the postpop and prepop events in onsen (as a pop on an destroyed map will lead into a blank map). I have some reinit code in my postpop listeners for this kind of problems.
But there are several ways of optimizing
I have a MI3 (more faster than HTC ONE) and the performance is bad. Add the line map.setWatchDogTimer(10000) don't work. I haven't added the code for load the map, i just installed the plugin. For this reason, i do not think that transparencies are the reason for the poor performance.
@darkat Could you take a video how slow the app on your phone? I've never felt the app that use this plugin is terrible slow. (Since I don't use JS frameworks basically, that is the reason probably)
@wf9a5m75 I made a video showing the difference. Hope that helps.
In the videos above, no code initializing map was run, so no transparencies were set. There's just plugin installed.
Note that it's not only scrolling. There's an overall performance loss, for example tapping, CSS3 animations, swiping are all also slow.
I tracked this issue back to the release candidate of Ionic. Once they went from 1.0.0 beta#14 to RC.0, this huge performance issue popped up. All versions below the first release candidate worked just fine. Anyone with more knowledge about the inner workings of Ionic and what changed between the latest beta and release candidate? I couldn't find anything noticeable in the release notes. Same version of Angular was used in both versions. Since i have seen this same issue with people who use onsen-ui and ember, any idea if there's any overlap between these three? Maybe some component got an update and screwed up cordova maps? @wf9a5m75 thanks for your great work so far!
I was thought all these perfomance issues are already talked. All lags and freezes are here becouse plugin use webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
to place map layout.
That mean your webview makes all transition not accelerated with GPU, only use CPU for that. That's why it freeze.
You may comment
if (VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}
line in MyPluginLayout.java
, but when I get problems with map on some devices - it may not fill the sreen.
Then trying set hardware acceleration after map init by
webView.setLayerType(View.LAYER_TYPE_HARDWARE, null);
Try to use this plugin with Crosswalk project. The problem might be solved. https://github.com/wf9a5m75/phonegap-googlemaps-plugin/wiki/Tutorial-for-CrossWalk-(Android)
Thank you. I will try that when I get back to the project.
Crosswalk brings much performance, but changing from SOFTWARE to HARDWARE boosted my app like 300%. Thank you so much for pointing that out @michaeleparkour . There is also a SOFTWARE line inside of "GoogleMaps.java". I've also changed from software to hardware.
@wf9a5m75 is there any reason why you set this to Software?
I'm checking out crosswalk right now. For Ionic users: crosswalk is integrated in Ionic. Since background transparency is only supported by the latest crosswalk versions, you should modify your browser.js file inside your ionic node package. You can probably find it somewhere around here: /usr/local/lib/node_modules/ionic/lib/ionic . Add the latest version of crosswalk to this file. Save and close the file. Go to your ionic project, run ionic add browser@{version_I_just_added}. This should automatically install the prefered version of crosswalk into your project. Be careful though, still beta so it could give some errors a long the way. For the official ionic crosswalk docs check: https://github.com/driftyco/ionic-cli#crosswalk-for-android
Althoug the latest version of Crosswalk might work with the hardware setting, regular webview (not crosswalk) does not change the background as transparent with the hardware setting.
As I said #302, testing Crosswalk has just started finally, there might be some issues.
To use Your plugin we need crosswalk 14? With ionic I can use only 13:
ionic browser add crosswalk
Version 8.37.189.14 Published Fri Oct 10 2014 03:26:00 GMT+0200 (Środkowoeuropejski czas letni)
Version 9.38.208.10 Published Tue Nov 25 2014 11:45:00 GMT+0100 (Środkowoeuropejski czas stand.)
Version 10.39.235.15 Published Wed Dec 31 2014 13:16:00 GMT+0100 (Środkowoeuropejski czas stand.)
Version 11.40.277.7 Published Thu Feb 26 2015 07:03:00 GMT+0100 (Środkowoeuropejski czas stand.)
Version 12.41.296.5 Published Thu Mar 05 2015 13:19:00 GMT+0100 (Środkowoeuropejski czas stand.)
(canary) Version 13.41.318.0 Published Wed Mar 11 2015 09:22:00 GMT+0100 (Środkowoeuropejski czas stand.)
I have tried installing crosswalk using the latest version, and it worked as expected. But i couldn't get my app to access the internet... Even with the uses-permission for INTERNET, it did not work. I used the ngCordova plugin for network, and if showed me i was connected...
As of a "solution" to this issue, wich seems to be more performant as of now?
@brunodb3 You need to comment one line - http://forum.ionicframework.com/t/crosswalk-integration-beta-in-ionic-cli-v1-3-2/15190/263
Thanks @piernik , going to try this out and post the feedback ;)
After struggling a bit with the crosswalk platform, i got the app to work without the plugin installed. Once i installed it , "ionic run" gave me a build error....
I did not change any lines from the plugin or crosswalk, only the line 204 to make my requests work and login successfully to Parse.com
@brunodb3 this has to do with not implementing the latest crosswalk version, pretty sure of it. If my explanation above wasn't working to add crosswalk in the correct maner, do it manually. Follow the migration plan on the crosswalk documentation. I had the same kind of errors after adding crosswalk the ionic way, but when i moved crosswalk manually into CordovaLib all just worked fine. You can follow this guy's tut on youtube: https://www.youtube.com/watch?v=0I1OjJLVLMo Make sure you download the latest cordova crosswalk version and follow the steps in the youtube post. Then make sure you overwrite the mainactivity in your android project as suggested over here: https://github.com/wf9a5m75/phonegap-googlemaps-plugin/wiki/Tutorial-for-CrossWalk-(Android) .
@Luukschoen Thanks for the tip, here goes another attempt on CrossWalk. Also, is there a way to reduce the app's size? I noticed that (when i didn't have the plugin on) the app went from 5MB to almost 60MB...
Should i install XWalk or maps plugin first? In case it somehow generates conflicts :|
If you add crosswalk to your build, it'll add chromium browser in your package. Thus, package size increases since it got a browser included. I think 60mb is because of packaging arm and x86 both, if you package just one it should be around 39-40mb. Here's what you need to do: throw away your plugins for starters. Implement crosswalk as suggested in the YouTube video. Make sure everything works with crosswalk (i.e. building and stuff like that)! If it all works, add the phonegap-googlemaps-plugin. Make sure you work with the test branche! So use plugin add link/to/repo#test .
I couldn't get the ionic build to work after adding crosswalk just like the video. Also, i had to target api level 21 or 'ant debug' would not work... I will try again, if the error persists i will post a screenshot
@brunodb3 If nothing seems to work, try it with a clean ionic project. Let me know if you succeed. I have to say, with crosswalk implemented the plugin works like a charm
I have successfully installed the crosswalk, just like the video. everything works just fine except i get this error https://db.tt/0V88kusB
I have solved the issue but it seems. something is not being triggered
@k1ng440 did you already try to initalize the map at this point or did you just add the plugin?
I've managed to add crosswalk with beta ionic-cli - https://github.com/driftyco/ionic-cli/issues/364 but can't install phonegap google maps plugin :/ https://github.com/wf9a5m75/phonegap-googlemaps-plugin/issues/520
@wf9a5m75 I think Your tutorial is no use for ionic users. Ionic has great cli with it's browser
support. Can You test Your plugin with it? ionic-cli
is rather easy to use - here You have docs how to start http://ionicframework.com/docs/cli/
@piernik The reason that this plugin is not compatible with the Ionic CLI is because of the used versions of Crosswalk. Ionic CLI currently supports stable Crosswalk versions (for obvious reasons). This plugin makes use of a property to set a background transparency. This isn't supported in the latest stable release, thus not compatible with this plugin. Your options: wait till there's a stable release of Crosswalk that's integrated with Ionic or just add Crosswalk (a version that supports a transparency on background property) manually to your Ionic project and then add the plugin. I' can guarantee you it works (since it is over here). If you want I could tell you the versions of Cordova/Crosswalk/Ionic I'm using? Let me know.
@Luukschoen no, it's not the issue. I'm using beta version of ionic-cli where You can use crosswalk 14. I can't install plugin not use it.
But yes You can tell me which version are You using - I tried to make it working using YouTube video but no luck.
Beta is not canary. Please read The Wiki here about crosswalk. @luukschoen pointed out everything correctly.
@Hirbod I'm talking about ionic-cli beta - not crosswalk beta. Here is link https://github.com/driftyco/ionic-cli/issues/364
Using this ionic-cli beta You can install crosswalk 14 using ionic browser add crosswalk@14....
command and after adding crosswalk to project (which works great) I'm trying to add google maps plugin with no luck as explained here https://github.com/wf9a5m75/phonegap-googlemaps-plugin/issues/520
Yeah and the problem is for sure the crosswalk version (canary is important). Also, Cordova 5.0 isn't supported right now
what @Hirbod said. It has definitely to do with the Crosswalk version. This is the Ionic info on my project:
OS: Mac OS X Yosemite Node Version: v0.12.0 Cordova CLI: 4.3.0 Ionic CLI Version: 1.3.22 Xcode version: Xcode 6.3.1 Build version 6D1002 ios-sim version: 3.1.1
I have also adjusted the existing cli version to include the right Crosswalk version, but it gave me the same errors as you've shown on the separate issue. I guess it has something to do with the order of building the project by Ionic. It doesn't seem like Crosswalk is added in the right manner. You can check this by comparing your .java file and compare it to the one mentioned over here: https://github.com/wf9a5m75/phonegap-googlemaps-plugin/wiki/Tutorial-for-CrossWalk-(Android). I can guarantee you that you don't have the right Crosswalk version or it's an issue with the way Crosswalk is added by the Ionic CLI. Either way, if you add it manually you should definitely get it to work. It works for @Hirbod as it works for me. Good luck!
Thanks - I'm using cordova 5.0 - this might be the issue
Can we close this issue? Working with Crosswalk seems to do the trick.
When I install the plugin without even using any of the code I get terrible performance from my application. I checked the GPU rendering and the draw time is an order of magnitude larger. Here is the output with plugin.google.maps installed.
And here it is without the plugin installed.
The map seems to work fine when I implement it but the rest of the app is almost useless. Any ideas as to what might be causing this? FYI - This was tested on Android 4.4.4 Sony Xperia Z3.
Thanks & regards,
Zane