I'm trying to make an offline webapp for Mobile Safari mainly. I have my .appcache file set up and it's working fine until I add a line for a .mp4 -file (52 mb). Even Desktop Chrome will fail appcaching the app 'cause of the file - it gives an error:
Application Cache Error event: Resource fetch failed (-1)
And because that fails, the whole appcaching fails.
Using a http sniffer (HTTPScoop) I found out that around 30 mb the downloading of the mp4 stops, and gives "Reset by peer" -error.
Does it have something to do with Apache, with the browser, the ISP or what?
According to one of the people who posted something here, Chrome has a 260mb total appcache size limit and about 32mb per-file limit (which is about when you said the download stopped). I don't know about other browsers, but in Chrome you can fix this by creating a chrome app. It seems inconvenient and annoying, but it is the only way to increase that limit. Not sure if that info is up-to-date because that link is a few years old, but that seems to be the case.
Related
I'm having some trouble getting Firefox to cache an exe file that we have on our web site. If I download it with IE or Chrome and start the download a second time then the second download finishes immediately but with Firefox it downloads everything from the start.
I've attached screenshots from the network tab in Chrome and Firefox. Notice that both receive HTTP Status Code 200 but Chrome says (from cache). What response headers do I need to add to make Firefox cache it?
Chrome:
Firefox:
Here's the url if you wish to try downloading it it yourself: https://dlud0tbph7s2n.cloudfront.net/Production/Windows/DegooSetup-Production-1.0.1052.exe.
You can check if the exe file is cached by looking in 'about:cache' or using a tool like HttpWatch.
Your EXE file is not getting cache. In older versions of Firefox that could be due to the file exceeding the maximum size for a single cache entry. By default, the maximum entry size is now 50 MB. You can check this by looking at 'browser.cache.disk.max_entry_size' in 'about:config'.
The problem might be caused by the very large value of max-age that you have set - 2000000000 seconds is about 63 years. The HTTP spec only recommends using periods up to one year and some browsers refuse to cache for very large values of max-age:
https://stackoverflow.com/a/25201898/66911
The recommended maximum value of max-age is 31536000 seconds or less.
Every time I try to view a video file on my server I get this error on iOS in Safari, Chrome.
I am using a blob server and then an Apache server so I am not sure what the problem is. However, when I only use Apache, I do get this error but then I have the video rendering too.
However when I render this using my server this is not working. Does anyone know why this is? The videos work fine on other devices and in browsers also works fine if accessed through Apache only.
The solution to this problem was just a work around. The reason being the that blob servers aren't streaming servers. iOS devices expect the videos to arrive in small chunks. So for instance a streaming server is able to do this. However, a blob server just hands the video as a blob which is not what the iOS device expects. Some browsers are smart enough to handle this but others not.
The way I solved this was to add the video files outside of the blob server in a folder within the project and then render this through the Apache server instead of serving it via the actual blob server we were using. I hope this helps.
I was also getting this error for some mp4 videos. Turns out it wasn't a server issue for me it was a video encoding issue.
Issue
A "moov atom" needs to be placed at the front of the video file. It serves as a table-of-contents for the video. That "moov atom" has to be read first for html streaming or it won't play on some devices.
The Fix
To fix, I used handbrake to transcode my video. Turn on 'web optimize' Also turning on zerolatency and 'fast decode' may help (found in the video tab).
We were getting a similar error here. I thought it may have been the streaming issue since our video was hosted in blob storage on Azure. After setting up a Media Service for streaming, the video still didn't work. It turns out, the cause of the bug for us was Safari using a Service Worker. Below is some further explanation of what we found:
Safari first sends a byte range request for a Video tag that expects a 206 response. However, if you use a Service worker, the response returns with a 200 and it appears Safari doesn't know how to handle this. Our solution was to exclude using a Service Worker for Safari.
We found this by using the network tab of the Safari debugger on a Macbook to troubleshoot the issue we were seeing on the iPad. Attached is a screenshot for comparison/reference. The left tab shows what the call should look like by default. The right tab shows what you would see if using a Service Worker.
Add the following line of code to your .htaccess (located in the root of your WordPress installation):
SetEnvIfNoCase Request_URI .(?:mp4)$ no-gzip dont-vary
The following screenshot is the new complete .htaccess
Reference: https://clickshepherd.com/blog/solved-elegant-themes-divi-and-cloudflare-mp4-media-error-formats-not-supported-or-sources-not-found/
In our case, we created a URL pattern for our blob assets and then set headers in that URL pattern definition page which sent back a mime type of 'video/mp4'. This should instruct the browser to treat the binary stream as chunked, which in turn meant we didn't need to download the whole thing before it started playing.
Google Cloud Platform Solution
This issue caused me a lot of headache, so I just wanted to add my specific solution here, if anyone else encounters this while deploying to Google Cloud Platform.
When trying to load MP4 videos in Safari, I was getting the same error:
"Failed to Load Resource, Plugin Handled Load"
Which was preventing the videos from playing.
Still, I wanted to try to keep everything inside Google Cloud, so I created a Storage Bucket for the site, and added the videos there.
Of course, trying to retrieve the videos from the storage URL from the main site resulted in a CORS error.
Fortunately, you can configure CORS pretty easily on storage buckets:
Configuring cross-origin resource sharing (CORS)
Once that configuration was deployed, I was able to retrieve and load the videos on the site in Safari without the "plugin handled load" error.
I saw the error "Failed to Load Resource" and though that this is reason, why my videos are not playing.
Turned out, my videos were missing the hvc1 tag. And when I added it - they're playing fine.
In my case issue was with H256 HEVC videos, but in your case some other encoding / tagging issues can be the reason.
In my case, issue was fixed with ffmpeg:
ffmpeg -i input.mp4 -tag:v hvc1 -acodec copy -c:v copy -movflags faststart out.mp4
I am trying to store a mp4 video file (rather small ~ 2.5MB) in the local app cache.
Manifest looks like:
CACHE MANIFEST
viddy.mp4
Chrome (22.0.1229.94 m) will log the following in the console:
Creating Application Cache with manifest http://example.net/cache.manifest
Application Cache Checking event
Application Cache Downloading event
Application Cache Progress event (0 of 1) http://example.net/viddy.mp4
Application Cache Error event: Resource fetch failed (-1) http://example.net/viddy.mp4
When I click the link right next to the Error it's opening the file quite fine.
My manifest is served with the correct MIME-type (I'm using the HTML5 Boilerplate .htaccess-file) and the video is served Content-Type:video/mp4
Is my file too big? I am perfectly able to cache a 1MB image this way, so I thought filesize should not be a problem? Safari on desktop and iPad does cache the video just fine.
Remark: I have seen this question but it does not cover my problem as the solution seemed to be something Python-related.
Chrome does not allow data to be stored in Incognito Mode.
I experienced similar problem and this is how I solve it. In this case Chrome does not give any helpful information about error. I've tried to load same page in Safari (Mac, but Windows should work as well), and I got description, that response for specified resource returns 302 (Redirect) and HTML5 Application Cache cannot handle it.
In your case it might be the same, but I'd suggest you to enable the sniffer and see, what response you get from your resource. If it's different than 200 - you figured the issue.
P.S. I've cached files up to 32 MB without any problems.
I'm trying to get HTML5 offline storage working in a basic way. I read the information on DiveIntoHTML5 and it seems to make sense, but it just doesn't seem to be working for me. I wondered if someone could help me to debug this.
Basically I've set up a home page for the application, index.htm. So my application is on the web at http://www.mydomain.com/online/index.htm. Users will visit this page, where they'll ordinaraily do all of their stuff day-to-day. Visiting this URL will create a bunch of cached files so they can then visit http://www.mydomain.com/offline and view a working version of the application when they're offline.
The top few lines of code in the online homepage are:
<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
...etc
I've generated a plain text file called 'cache.txt' and added the following content to it in Notepad:
CACHE MANIFEST
http://www.mydomain.com/offline/scripts/jquery-1.6.3.min.js
http://www.mydomain.com/offline/scripts/jquery-ui-1.8.16.custom.min.js
http://www.mydomain.com/offline/scripts/modernizr.min.js
http://www.mydomain.com/offline/scripts/json2.min.js
http://www.mydomain.com/offline/scripts/jquery.deserialize.js
http://www.mydomain.com/offline/scripts/jquery.cookie.js
http://www.mydomain.com/offline/scripts/main.js
http://www.mydomain.com/offline/css/main.css
http://www.mydomain.com/offline/css/structure-details.css
http://www.mydomain.com/offline/css/ui-lightness/jquery-ui-1.8.16.custom.css
http://www.mydomain.com/img/header.gif
http://www.mydomain.com/offline/img/bg.png
http://www.mydomain.com/offline/img/header_riser.gif
http://www.mydomain.com/offline/img/logo.png
http://www.mydomain.com/offline/img/offline.png
http://www.mydomain.com/offline/index.htm
I've then renamed this file to 'cache.manifest' and uploaded it to the root of the online application (at the same level as my home-page) so that it's accessible at http://www.mydomain.com/online/cache.manifest.
The hosting company have supposedly added the content type of 'text/cache-manifest' to all files with the extension of .manifest in IIS. I think this is working because when I view the file in Firefox at http://www.mydomain.com/online/cache.manifest Firebug tells me the content type is:
Content-Type cache-manifest
Or should this be returning 'text/cache-manifest'? Perhaps this is the problem?
When I view the offline storage folder on my system (C:\Users\Me\AppData\Local\Mozilla\Firefox\Profiles\b12u6xza.default there's nothing in there related to this domain at all.
Can anyone suggest what might be going wrong - as I'm a little stumped?
First of all, the specification have changed, you should now use .appcache as manifest extension.
Second, the mime type should be defined as you say text/cache-manifest. I'm not really related to IIS but seems like there's two ways to add this MIME type , either trough IIS administration UI or via web.config file
Also, I would recommend you testing this with Google Chrome, since its console show all the manifest parsing data and errors, including when the manifest MIME type is not being correctly recognized.
There are some issues you have to be care about:
Chrome (And I guess that all the browsers at last) only handles the cache file over secure requests. If your request is not secure, your cache won't be executed.
Mobile browsers (At least, the devices I could test), doesn't care about secure or unsecure requests. But I'd prefer to be ready for the politics change.
I was breaking my head trying to understand why in Android my file worked fine and in iOS it was failing, and the reason was that I was running my browser in incognito mode. iOS in incognito mode can't cache the page, and you get error.
If I find more issues, I'll write it down.
Regards.
I spend a lot of time on this (on my own problem), offline cache was not working. Did everything possible I could do, changed cache file name, added handler via htaccess, uploaded the file from local to live server, still the same problem. Finally got some help from this question myself.
I tested it in safari and it was working fine. The problem was Chrome browser. I also tried https as another user suggested, that also did not fix the problem. So may be there is an extension in chrome that is forbidding it from using the cache file. Before troubleshooting your problem first test it in standard browsers Safari, FireFox, IE, Opera. Do not test in non-standard browsers such as Brave, it did not work in it.
Officially from google
Which confirms deprecation in Ver 61 and onward. I am running 80.
Chrome support for applicationcache and manifest for offline html5 application.
Application Cache / Offline Application / Manifest Cache.
Aware that applicationcache has been deprecated, but whilst
replacement (service workers) not ratified have yet to replace in
legacy systems we have.
However, recent browser update seems to have disabled offline
functionality on HTTPS site. Our manifest files are now ignored and
chrome dinosaur displayed instead.
On checking back through browsers seems this is common from Chrome 61
and newer however it only seems to have manifested recently.
Chrome issue? or combination of Chrome and underlying OS? We have
android/windows both showing same problem from 61 onwards.
Note : HTML5 Cache is being deprecated
All browsers are going to drop this feature, I noticed they are not working in any of the latest browsers. This MDN Mozilla strongly advises against it and not to use it.
try to add these lines in httpd.conf ..this might help you
AddType text/cache-manifest .manifest
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/cache-manifest "access plus 0 seconds"
</IfModule>
You'd better test using chrome's console !(you can't see these in chrome's network)
My example(visit:www.mustrank.com/views/1.php ).
Look at chrome's console output below,manifest file "website.appcache" is created first,and then sources "1.html" and "main.css" are downloaded
[Creating Application Cache with manifest
www.mustrank.com/views/website.appcache 1.php:1
Application Cache Checking event 1.php:1
Application Cache Downloading event 1.php:1
Application Cache Progress event (0 of 2)
www.mustrank.com/views/1.html 1.php:1
Application Cache Progress event (1 of 2)
www.mustrank.com/css/main.css 1.php:1
Application Cache Progress event (2 of 2) 1.php:1
Application Cache Cached event ]
I'm writing a web app to be used offline on iOS. I've created a manifest, am serving it up as text/cache-manifest, and it usually works fine, when running inside Safari.
If I add it as an app to my home screen, then turn on Airplane mode, it can't open the app at all -- I get an error and it offers to close the app. (I thought this was the entire purpose of an offline app!)
When I load the app a first time when online, I can see in my logs that it's requesting every page listed in the manifest.
If I turn off Airplane mode, and load the app, I can see the first file it's requesting is my main.html file (which is both listed in the manifest, and has the manifest=... attribute). It then requests the manifest, and all my other files, getting 200's for all (and 304's for anything requested a second time during this load).
When I load the page in Chrome, and click around, the logs show the only thing it's trying to reach on the server is "/favicon.ico" (which is a 404, and which I don't think iOS Safari tries to load, anyway). All of the files listed in the manifest are valid and served without error.
The Chrome inspector lists, under "APPLICATION CACHE", all the cached files I've listed which I expect. The entire set of files is about 50 KB, way under any limit on offline resources that I've found.
Is this supposed to work, i.e., am I supposed to be able to create an offline iOS app using only HTML/CSS/JS? And where do I go about figuring out why it's failing to work offline?
(Related but doesn't sound quite the same to me, since it's about Safari and not a standalone app: "Can't get a web app to work offline on iPod")
I confirm that name 'cache.manifest' solved the offline caching problem in IOS 4.3. Other name simply did not work.
I found debugging HTML5 offline apps to be a pain. I found the code from this article helped me figure out what was wrong with my app:
http://jonathanstark.com/blog/2009/09/27/debugging-html-5-offline-application-cache/
Debugging HTML 5 Offline Application Cache
by Jonathan Stark
If you are looking to provide offline access to your web app, the Offline Application Cache available in HTML5 is killer. However, it’s a giant PITA to debug, especially if you’re still trying to get your head around it.
If you are struggling with the cache manifest, add the following JavaScript to your main HTML page and view the output in the console using Firebug in Firefox or Debug > Show Error Console in Safari.
If you have any questions, PLMK in the comments.
HTH,
j
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);
Sometimes an application cache group gets into a bad state in MobileSafari — it downloads every item in the cache and then fires a generic cache error event at the end. An application cache group, as per the spec, is based on the absolute URL of the manifest. I've found that when this error occurs, changing the path to the manifest (eg, cache2.manifest, etc) gives you a fresh cache group and circumvents the problem. I can vouch that all of our web apps work offline in full-screen with 4.2 and 4.3.
No offline web app (as of iOS 4.2) can run without an internet connection (which means Airplane mode, too) when using <meta name="apple-mobile-web-app-capable" content="yes" /> in the html head section. I have verified this with every example I've seen and the ones that use Safari to render the site work fine, but when you throw in that meta tag, it won't work. Try your app without it and you'll see what I mean.
I have found that clearing the Safari cache after enabling Airplane mode to be an effective way of testing whether the app is really functioning offline.
I have sometimes been fooled into thinking that the application cache was working when it wasn't.
I had struggled with this iOS 4.3 "no offline cache" problem since I updated my iPad to 4.3.1 from 4.2. I saw in another post in this site that it was working again in 4.3.2. So I updated by iPad again, now to iOS 4.3.3. But still couldn't get the offline caching to work until I renamed my manifest file to "cache.manifest". Then the caching started working again and I could run my HTML5 offline app from the Home Screen. I did not need to put the favicon.ico in to the cache manifest. And I also had full screen going (setting the "apple-mobile-web-app-capable" to "yes").
I have several working offline and on/offline web apps.
When I turn off airport mode, I get a request for the manifest and some other files.
I don't get requests for images, JavaScript, CSS or cached AJAX files.
If you see requests for your resources, IOS doesn't have them cached.
Safari in general is more picky with manifests.
I suggest you try Safari on your computer.
I have run into the same problem today on iOS 4.3. I was able to fix the problem by adding a favicon.ico file and also adding it to the manifest.
I've written an offline app that still seems to work in 4.2 and 4.2.1; the post is a little dusty, but the code still runs:
http://kentbrewster.com/backchannel/
Remy Sharp has a newer post with code that also works, here:
http://remysharp.com/2011/01/31/simple-offline-application/
His app:
http://rem.im/boggle/
After days of messing with getting offline web apps to work on an iPhone/iPod Touch using the Webserver's HTTP authentication, I discovered these useful nuggets:
Make sure Safari is at the URL root of the web app when tapping "Add to Home Screen". I used jQuery Mobile and was sometimes adding the link with"/#pageId". Caused trouble.
Run your Ajax calls in serial. This might only be important if your web app is using HTTP authentication, but my app was firing a whole slew of Ajax calls on page load in parallel and it caused the app to hang on the "apple-touch-startup-image".
Ajax calls are "successful" when offline (at least using Prototype.js). Test for an actual piece of data in the Ajax response, not just on the HTTP status. I used this to test for displaying cached (SQL) or live data.
In the manifest use "NETWORK:\n*\n". From what I could muster, this is a catch-all statement for anything not explicit in the "CACHE:" section. Use Chrome to make sure your manifest is correct. Look at Chrome's console for errors.
Not directly related, but tripped me up for a bit, openDatabase.transaction() calls are ASYNCHRONOUS! Meaning, the line of JS code after transaction (execute(), error(), success()) will execute BEFORE the success() function.
Good luck!
I found this solution that seemed to work for me, since I also ran into this problem during my development. This fix has worked fine for me so far and also for other people that I've asked to test it with, and I'm able to get it running offline (in airplane mode) and off the home screen after caching and whatnot. I've written a post about it on my site:
http://www.offlinewebapp.com/solved-apple-mobile-web-app-capable-manifest-error/
Delete your current web app icon on the home screen.
Go to settings and clear your Safari browser cache.
Double tap your home button to open the multitasking bar. Find the Safari one, hold your
finger down on it, and exit it.
Please let me know if this works for you also! Good luck!
I've written an app and it works fine through the mobile browser, but when adding the desktop... Doesnt work. I guess apple have given up on IOS4 and all efforts are now on OS5. Shame :(
I have one potential workaround for this - it seems a bit crazy, but here goes... I work with the cache.manifest and full screen apps a lot (here's a test if you need: http://www.mrspeaker.net/2010/07/12/argy-bargy/ - add to home screen then turn on flight mode and it launches - at least, as of iOS 4.2.1)
One weird thing I found is that sometimes it seems that some kind of "meta" information in files can mess them up from being cached - Have you ever noticed that in bash that if you do a "ls" some files (depending on your colour settings) are highlighted for no apparent reason? Files can have meta data that the operating system (I think) adds automagically - and there are ways to remove it... I can't remember why but here's some more details: Strip metadata from files in Snow Leopard
After tearing my hair out one day - and refusing to give up because I knew it SHOULD have worked... Chrome was saying it loaded all the files, but ended with a generic error. In the end I recreated the project structure with blank files and copy/pasted the contents over. It worked - started caching as it was supposed to!
When I looked at the files I noticed there was some meta info. I tried scrubbing this info and the original project worked again. I'm not sure this was the reason it worked again - perhaps it was just a coincidence.
Because it worked, I didn't think too much about it. The same problem happened again some months later and the copy/paste trick worked again. I was busy, so I didn't investigate further - but vowed I would get to the bottom of it the next time it happened.... but I haven't had to yet.
Phew. Anyway, glad I got to write that down somewhere...
[UPDATE: months and months later - I've not been able to reproduce this, so I don't think it's the metadata]