Caching web app launched from home screen on iOS - ios

So I've built this web app game with HTML 5 and javascript (mainly jQuery). It's meant to be used on an iPad in a location where there's no wireless internet (a museum).
I am using a cache.manifest file to cache all the files needed for the game to work. And on my desktop using both Chrome and Safari this works great. I can see all the files listed in the application cache in the debugger and the app runs perfectly without internet connection.
Testing it on the iPad's browser also gave good results. It seems to take a bit longer for the iPad to cache all the files but if you give it enough time the app works in safari on iOS in airplane mode as well.
Now here's the problem. When I install the app to the home screen and launch it from there the app doesn't work. Only the first page will run and when I try to go to the next one it'll fail and tell me I need internet. (The second HTML page is loaded after the map appears and you've chosen hall 1)
I've read that it might need to cache all over again if launched from the home screen so I've tried waiting for it to cache and then going to the next page. I've waited for 2-3 minutes yet it still didn't work.
You can find the app here. It's in Dutch so it might be a little confusing.
The manifest file is here.
Any help would be greatly, greatly appreciated! Thanks.

So I figured it out myself.
Turns out it was a real rookie mistake. I had some bad references to the cache.manifest file in some of the pages of the app. And on an iOS device that seems to cause some problems.
Pretty confusing since it worked fine in a regular browser. But lesson learned: iOS is very picky when it comes to little details and you need to have a reference to the manifest-file on every page.

Related

Cordova app running fine on safari, but crashing when installed as app

I've built a tool for a client, which basically is a tool that displays a number of items and filters them base on the set parameters. This tool started as a web-based project and it runs on all browsers and it should run when opening the html-file from the filebrowser(so when no server is involved).
We tested this on tablets/phones as we knew that it would needed to be ported. So this code is running fine on our ipad3(first gen retina) when we open it up on safari. Now we've been setting this up with cordova. But the moment this loads, we get memory warning, saying that the memory should be cleared etc... the app is running sluggish and some new bugs are showing, probably due to the memory issue's...
I've been looking into profiling/timelineing to find memory-leaks etc, but i can't really find any notable memory-leaks.
Another quirky thing: If we build this app in portrait mode only, the issue's dissapear. But the code that is being executed is exactly the same, we don't do anything differently when in portrait mode besides other styling.
Could be CSS/Mediaqueries/images(png's) be causing these issue's?
If anyone could point me in a direction, that would be great.
If you guys need code/examples/... shout and I will provide.
thx
I found the issue last week. Apparently this was cause by my css. The results were shown as small items in a list of approx 60 items. And they had an on-hover/touch event that would flip the item. But the css that was adding the perspective/backfacing etc was causing memory issue's. I removed them, and everything was working perfectly.
I do still however wonder why this is causing issue's in Cordova, but not in native safari, I would presume that the same app with same code on the same browser would give the same performance .... But apparently there are some differences between a webview and the native safari app?
Unless you installed a WkWebview plugin, Cordova will run your app in a UiWebview which has a lot of performance and memory issues that are not present in WkWebview.
Native safari uses WkWebview under the hood, which explains the performance and stability differences between your Cordova app and Safari.

Slow webapp load time in Safari iOS 9.1

Our webapp takes approximately 30 seconds to load for the first time in Safari on iOS 9.1. Most of the visual loading happens in a timely manner, but HTTP requests cannot be handled for about 30 seconds. I have only been able to reproduce this on an iPad by going to the following link: http://tco.ekotrope.com/tco/?deployment=eko-dev&#community/default. And I can only reproduce it once, due to caching. It can be reproduced another time by going to the following link, http://tco.ekotrope.com/tco/?deployment=eko-dev&#community/sunwood-bridgewater.
I have tried investigating looking at the Developer Tools Network Tab while the iPad is plugged into a Macbook, but for some odd reason, the page loads quickly when it's plugged in and I'm looking at the Network Tab.
Any ideas what could be going on or what I could do for further investigation? Thanks!
We were able to resolve the problem on our webapp.
In a nutshell, the problem is with how iOS 9.1 Safari chooses to schedule HTTP connections. For reasons probably related to increasing performance in certain cases has caused certain edge-cases to become problematic. In our case we had several images trying to load at the same time as we needed an XHR to occur. In other browsers like desktop Chrome this was not an issue, but iOS 9.1 Safari chokes when it tries to do all of that at once. Our solution was to have the images that trigger the problem load one after the other rather than all at the same time. This spread things out enough that things operated smoothly.

Web App worked last week, works fine on Ipad and Android, but now clogs on Iphone? NOTHING changed but SSL layer for push

I just launched an IPHONE app...approved to apple store.
(marion IL official app) if you want to try
and it works fine on my ipad. Client says their iphone takes forever to load, and doesn't run right.
last week's version worked fine. Funny thing is I changed NO CODE (it's a web app with push notification) all I did is re-compress the IPA with the SSL Layer certificate for push.
Any thoughts?
I faced a similar issue before. Two possibilities come to my mind:
There is some memory pile up (you are storing something in an array/object), which is not being cleared time and again. For e.g. if you are getting something via GPS, but not clearing it over time. You'd only notice over time, as it takes a while to build up the data.
-The hosting company (GoDaddy in my case), enabled mobile websites, which were redirecting all calls from mobile device to a mobile site. This may not be in you case as you said it's working well on your ipad.

Ios phonegap app got stuck

I have created a phonegap ios application. After installing it is working fine. But after rebooting the mobile it got stuck on splash screen. I can't describe my question clearly.
Actually my app is working fine on first time but when i am opening it for second time after closing it, it got stuck in splash screen. Please let me khow what other thing you need to know about this question. Thanks
I had the same issue (stuck on splash screen on 2nd app launch) but it only occurred when the device was plugged into the computer / xcode.
Unplugged it & app opened up second time ok.
There's not really enough information here to answer the problem because there are many things that could create this problem.
Your basic problem is that the root of your application is not resolving.
I would look into the JS on your initial page. Are you saving any information to local storage? Something is different between the first load and the second. What data are you saving on the first load that may persist to the second?

Webapp caching iOS

I am working on a web application that allows offline usage by caching everything in the manifest file. I am running into a few problems I hope you can help me with.
The problem is that the webapp is very buggy when I add it to homescreen. The problems are:
Sometimes it wont show anything and it tells me to turn on wifi (I test in airplane mode). This seems to be happening randomly. Usually it works if I close the app, connect to the internet, restart the app, and then go to airplane mode.
Sometimes not the entire code is loaded and its all messed up. Rebooting the app always works in this case.
Sometimes there is missing content. First I thought it was simply not done caching everything before I went to airplane mode. But I already experienced a situation where it worked at first, but closing and restarting the app would make the content unavailable.
Its a real pain to debug since it only occurs when adding the webapp to homescreen and you can't really debug in webapp mode (as far as I know, tips welcome!). I have tested offline mode in firefox, chrome and on safari mobile (without adding it to homescreen) and there are no problems there.
By the way, I am testing all this on an iPad 1 with iOS 5 and the webapp is using jquery mobile. iOS 4 has been tested aswell and gave me the same problems, tho it seems to be a little bit better on iOS 5. The webapp always works as it should when connected to the internet so the problem is with the caching.
Any ideas anyone? Or maybe tips on how to debug in webapp mode?
For debugging Web App try this one! iWebInspector You can load Web App into this debugger. And it's free.
Solved the problem. The cache file wasn't formatted properly. I don't know how I could have missed it. Everything is working perfectly now.

Resources