I have a simple web page with a javascript touch enabled slider that I would like my client to be able to run on their iPad without an internet connection.
Saving it to reading list kind of breaks the javascript.
If it's open with a connection and then exited, then reopened without a connection safari says it can't be opened but pushing the back button loads the cached version properly.
Is there a way to open cached files or save html files locally better?
You're asking for two features that have been introduced with HTML5:
Offline web applications to make your page accessible even without an Internet connection
Local storage to save your page's data on the client
Related
I am making a chrome app. It is for a kiosk type application. At times the computer will be offline when it starts up. So I'm looking to make an application that a user can navigate to a website and then the entire website is cached. Then when they turn on the Chromebox/Chromebook the website will come up as it was. Including JS/CSS/dynamically loaded content.
Overall I'm looking to save the state of the entire webview and have it keep going after the machine reboots. I looked into saving the JS/CSS/HTML but then the dynamically loaded content (ajax calls) is not available. Is there a higher level function for saving the ENTIRE state of the webview in a google chrome app?
Zebradog's Kiosk Chrome App recently added "Serve local content" support. It works by using Web Server for Chrome in the background. It loads the content in a webview. You may not want a whole kiosk app, but this could at least be a starting point for you to use as reference.
One way of actually getting all the files, if you don't have them already, would be to use wget -r -k
My problem
I'm working on a project where Cordova is being used to display a remote website within the app. Cordova.js is being run from the remote server, etc., and this works pretty well.
I do have one issue though, especially on iOS devices.
If the device lose connection at the same time as I press a link on the website, the page will turn blank, as if to load the next page - but since the connection is lost nothing will be loaded into this blank page. Given iOS devices lack of back-buttons or such there's no way to navigate from this blank page except by closing the app and re-opening it.
My attempted, and failed, sollution
So, given that I can use Cordova.js to check for connection issues, I figured that I could use an iframe to display the remote website. If the connection goes bye-bye I'd just display a simple error message inside the iframe.
And well, this does work.
BUT. And this is a big but. InAppBrowser will not run from an iframe. And I can't live without the InAppBrowser, since it's used to display quite a few important features within the app.
So
Does anyone know a way to either:
a) Handle connection issues when running only remote content in the Cordova app?
b) Run the InAppBrowser from within an iframe? (I suppose I could use PostMessage etc. between the frames, but since I'm already sending/receiving data from the InAppBrowser I would love to avoid this in order to limit complexity).
c) Solve this issue in another fancy manner?
I've developed a website that uses some PHP to write the client's user responses to a data file on my server. I've realized that the iPad cannot run PHP sites, and I'm at a complete loss as to what a good alternative would be. Javascript and HTML can't be used to write to a server, right? Help?
Thanks in advance.
Edit: I fixed it. The problem was that the iPad has problems with recognizing .click. I had to change it to .bind("click tap touch", function.... instead. It's weird how it was still able to recognize the click events that did not initiate a form submission (that is, when I was still using .click, the button worked, except for when it had to submit a form).
You'll need to put the PHP scripts up on a web host (e.g. GoDaddy.com or BlueHost.com) and then navigate to the website from a web browser on your iPad. The PHP will run on the server and so it will work whether you access it on a PC or an iPad.
While your developing, you could also access the server running on your computer from your iPad by navigating to http://<ip-address-of-your-computer>/myscript.php from mobile Safari or Chrome.
[EDIT] - Please note that the second option will only work while your computer and iPad are both on the same network.
I am currently developing a mvc4 application that needs to work on mobile browsers.
One of the requirements I have for it is that if the device cant connect to the internet, the site should still "work", and any changes get sync'd to the server once an internet connection is reestablished.
The site is an ecommerce site so I would be looking at such functionality as adding items to a shopping cart etc.
I had looked at html5 local storage to manage the changes when the app is offline but not sure if that storage will exist across multiple pages of just a single page. Can anyone confirm? I plan in storing the page on the clients device by using a cache manifest file.
I would like some pointers as to how I can achieve a site to work offline and once a conneection is establish, changes syncd to the server?
I would use javascript events to detect online/offline state (search in safari docs) - with jquery (not jquery mobile), i would use the "single page application" model (link below), i would store website and user data data in local storage, and use a timer to try to push/get changes.
Single page application with MVC4:
http://www.asp.net/single-page-application
I'm developing a small HTML5 web application for iPad that is intended to work in fullscreen mode (ie. it has the proprietary Apple meta tag, it is added to Home Screen):
<meta name="apple-mobile-web-app-capable" content="yes" />
The application basically fetches some data via AJAX and presents it to the user. The AJAX data are external (from a different domain, different server). I have the system setup for cross-origin requests, they work in online mode. In other words: the static data lie on server A, the dynamic data - on server B.
I created a proper cache manifest file, listing all static content of the site (HTML, CSS, images, JS) and then having the NETWORK: * section at the end - this way all the dynamic content (AJAX) is always retrieved from the network. The application fails "gracefully" if the requests fail, by displaying some fake content.
With the above setup, the following happens:
If I run the application while online, everything works ;)
If I disable the WiFi on iPad (pure offline mode), everything works as expected - the application falls back to the offline content
If I connect to the network again, but take the static-content server offline (the one that has everything cached), the application won't start; after spending a while in splash-screen, it shows me the a popup with <app> could not be opened because it could not connect to the server.; I can either choose Close or Retry.
The point 3 of the above is the one that drives me crazy because it was the only reason I started fiddling with application cache. Why doesn't the iPad web app fall back to cached content if the manifest file is not reachable? (not 404, the server is offline)
Is the answer to HTML5 iphone offline webapp completely incorrect? If not, how can I achieve this behavior on iPad?
Point 2 and 3 are completely different scenarios, so we cannot expect the same behavior.
In point 3, the device cannot fall back to the cached content when in online mode because if it do so, there will be no way to know for the user whether he is connected to the server or not.
I mean, in offline mode, the user knows it, and knows that he is with cached data. But in online mode, he expects to get the stuff from the server. If the server is not available, the user should be aware of this. If the server is not available and he is sent directly to cached data, the server error will be hidden to him, thinking that he is connected when he is actually not.
For example, web browsers can cache pages to be seen in offline mode. But if we are in online mode and try to open an unavailable page, we expect to see the error message, not a cached version of the page without any warning. We can go to offline mode to see the cached page if we want, but the correct behavior is to show the error to the user.