I am working on a web app that will be run off a local server on Windows 8 on Chrome. Unfortunately, Chrome doesn't seem to handle touch events very well. For example, often instead of clicking on a button, it will select it instead. Is there any way I can make it behave more like native touchscreen apps do?
I can't make it a metro app because I need to talk to a Python service.
I've done some testing in Chrome with a touch screen and don't seem to run into this issue (of course not doubting you are though!). If you have a site I'd be more than happy to check it out.
One option is to try scaling the content larger, I'm wondering if your touch surface is very sensitive to tiny movements upon touch and treating it as a touch/scroll ie select. Try a simple test in the browser to start by increasing the size before trying any css scaling transforms (which I'm not sure how in this how well that approach would even work)
What type of hardware is it being tested on?
Can you elaborate a bit more on the python service? What part of the service makes it so you can't interact with it? Is it just an http service object or something else?
Related
Chrome introduced splash-screens as a PWA feature to make it look and feel more like native apps. It generates the splash-screen from name, icon and bg_color in the web app manifest. More details here:
https://developers.google.com/web/updates/2015/10/splashscreen
https://developers.google.com/web/tools/lighthouse/audits/custom-splash-screen
While all of that is fine, there is no proper documentation on how long Chrome decides to keep the splash-screen visible.
Ideally I'd imagine that it should be till the point something is meaningful painted on the screen (just the above-the-fold stuff) but in my experience it seems like Chrome keeps this splash-screen for a quite long time (might as well be till page load?)
This is pretty bad for people browsing my website from slow connections - previously at least they could see something working and happening on the screen, now they just see a static image (splash-screen with icon and name) - they don't know how long it will take to open the web app, can easily get bored and drop-off. This is very risky.
Can I control when the splash-screen goes away or even disable it altogether?
You can register an event of DOMContentLoaded, which is the first event fired, even before your other stuff like images, css and all are still getting loaded. Using this, you can fade out / remove the splash screen even (may be) before when your first paint happens (depending on your site requirements/implementation). Check out an example here, where he tries to add an animation to the fading of the splash screen rather than a simple transition. You can definitely try removing the splash screen earlier on similar grounds.
P.S.: Couldn't find anything to disable/time out splash screen. Hence the work around!
It seems that your first page is taking too long to be ready (first paint), maybe you have:
A big HTML file
Loading stylesheets synchronously
Javascript take long time to settle
Check these things see if resolving each one could help.
You can see other PWA apps, like twitter how they are loading pretty much fast in webAPK and learn from them using chrome dev-tool on your desktop.
Is there a way to alert a user if he accesses my webpage on his mobile device ?
The reason for this is because this particular webpage is not coded in a way to be looked at on a mobile device (at least not yet)
So, if any would access the webpage on his mobile a pop-up will appear saying something like: "This webpage is currently not supported by mobile devices".
Would this be hard to do ?
Yes it is possible, you need mobile detection script, have a look at following project on github. I have used it myself for similar requirements. This solution is for PHP (you haven't mention which technologies you been using).
https://github.com/serbanghita/Mobile-Detect
You can easily do this with Javascript as well, just google for Javascript Device Detection and you'll find enough. Another possibility is using CSS Media Queries; create a pop up, set it to display: none, and in your query make it visible again.
These jquery.mobile-1.4.2.min.js and jquery-1.10.2.min.js are auto included in all of my HTML pages, while developing the UI screens using jquery mobile.
But this Auto-added JS files causes a delay/sluggishness while navigating between the multiple screens.
Is there any way to improve the sluggish behaviour?
I've used the Worklight 6.1 project you've emailed me, added the Android environment to it and ran it in the Android Emulator(!) (with API level 19 - Android 4.4) and did not observe any sluggishness.
In fact, your application does not even contain any animations. The pages simply switch from one to another. So, no slowness even in the emulator...
You'll need to create a test case application demonstrating what you are referring to because right now it is not reproducible. Also mention if you are testing it on a device or not - which device model and which Android version.
I have been working with cocos2d-iPhone, cocos2d-x, and cocos2d-html5 for quite some time. I wanted to ask if it is okay to build a website with cocos2d-html5. I want to do it because I want the website look interactive, animated, and scroll around like a game. We can do this with javascript, but is it possible to write it in cocos3d-html5? What are the drawbacks of doing this? And is there any existing website that is built on cocos2d?
Thank you for the help.
As i figured out, you cannot make a cocos2d-html based website as it is for making web apps for web sites. Although a web app can cover up the whole screen but there are a large number of issues assigned to creating such a situation. The internet users are used to using the refresh and back buttons on the web browser as well as opening in the new tab, nothing of these options would work in a cocos2d-html based web app as the navigation would be all done within the application and in no way can the button in the browser respond in the appropriate manner.
i would like to create some Flex Desktop Application that will be always in front of other applications (appWindow.alwaysInFront = true). It should looks like tiny bar at the top of the screen (eg. width = screenWidth, height = 50px). I know how to do that. But I have problem with other applications - when i maximize them, they are under my application. Is there any way how to say to the system, that maximized resolution for other apps is other than default?
Thanks for your answer.
You cannot do this with flash code, because you're interfering with external applications. At best, you could write some native code in another language and use AIR to execute that code but I can't really see that working out well, or at least being anything less than a massive undertaking.
If you do want to attempt this however, you can find some info about executing native code from AIR here: How can i on button press execute a command in the command prompt and get back the output in ActionScript?