search

practicalmeteor / meteor-wkwebview

A meteor package for using the significantly better and faster WKWebView in mobile apps on iOS 8+.
https://atmospherejs.com/practicalmeteor/wkwebview
MIT License
35 stars 4 forks source link

StatusBar plugin #1

Open Tarang opened 9 years ago

Tarang commented 9 years ago

The statusbar plugin has a few issues.

It seems to work on the original telerik plugin: https://github.com/Telerik-Verified-Plugins/WKWebView/issues/20

I set App.setPreference('StatusBarOverlaysWebView', 'true'); and it does seem to work from the looks of it (in terms of how much the webview have been shifted down- it hasn't been shifted down)

Yet there is a white bar at the top overlaying everything. I'm not sure where it comes from

rbabayoff commented 9 years ago

I didn't change anything related to that. Please try the latest version of Telerik, which my fork is based on, and if still getting the same issue, file an issue with them.

Tarang commented 9 years ago

Hi Ronen,

I'm using this package: cordova:com.meteor.cordova-update@https://github.com/practicalmeteor/com.meteor.cordova-update/tarball/a7e98f27a26b727288da81dcfd8047eccb5f6036. From your blog post. I think thats the latest commit (also the latest on the repository).

And the latest update off this repository's package too (which uses https://github.com/practicalmeteor/WKWebView' (Latest commit: https://github.com/practicalmeteor/WKWebView/commit/4a1d577dc790cd8e2156c389a73506d22deff98c)

Tarang commented 9 years ago

Actually I tried to reproduce this & it looks ok on a blank project. So i'll have to investigate a bit deeper why its doing this.

Tarang commented 9 years ago

OK, I think I've found a way to make the issue reproducible. It's a bit odd to be honest.

meteor create test
cd test
meteor add cordova:com.meteor.cordova-update@https://github.com/practicalmeteor/com.meteor.cordova-update/tarball/a7e98f27a26b727288da81dcfd8047eccb5f6036
meteor add practicalmeteor:wkwebview

Edit the test.js file and add this between <head>:

<style type="text/css">
body {
  background: blue;
}
</style>

Then run it (This works).

meteor run ios

screen shot 2015-06-01 at 09 17 23

This doesn't work

meteor run ios-device --mobile-server="http://<computer_ip>:3000"

Xcode will open, upon which you can run the app using the simulator.

screen shot 2015-06-01 at 09 30 57

These hint it may be a meteor-related issue not a telerik issue

rbabayoff commented 9 years ago

Hey, this seems to have nothing to do with my package. It seems that meteor or cordova generates or overwrites the cordova config.xml differently between run ios and run ios-device. I recommend just creating your own config.xml (copy it after doing a meteor build) and save it in cordova-build-override. It may also be that the emulator run ios uses is different than the one you run with run ios-device.

woniesong92 commented 9 years ago

@rbabayoff I don't think that's what's happening because the config.xml file seems to be identical. Do you have any other idea?

@rbabayoff @Tarang EDIT: here's how to fix the statusbar problem. Yay!

.meteor/local/cordova-build/plugins/org.apache.cordova.statusbar/www/statusbar.js

Has functions that you can use about the status bar. For example, I was able to set the background of my statusbar using StatusBar.backgroundColorByHexString("#ffffff");

rbabayoff commented 9 years ago

Sorry, I don't. I'm waiting myself for cordova 5 support in meteor's next release so I can merge telerik's upstream that includes quite a few bug fixes, but their latest commits broke compatibility with cordova 4.2 which is what meteor uses in current version.

woniesong92 commented 9 years ago

According to the last answer to https://github.com/meteor/meteor/issues/4918 the cordova version will be upgraded to 5.2 really soon. Does thet mean all the problems might be resolved?

rbabayoff commented 9 years ago

I due hope :-)

lorensr commented 9 years ago

I'm getting the light gray bar that @Tarang pictured, both with meteor run ios and ios-device. I am not using org.apache.cordova.statusbar, and I don't have anything in mobile-config.js related to the status bar.

StatusBar.backgroundColorByHexString works, but it would be better if this didn't have to be used.

@rbabayoff Thanks a whole lot for this package, btw. While it didn't help much with Blaze's renderer scripting speed, it brought my memory down from 140MB base, 240MB peak (which causes iOS to kill it [1]) to 5MB base, 9MB peak.

[1] http://stackoverflow.com/questions/30813443/how-can-you-control-memory-usage-in-cordova

lorensr commented 9 years ago

Actually, I'm getting memory warnings (precursor to getting killed by OS) at 5MB, so I think WKWebView memory must not be included in this chart:

image

Some other observations:

woniesong92 commented 9 years ago

@lorensr Do you not have any keyboard issues when you use Wkwebkitview? I gave up using it for now because I couldn't get it working. What did you change to make it work? Did you comment out everything inside ionKeyboard.js ?

lorensr commented 9 years ago

Just found an issue, actually. What problems did you have?

So what I had was these two functions:

window.addEventListener 'native.keyboardshow', (e) ->
  # change height/scroll based on e.keyboardHeight
window.addEventListener 'native.keyboardhide', (e) ->
    $('body').height '100%'
    $('main').height ''

When I switched to WKWebView, I no longer needed the height changing. However, when I focused a select input, and the scroll wheel virtual "keyboard" comes up, the body's scrollTop() and scrollLeft() are changed from 0 to like 20. While I do have content translated to the right off-screen, I've never seen my body scroll horizontally before. I can set them back to 0 in keyboardshow, but not before you see the screen momentarily move up and left.

woniesong92 commented 9 years ago

For me, it's mostly vertical position problems. Calling window.scrollTo() doesn't help much because users will see the scrolling animation for a few hundreds of milliseconds. For both keyboardshow and keyboardhide events, do you set height to 100%?

pmwisdom commented 9 years ago

@lorensr To see your total mem consumption go to xcode -> Open Developer Tool -> Instruments. Click start recording, and then you'll be able to see the apple webkits memory consumption next to yours. I usually sit at around 90 megs, and it will slowly climb. So, slight improvements for me.

lorensr commented 9 years ago

Thanks, will do that when I switch back!