To be clear, the web app IS caching and is working fine offline in Mobile Safari.
The problem is when it is added to the home screen on an iPhone 4s and iPad 2, both running iOS 6.0.1. It won't work offline and gives a network error to connect to the internet i.e. "Cannot open MYWEBAPP. MYWEBAPP could not be opened because it is not connected to the internet"
I've been debugging this for several hours and can't seem to find a solution. I'm not receiving any errors in the console and I'm running Jonathan Stark's debugging code
I've tested the app in desktop Safari, Chrome and Firefox's developer tools both Online/Offline. As well as Web Inspector with the devices in Safari. The result is the same on either iPhone or iPad. They will both cache the web app and will work in Mobile Safari, but not when added to the home screen. No errors either offline or online.
As far as I know, I'm using best practices:
Added HTML header: <html manifest="photo.appcache">
I've also experimented with using different names for the manifest file including: cache.manifest and offline.manifest as I read that it makes a difference, but in my testing it does not matter what the name is as long as the extensions are .manifest or .appcache and is served appropriately in the .htaccess file.
Added correct MIME types: AddType text/cache-manifest appcache manifest
I've also tried: AddType text/cache.manifest manifest,
AddType text/cache.manifest .manifest manifest, AddType text/cache-manifest .manifest
I don't believe this worked: AddType text/cache.manifest but I don't remember. For the most part it didn't matter and I stuck with:
AddType text/cache-manifest appcache manifest
as that what was in the HTML5 Mobile Boilerplate.
Added:
NETWORK:
*
to the appcache file. I believe this allows everything to be downloaded as well as making all links work.
I've tried removing this line: <meta name="apple-mobile-web-app-capable" content="yes">
because I read here on SO that is solved a problem similar to mine, but I can confirm that it does not work in my testing. Removing this line or setting the content to "no" when pressing on the home screen icon will redirect to Mobile Safari and not open fullscreen.
I've pretty much narrowed it down to it being a bug in iOS 6 (I'm actually using iOS 6.0.1), because I know that data has now been separated for web apps in the browser and those added to the home screen. I'm posting this issue here to see if any other developers have encountered the same issue.
I've solved this issue. I recommend the following for home screen web apps in iOS 6.
For testing purposes, use the Web Inspector and a nice JS script like Jonathan Stark's to know when the app has been cached in Mobile Safari:
http://jonathanstark.com/blog/debugging-html-5-offline-application-cache?filename=2009/09/27/debugging-html-5-offline-application-cache/
After it has been successfully cached, add the app to your home screen and leave it open in order for it to cache the home screen version separately. It has to fully cache in order for it to work offline.
Since my app cache is 22mb of data and the caching of the data is SEPARATE for the web app, the problem I had was not leaving the home screen app open long enough to cache.
This is terrible as far as user experience goes, but also good that the data is separate. I can confirm this because if you delete the website data from Safari, the home screen web app will still function.
As far as I know, there isn't a way to debug the data cached for the home screen web app, or where it is stored.
The answer above was very helpful. #aul said he didn't know of a way to debug the home screen web app but I found a way.
Hook your iPad or iPhone up to your computer, then in Safari go to Develop > and select your device. Your homescreen app must be open in order for it to appear in the drop down menu. Once you access the app, you can open up the error console and watch Jonathan Stark's script go to work. Once the manifest is downloaded, you will be able to use the app in offline mode.
This script made the life easier! Thanks to #Paul!
var cacheStatusValues = [];
cacheStatusValues[0] = 'uncached';
cacheStatusValues[1] = 'idle';
cacheStatusValues[2] = 'checking';
cacheStatusValues[3] = 'downloading';
cacheStatusValues[4] = 'updateready';
cacheStatusValues[5] = 'obsolete';
var cache = window.applicationCache;
cache.addEventListener('cached', logEvent, false);
cache.addEventListener('checking', logEvent, false);
cache.addEventListener('downloading', logEvent, false);
cache.addEventListener('error', logEvent, false);
cache.addEventListener('noupdate', logEvent, false);
cache.addEventListener('obsolete', logEvent, false);
cache.addEventListener('progress', logEvent, false);
cache.addEventListener('updateready', logEvent, false);
function logEvent(e) {
var online, status, type, message;
online = (navigator.onLine) ? 'yes' : 'no';
status = cacheStatusValues[cache.status];
type = e.type;
message = 'online: ' + online;
message+= ', event: ' + type;
message+= ', status: ' + status;
if (type == 'error' && navigator.onLine) {
message+= ' (prolly a syntax error in manifest)';
}
console.log(message);
}
window.applicationCache.addEventListener(
'updateready',
function(){
window.applicationCache.swapCache();
console.log('swap cache has been called');
},
false
);
setInterval(function(){cache.update()}, 10000);
I had a two part problem. I was generating my cache manifest with ASP.NET MVC/Razor because I wanted to be able to easily host the site off a virtual application and still have the paths line up. The content type wasn't getting set properly on the cache manifest, so Internet Explorer and Safari (iOS) weren't recognizing it (even though Chrome on PC and Android would).
Once I solved that problem, it still wasn't working when I tried to access my Azure hosted app with iOS Safari. When I tried to access with Internet Explorer, I saw that it didn't have the correct mime type for a font I was having.
So a word of warning: be absolutely sure of the mime type of not only the manifest, but also all files that the manifest depends on.
Related
I have a PWA that I've been using perfectly till I updated my phone to 11.3 (introduce Service Workers supports, so in my iPhone it was only a bookmark) and all worked like a charm.
After I've updated to iOS 11.3 I wasn't able to enter to my app because I have an external login (in other domain) so each time I try to open my open this will open a safari browser to make the auth. Before PWA in iOS the external URLs were open in the same open (without open safari). Do you know if this is the correct behavior and, if it is ok, how can I fix it?
Thanks!
I managed to fix this by removing the manifest meta tag:
<link rel="manifest" href="/tracker/site.webmanifest">
My project is a simple PWA that uses Google's OAuth for login. I was getting redirected to Safari to login and unable to go back to the app (on my home screen). Hope it works for you too, I wasted 2 days trying to find a solution.
The reply by Anand tells me that offline capable PWAs need to implement service workers, since they are supported in 11.3 (or 11.4, not sure) and NOT manifests.
Anyways, this worked for me, hope it helps others as well.
When PWAs without service works(either your browser don't support it or your app don't have one) are added to home screen, its mere a bookmark. When the browser finds a SW, then it creates a package(like apk).
How to test this - Find a PWA site without service worker in android and add to home screen. When I tried it in one of Samsung device, it showed only "Remove" option and no uninstall option. When I added a PWA which had SW, got uninstall option. I was also able to locate the apk generated by Chrome when service worker is present.
Now on iOS - 3 possibilities I could think of.
1) My theory based on above behavior on PWAs with and without Service worker, your home icon create by iOS 11.2.x is a bookmark and the new version of safari is treating it as a bookmark to open it in browser. I couldn't test this as I've upgraded to 11.3 already and don't have a pre 11.3 PWA icon.
2) If you have reinstalled the icon(by removing and adding again to home screen) and still have the issue, its probably because your manifest file or service worker files have some issue/compatibility with Safari.
Since we don't have something like Lighthouse for safari, you can validate your manifest.json and service workers in Chrome Lighthouse.
3) Check on scope attribute in the manifest file to make sure you cover your entire domain you intent to cover. If you scope covers domain.com/myapp only, domain.com/otherapp will be opened in the browser when tried to open from any source.
It seems that with the last iOS version 11.4 this issue is solved, I think that now safari shares the context between the browser and the PWA and for example from PWA cookies can be accessed throw safari.
But I think there's still an issue when you open the PWA and you are being redirect to login (safari opens) once you're log in you stay in the browser (iOS does not return to the PWA, but this is a first step)
I'm trying to create an offline version of a test web app.
This far it had been working perfectly on Chrome and Firefox where I do most of my tests. Meaning I can go to the page, the console is all good, and then when I unplug my ethernet cable (I'm hardcore like that) I can see still all of my page content in browser and in chrome://appcache-internals
Problems arise when I try to test it on the iPad, I go to my webpage, but then when going into Airplane mode it refuses to access the page saying I need an internet connection. So I decided to test on Safari (mac) which is the closest I have, and I do see an error in the console on the cache.manifest mime-type : Application Cache manifest had an incorrect MIME type: text/plain.
Problem is, I do have a .htaccess and it does specify AddType text/cache-manifest appcache manifest, but no. Even when I use a web sniffer on my cache.manifest file it comes out as text/plain, which I think might be the reason it's not getting read on the iPad/Safari.
Anyone can help me on this thing ? I'm completely stuck right now.
add to your manifest file NETWORK and FALLBACK blocks so it will look like this:
CACHE MANIFEST
# Version 1.0
NETWORK:
*
CACHE:
index.html
FALLBACK:
Check if you have Private Browsing enabled in Safari on your iPad:
Settings -> Safari -> Private Browsing
If it is enabled, disable it. When Private Browsing is enabled all cookies and other caching is disabled.
I had a similar problem. My app worked fine with internet disconnected both on Safari and Firefox running on the iMac and even on the iPhone in airplane mode. But when I tried to load it on the iPad in Airplane mode it just wouldn't work. When I turned off Private Browsing it worked! Still got the notice about turning off Aerplane Mode though. But it was possible to browse the App.
I have a web app that is intended for use as an iOS offline web app. A key feature of the app is that users can download files with extensions like .doc, .ppt, .pdf, etc. To make these available offline, I am making entries for any such files in a cache manifest.
One other caveat: the most user-friendly way I could get these files to open is to jump out of the offline web app and into Safari to actually open the file. This way, I get the "Open in {{Application}}" options that Safari provides. There seems to be some sort of disconnect during this switch from the offline web app to Safari.
Assuming a clean slate:
I've gone and wiped all the data for this site using Settings->Safari->Advanced.
I launch the offline web app while connected to the server (So we're in online mode.)
The application updates the cache successfully.
I close the web app and disconnect from the server.
I relaunch the app and all of the navigation chrome works, so we know the cache is functioning properly.
I click the link to open a file that needs Safari, so iOS switches to Safari and goes to the file's URL.
Safari says "Safari cannot open the page because the server cannot be found."
So, it seems the this application cache is accessible from the offline web app, but not Safari? Can anyone verify this?
And then going forward, if that is in fact the case: any ideas for a better way to do it? Thanks!
iOS Safari work same as Safari does. But I assumed that your iOS Safari doesn't load successfully, you know, the network of iPhone isn't fast as your PC. You must attach handlers to determine when your offline data is loaded successfully.
Check it out: http://www.html5rocks.com/en/tutorials/appcache/beginner/ and try to use JS to check status of ApplicationCache.
I have a ipad. I make a website with html5 application storage. With a manifest file. The manifest is working on the new ipad 2 and all the web browsers. But it is not working on the ipad 2 with a lower ios version.
The problem is. When i loaded the page. The manifest file is caching the website. I turn airplane mode on. Now i can used the website without a internet connection.
But the problem is. When i now reloading the page. I get a error, that i need a internet connection to view the page. How can i fix this. This problem is in safari.
I have been working through similar issue.
I have an iPad 1 so not exactly the same platform, and I know this sounds a bit "did you turn it off and on again" but you need to make completely sure there are absolutely NO errors in your cache manifest. If you are using a file in your app that is not listed in the cache manifest file, your app will try and function without the missing file. This is particularly relevant when using multiple js files. Anything missing (an easy thing to do when you are in rapid development) will crash your app offline.
I've been doing lots of work in getting a few web apps to work offline on iOS using the HTML5 manifest. I've ran across the typical problems everyone else has and fixed them and everything seems to be working fine—except in the case where I save the web app to the desktop on my iPhone 4.
If I do this and then enable airplane mode, I get the following alert when trying to access the app via the home screen: "your-app-name could not be opened because its not connected to the internet." Accessing the app via Safari browser works fine while offline.
If anyone knows if this is an error on my part, or even the slim possibility of a work around, do tell.
Even downloading the new Financial Times web app (very well done with extensive localStorage support) results in an error when accessing it offline from the home screen.
Technical specs: Running iPhone 4 with iOS 4.3.3 (but also saw the issue in 4.3.2)
After reading the comments (especially Rowan's) I ran more tests and found the answer:
No, Apple did not disable HTML5 offline capability for web apps saved to the home screen, it works - for the most part. There is a bug that will make it not work. It doesn't seem to have anything to do with your manifest setup (unless perhaps it downloaded a bad manifest or incomplete manifest at one point.) We don't know how widespread it is but the fix is to clear your Mobile Safari Cache.
Here's the steps:
Close the web app (make sure its not sticking around in the background).
Cleared Mobile Safari cache: Settings > Safari > Clear Cache
Reopened the app (for caching).
Close the web app again (make sure its not sticking around in the background).
Enabled "Airplane Mode": Settings > Airplane Mode
Reopened the app.
It should now work offline. If it doesn't then its probably a separate manifest issue in your app. Looks like a weird bug with the browser cache - or perhaps the cache was completely full? Who knows, but that's the answer. Thanks guys.
iOS seems to be very sensitive to load issues when offline.
I was getting your "could not be opened" error when offline on a page I was working on. The problem turned out to be that the page created an iframe pointing to a site that didn't have an AppCache. Removing those iframes fixed the issue.
In my case, I handled it using window.navigator.standalone which tells you whether you're running in an iOS homescreen app. The code looked like this:
if (!navigator.standalone) insertFrames();
add this to your html:
https://web.archive.org/web/20170201180939/https://jonathanstark.com/blog/debugging-html-5-offline-application-cache?filename=2009/09/27/debugging-html-5-offline-application-cache/
I found it massively useful - even though I've created my manifest file and compared it to other people's manifests this JavaScript debugging script gave me the clue I would have never found otherwise. I apparently had syntax error in my manifest ... long story short I had to remove everything and add the paths to each file/image one by one. The end result was the same however it worked... how weird!!! does whitespace / comments affect the syntax of the file?