I'm working on a webapp built with Cordova for both iOS and Android. Everything was fine until I launched tests on the new Apple's iPhoneX. As you may know, Apple decided to remove the physical home button by replacing it by a home indicator at the bottom of the screen:
This home indicator is always visible on your screen and it goes over your webapp content. When user want to navigate between apps or to go back to the home screen, he has to swip up this home indicator (which is very sensitive). This wonderful invention brought to my webapp 2 main problems:
This break my webapp design because it goes over the content.
The system gesture enter in conflict with my webapp gesture. My entire gameplay is based on drag & drop and all draggable icon are at the bottom of the screen, under the home indicator.
1. How to hide the home indicator?
To solve the first point I found a plugin called cordova-plugin-hide-home-indicator. This will hide (with fadeIn/Out effect) the home indicator after a few second of inactivity. But every times a touchscreen event is detected, the home button is visible again... I have red here that even if the Objective C (Xcode) function prefersHomeIndicatorAutoHidden() (which I guess is used by this Cordova plugin) return true it doesn't mean that the home indicator will be hidden for ever. Well... if somebody has a better solution I would appreciate your help!
2. How to lock system gesture?
I found a Xcode function called preferredScreenEdgesDeferringSystemGestures() They explain that normally the system will always take precedence on an app gesture, but in some cases (for immersive games for exemple) you can ask for your app to take precedence on the system. This sounds great! But unfortunately I don't know anything of Objective C :) I didn't find any plugin about that point.
In this video from Apple at 10:33, they talk about edge protection, which should do the trick by giving the app gesture the precedence, but again, I didn't find any plugin for Cordova...
Any ideas? Thanks!
Don't hide the home indicator. The solution by Apple is to use the new CSS constants as padding for the safe areas of the device. Read this to get starting point: iPhone X support
You can use this plugin in order to avoid edge gestures at iOS
https://github.com/distinctdan/cordova-plugin-screen-edges
It's very easy to use, i used in a cordova project and it works as expected
Related
I am making an application that works essentially like a simple Drag-and-Drop Playground with the command blocks on the left and a droppable area on the right. I want to make it fully compatible with VoiceOver and I'm running into trouble with some of the accessibility aspects since this is my first Swift application.
This is what the playground currently looks like: (App Screenshot)
My goal is to provide the users with audio cues/feedback while they are dragging the elements to help them figure out what part of the screen they are currently at. The ideal functionality would be exactly like what one uses when editing an iOS device's Home screen (the arrangement layout of the apps).
When trying to rearrange apps on the home screen with VoiceOver enabled, you hear a row/column alert when you are dragging an app over an open area. I want a similar type of feedback that says "Droppable Area" when you are over the correct area (see scenario 1).
When trying to rearrange apps on the home screen with VoiceOver enabled, you hear a sound when you tap on an area that has no app icon. (This also happens when you are not editing the layout and simply tap on an open area with no app.) I want that noise to be what you hear when you drag a command over an area that is not droppable (see scenario 2).
Any ideas on how this might be possible or good references to look at?
I am dealing with a weird bug on Ionic's iOS native build where I sometimes cannot swipe back or switch tabs once I transition to a new page using router.navigateByURL(...), and trying to debug this issue has been troublesome since I can't "see" how the gestures are handled. Does anyone know where I should be looking in the code for handling transition gestures?
Here's a video demo of the problem: https://streamable.com/hk9c0
In the video, you can see me:
Swiping down to refresh using the ion-refresher element and you can see the page beneath (already entered a bug report for that part: https://github.com/ionic-team/ionic/issues/18284 )
Trying to tap the back arrow in the left corner
Attempting to swipe left to right to go back a page (hard to show that one)
Tapping the bottom tabs to transition to new tab, at one point, I tap on a tab that has an ion-fab element which appears in the bottom right because its z-index is higher than the "stuck" page.
Currently the best I've been able to do is by looking at the css classes that are added to the pages, but it's not much use....
Where app-release is the page you can see in the video and app-home is the page underneath the stack. It's my understanding that Ionic uses hammer.jsfor gestures, so I added it as a tag, please correct me if I am wrong. I cannot, for the life of me, recreate this bug consistently, but will often trigger 1 out of 50 tries.
I've been digging through the utils in Ionic Core to see where elements are being added and removed, with no luck.
I created a bug request for this here as well: https://github.com/ionic-team/ionic/issues/18305
Are you using #angular/animations to make the transitions between the pages? I had some issues like yours, as you can see in my question.
Router navigate on Ionic with animation blinking on ios using angular animations
If I am right about the use of #angualar/animations I suggest to use a custom animation of the Ionic itself, and not te angular's. You can see an working example here of its use here:
https://github.com/mhartington/ionic4-custom-animation
Since I have less tem 50 rep I cant comment so I had to post this anwser not knowing if it was really your case. Hope it helps.
I found a app WPS, which can share file with Split View betweed WPS and QQ. Video
https://github.com/bottotl/photos/blob/master/wps_qq.jpg?raw=true
It is amazing. How can I do the same thing?
It is done by 'Multi-Tasking' feature provided by iOS itself.
If you want to do the same, just like this, You may look at this tutorials.
iOS 9: An Introduction to Multitasking on iPad & iOS 9 Multitasking Tutorial
That's really cool. Just a high-level thought about how this might be approached:
1) When the drag starts in the WPS app, copy the image and its position to the general UIPasteboard. For the position, examine the window bounds to determine if the WPS app is running in split screen and if so, in which split (left, right, portrait, landscape, etc). Based on this, save the position of the dragged image relative to the entire iPad screen.
2) Also when the drag starts, call a custom URL scheme defined by the QQ app that will open the QQ app and tell it to monitor the general pasteboard. Since the QQ app is already open in the other split, nothing visible happens to the user, but the QQ app still gets notified of the call to its custom URL scheme, recreates the image from the pasteboard data and calculates the position it should be in relative to its own split area based on the absolute positioning saved to the pasteboard.
3) Now, as the dragging continues, whichever app is receiving the touch will update the pasteboard with the location of the touch relative to the whole iPad screen. Whichever app is not receiving the touch will read from the pasteboard every frame and update its copy of the image with the latest position.
4) Whichever app the drag ends in will call back to the other app using a custom URL scheme to notify that the drag operation ended and to stop monitoring the pasteboard.
This s just a theoretical approach that I haven't tried to implement, but I don't see any reason why it couldn't work.
The current version of my app, running on Android 4.0.4 on an ancient Galaxy Tab has an odd issue when it's running in landscape orientation. I have the CPU usage developer option turned on, and I can see that a single core is being fully utilised when the app is sitting idle, even at it's login screen.
I'm using jQM 1.4.4, WL 6.2.0.01-20141027-1531.
When it's clear that CPU usage idling high for my app, I change to portrait and the CPU usage completely goes away, and the app is responsive again.
Step (CPU usage after a few seconds)
Login Screen (high)
Tap in text field, keyboard appears (none)
Hide keyboard (none)
Switch to portrait (none)
Switch to landscape (high)
On top of that, when I switch from Portrait to Landscape, the view doesn't redraw under the new aspect. The view is constrained to an area (square-ish) as wide as the screen is tall (or wide in portrait). The fixed header disappears but the view is interactive. To fix this, you can tap into a text field which brings up a keyboard. The view updates to fill the screen, and CPU usage is down again.
Other thing to note is that this issue did not exist in the previous version of the app. I've reviewed all changes between the versions and nothing stands out to me that should cause an issue like this.
Suspects:
the page or pagecontainer, popup or fixed header is doing a lot of work that usually should only occur on window resize (no direct changes to the logic here);
the CSS, in particular some responsive queries (there's a breakpoint between landscape and portrait) (no responsive CSS changes)
Other info:
Not a single problem was reported with Samsung Tab 3 running 4.2.2 or a Nexus 7 on 4.4.4 with this version
Tried using weinre to profile this issue except it loses connection soon after opening the app (again, previous version it was fine)
Minor differences between two identical target devices (Samsung Galaxy Tab 10.1): one tablet always performs fares better
I'm about to roll back to the older codebase and iteratively add code back in to see where the issue comes in.
Thanks for reading. Any pointers or suggestions are obviously greatly appreciated.
Update 1
I profiled from within Eclipse (turns out the Timeline inspector tab is pretty useless in weinre).
https://www.dropbox.com/s/ke0a9c2z9krhucu/highThreadUsage.PNG
Doesn't mean much to me. I suspect all that profile really says is 'the webview is doing all the work'.
I've created a new Hybrid app in the same project, and copied everything into it. I'm going to start stripping out chunks of code/functionality to see resolves the issues first.
This is a preliminary answer. I'm still doing the legwork and trying to see what exactly is happening in this situation.
The culprit appears to be a specific panel. A panel I haven't even touched in weeks. The only thing that I can even think of is that I changed the padding-top on .ui-tabs-panel from 1em to 0.5em...
There are two panels that are immediately init'd on app load. The one that slides from the right is the culprit: if I remove the init call and the HTML for it, the app is fine. Putting it all back, and prematurely opening the panel via weinre resolves the issue. Next step, is changing that padding-top back to 1em.
Problem doesn't show up. I repeat this several times over: make a build with 0.5em padding, and another with 1em. Repeat. The 0.5em build always has the issue, the other does not.
I'm going to chalk this up to the most coincidental (read: unlucky) bug, ever.
I'm planning on hardcoding the panel contents to display:none and showing them when the panel is opened. See if that works.
I have been developing hybrid apps on iOS and the most glaring problem I am having is the back button that emulates the native back button on the top navbar has a much smaller area.
This may be due to the button being on the edge of the top edge of the screen and the webview doesn't interpret taps on the edge to be intended for the webview, maybe the status bar.
I have even enlarged the padding on the button element to the point where it takes up the whole top left corner of the screen and wont register a tap unless you aiming for 3.5mm beneath the top of the webview. On a native app you can aim 0mm away from the edge and it registers.
This may not seem that bad, however when you allow a long term iOS user that 3.5mm is very apparent, and their mental model of where a touch should register makes them immediately think the app is broken, instead of them tapping the wrong area.
I am interested in any other information regarding ways to minimize this discrepancy between native and hybrid, or proposed solutions/information leading to a better understanding on why this occurs.
Using Cordova / PhoneGap and Kendo Mobile to implement the app