Ng-walkthrough with crosswalk-lite popups js source not walkthrough


#1

Hello everyone!
Ive added Walkthrough addon https://github.com/souly1/ng-walkthrough to my app, currently im using Crosswalk lite.
Ive added some screenshots how its have to be and output of chrome://inspect of my app there.
But unfortunately im getting some problems in APP instead of showing my overlay its outputs some js code here.
Any suggestions?



#2

Please help to solve the problem…


#3

What version of crosswalk lite are you using?
Lite version should not support Web Inspector nor remote debugging.


#4

Are you sure ?
Ive added it via ionic browser add crosswalk-lite

Version 14+

in config

 <preference name="xwalkVersion" value="14+" />
<preference name="xwalkCommandLine" value="--disable-pull-to-refresh-effect" />
<preference name="xwalkMode" value="embedded" />

#5

ionic browser add crosswalk-lite currently adds regular crosswalk


#6

Its not a problem, please read the first message.
For now i dont care which version of crosswalk im using, the problem is ng-walkthrough is not working


#7

It’s open source, you can always pull out a debugger or put some “console.log” statements in the ng-walkthrough source can’t you? Interesting plugin though, maybe I’ll try this out for my app instead of the rather lame intro slider that I have now.


#8

For now im trying to do it via $ionicModal, debuggging ng-walkthrough getting many time from me. Im going to deadline of project time.


#9

Understand, my project is also taking too much time. Maybe I’d like to use this ng-walkthough instead of the intro slider but probably I won’t have time for it. Would you like me to spend 15 to 30 minutes to see if I can get it working?


#10

Thank you for answer.
You can start as a new app example.
Here is my step by step commands list.

ionic start tabs WalkThrough

ionic platform add android

ionic browser add crosswalk-lite

bower install ng-walkthrough

now we have to add additional js and css to our app index.html

<link rel="stylesheet" href="wherever-you-put-it/ng-walkthrough.css">
<script type="text/javascript" src="wherever-you-put-it/ng-walkthrough.js"></script>

Add dependencies on the ng-walkthrough AngularJS module:

angular.module('myApp', ['ng-walkthrough']);

now at our template we can add

<walkthrough is-active="isActive" walkthrough-type="transparency"><img src="img/ionic.png" style="height: 100vh; width: 100%;"></walkthrough>

And here we go.
On ionic serve we can see the right output
But when we compile it on apk and install it to device we can see some js source.
Thats the error


#11

Ah and also we need an html template from lib/ng-walkthrough folder.
For more info and demo you can go to https://github.com/souly1/ng-walkthrough


#12

Thanks, I’ll have a quick look to see if I have any luck. Not using crosswalk right now (tried it a few times but removed it each time because I didn’t see any advantages). What kind of Android device are you testing on?


#13

Im testing on LG Optimus L5 Android version 4.0.3


#14

By the way, I’m testing with 2 Android devices (a Samsung Galaxy S3 smartphone from April 2014 and a Samsung Galaxy Tab 2, GT-P3100 from 2012) and one iOS device (iPhone 4S).

With the Samsung Galaxy S3 performance is just fine, without using Crosswalk. It’s from 2014 and you can really see it’s a “high end” device. I’ve tried Crosswalk but I don’t see any difference.

WIth the Galaxy Tab it’s a difference story, performance was really inadequate IMO. Page transitions are lagging and taking 2 or 3 seconds or more, sometimes you need to tap 2 times, etc. Bad user experience. Then I added Crosswalk and I could see a noticeable improvement. Still not super fast but more smooth and predictable, a much more enjoyable user experience.


#15

Yes on older devices which system browser isn’t Chrome its very bad performance, thats why i decided to use Crosswalk at any version of my app.
If it was available i were using Crosswalk even at IOS because Chrome is reeeeeeealy cool.


#16

Performance on the Galaxy Tab (from 2012) was really horrible without Crosswalk, totally unacceptable. Now with Crosswalk added it was still not fast but it looked much better, it was acceptable.

I came across a few other performance tips that I want to try out:

  1. disable JS-scrolling, enable native scrolling: Poor performance on android?
  2. a trick to use “native view transitions”: Native View Transition Animations

Also I’d like to try if I can publish 2 versions of my app in the Google Play store, one without Crosswalk for the newer devices that don’t need it and one for the older devices with Crosswalk:

Should be possible.

I have to say that on the Galaxy S3 performance is very satisfactory, but the performance that I saw on the Galaxy Tab really made me doubt if Ionic/hybrid is the right choice.

On the other hand we’re in a beta/prototype phase of the app so I’m confident it’s good enough for that. Based on feedback of a somewhat larger user group we could always decide (if it would be really necessary) to reimplement the thing using different technology.

But we’d rather not of course. :wink: