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.
Related
I am trying to build an offline-data persistent web application with Service Workers. I managed to have it working on my laptop Chrome (51) and it loads the cached files and displays an offline message when I simulate being offline via the Chrome DevTools - Network tab.
I uploaded the application to github to make sure it is available with https (https://mguardos.github.io/index.html)
However, when I try to test it with my Android Chrome (Nexus 5 - Android 6.0.1 - Chrome 51), the application loads fine when online, but if I set the plane mode on and reload the page, the browsers is not checking the service worker but displaying the offline message directly
"You are offline.
Your devide is offline.
Try: ...
ERR_INTERNET_DISCONNECTED"
Is there any option that I have to enabled in my Android Chrome for Service workers to work?
Thanks for any tip
PS (edited): Same issue occurs with Opera 37 on Android 6.0.1. However, the Registration service happens properly for both Chrome and Opera in the background (validated via an alert upon the registration method is successfully completed)
PSS: The link above tries to be a very basic example of combining service workers with AppCache, to retrieve localStorage and IndexedDB data so any constructive critic would be very much appreciated on top of the original question
The problem in Chrome seems to be that it requires the entry '/' to be added to the files to be cached for the Service Worker. I added that entry and I could see the application working fine while offline with my Android
However, the problem with Opera remains the same, I can even replicate it with the https://airhorner.com app
Just Open Opera (make sure you clean the cache before)
go to https://airhorner.com (the application loads fine - although it does not sound)
Activate airplane mode
Reload the page (the application still loads because it is reading from local cache)
Close the browser or simply go to a different address
Then go back to https://airhorner.com (The Offline message I added to the original question appears)
I will continue my investigation and will potential create a new question just for the Opera browser, as this question has been answered for Chrome
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
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
I've got (actually my employer has) a mobile website that enables Safari integration (for iPhones and iPads) - meaning that customers can bookmark it to their home screen and then it would behave as a standalone web app (no address bar, custom icon, start-up image etc).
It works all right except that one week ago (coincidentally soon after apple has released iOS 6.1.2) some of our customers (6 of them initially) complained that they no longer get the normal content but a '404 page' of a public wifi provider (The Cloud owned by Sky here in the UK). After a bit of investigation we've figured that at some point those customers connected to the Cloud wifi without actually logging in (it's one of those providers that would redirect you to a login page to enter your credentials, after which you can carry on browsing). The thing is that even after switching back to their private wifi or mobile data connection the application would display the Cloud's page.
This only happens (as far as I can tell) when the application is launched via the bookmark (I couldn't see this behavior when using it from safari).
What happens is that the customers would connect to the cloud wifi (without logging in), they would open the application at which point the router will issue a redirect response to their login page; the application would cache the login page and it will always display it whenever using the bookmark again. (I've performed a capture when this happens and there are no requests being made at start-up whatsoever).
Even weirder, in this situation, if removing the existing bookmark and adding a new one will show you the same cached page (with the whole operation being performed away from the Cloud). We've fixed this by adding a unique identifier to the URL each time we hit the bookmark screen (this indicates that the web apps' sandboxes are linked to the url, which is to be expected).
What we're trying to achieve is to have the application properly recovering after the customer has moved away from the Cloud. But there doesn't seem to be a straight forward way to do this.
Furthermore there's a level of inconsistency in all of this - most of the times when the flow is performed I will see a 404 page (a custom 404 page https://service.thecloud.net/service-platform), but sometimes I would be properly redirected to the login page, in which case the application would not break.
My assumption is that there is a weird race condition in the standalone web app application model causing the browser not to properly handle redirects (and actually caching 404 pages). I've raised a support incident with Apple (which eventually turned into a bug report) but it might take a while and I'm trying my best to figure out a workaround.
Any ideas, maybe someone has seen this before?
The issue is aggravated by the fact that I need to have a 5 minutes walk ever time I'm testing any fixes; I've tried creating simple test forms, but I wasn't able to reproduce the issue, where as with the full app I can do it pretty much every time.
Here's a summary of the steps to reproduce:
Via private wifi (or mobile data connection) add a bookmark to a website (I've managed to reproduce it with quite a couple of apps that support safari integration as described above)
Open the application to review the normal content
Connect to a Cloud hotspot and open the application from the bookmark (open-close it for a couple of times if you don't get the 404 right away)
Connect to the private wifi (or mobile data connection) and open the application via the bookmark -> you'll see the same 404 page again
In the end the fix was to add a unique query string parameter with the initial page request (pretty easy with the setup we already had, via the launcher page). I've filed a bug report with Apple which they've acknowledged by linking it to a previous item. Here's a post on the topic:
http://blog.onos.ro/ios-6.1.2-caching-issue
I have a simple web app that I want to use locally (i.e. I don't want it to ever access the network). All the code is packaged according to the Safari Web Content Guide. I was successful in downloading my web app to my iPhone. I noticed, though, that even though my web app doesn't connect to anything remotely, there will be a network access (the network access indicator fires).
I suspect that iOS is checking to see if the web app is fresh (i.e. checking the cache manifest to see if it needs to update any files). Is there a way to prevent this? It really screws up the user experience.
The never-ending network spinner is a bug in iOS; you won't be able to get around it with a web app:
http://www.devthought.com/2012/09/22/understanding-the-ios6-ajax-bugs/