Im working on an offline html5 audio player. Obviously I have to specify filetypes such as Mp3 for use with webkit and Vorbis for firefox etc as per the HTML5 spec. However for use on mobile devices like the iPhone for example I only want to get the files needed to play in this case mp3. Is there a way for me to tell browsers to cache specific files or do they have to add all the resources no matter what. Thus eliminating the burden of the user having to cache more files needed and exceeding restrictions (I'm aware that in mobile safari only 10MB can be cached.)
Is there a way to target certain resources in the cache per device.
Heres my manifest.
CACHE MANIFEST
CACHE:
index.html
master.js
http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
style.css
buttons.png
image.jpg
/player/tunes/waterfall-audio.m4a
/player/tunes/waterfall-audio.oga
So obviously in firefox I only need to cache the oga and webkit the mp3. Any insights would be great!
I don't know any way in which you can target specific devices or platforms in cache manifest file.
But you can generate the manifest file on server side depending on the client that has sent the request. This way you can send different manifest files for different browsers and platforms.
Just make sure to set the MIME type to "text/cache-manifest".
Related
I am building an offline Html5 App and I have to prepare my manifest file for caching all files I am using.In previous releases of JQM I just included:
jquery.mobile-x.x.x.min.js, jquery.mobile-x.x.s.min.css, the 2 icon files and the spinner.gif....And my App worked just fine...
Now it turns out that JQM 1.4.1 includes a bunch of files that I don't know if I have to cache them all?
What should I do with all these files?
Do I have to include them all in my manifest file?
This is not a thorough answer but no, you don't need both the regular and "minified" version of all those files. The .min.* files should theoretically load a bit faster and are worth bundling into the cache manifest. Also if you are targeting multiple device formats, you might want both the PNG and SVG images. However if you are targeting a single device profile (as we are) you can probably isolate only the image format that you want. The default is now SVG with PNGs as backup for browsers that don't support vector images fully.
I am trying to make a site available offline in a web browser (specifically: Mobile Safari and/or Google Chrome), using a manifest file to load the offline content into the application cache.
This works just fine for images, html content and even font files. But not so for the videos I am trying to store. Mobile Safari is asking to increase storage to 50MB (just as it should) to accomodate the videos, but when going offline the videos are not displayed. All in all the cached content amounts to 37MB.
I am using JWPlayer to show the videos (setting the HTML5 player version as the preferred player), but I have also tried the HTML5 video tag on its own to no avail. The JWPlayer is returning the "Could not load video file" message, just as if the URL was invalid, when going offline (but they work fine online). The videos are H264 encoded in MP4 containers.
Is Mobile Safari on iPad at all capable of storing and retrieving MP4 (or other video) files? Is there any special trick that needs to be employed?
The problem is that Safari itself doesn't play the videos. They're played by the QuickTime plugin, which ignores the browser's caches. See this article.
I don't know of any workaround (other than PhoneGap etc.), but I would certainly love to have one!
You could not use the JWplayer in offline (at least with your current version). In their script (swf), it is fetching some external script from their server (include their logo) such as
http://p.jwpcdn.com/ ... /jwpsrv_frq.js
http://p.jwpcdn.com/...../jwpsrv.js
http://p.jwpcdn.com/...../logo.png (JwPlayer text)
I think it's all about their authorization and license checking. It would take you an amount to get away that logo for the paid version, they may ask your domain and they will add it into their list of the customer's valid website domain, and they also give you a script in the static link and you can add it into your cache file.
I use application cache manifest to cache media contents of a web game, then in the game I use the Web Audio API to play some sounds.
This works on Chrome, and the first time to load on Safari. But subsequently it will fail on Safari because the XHR request for the audio files actually returns an empty string.
The same happen to Mobile Safari as well.
Anyone has any idea why this happens? Any possible workaround while keeping the app cache for audio?
Anyone have suggestions on how to best handle using App Cache when you have sets of assets used in one browser but not in another?
Example: OGG audio for Firefox and MP3 for IE. I can cache both types of files, but audio is huge and would store twice as many files as the browser can use.
My best thought is to create several different manifests. For example, one to load assets common to all browsers, and then a separate manifest for, say, MP3's, and load a page in an iframe that calls this manifest once I can determine on the client side that they're using IE. If however I find that they're using Firefox, I can load another page (with the attached OGG manifest) in the iframe.
Would this work or is there a more elegant solution?
For now I'm just using a nginx rewrite rule like this
location / {
if ($http_user_agent ~ Firefox) {
rewrite ^.*\/(app.manifest)$ $scheme://$http_host/moz.manifest redirect;
}
}
Most web servers will let you define similar rewrite rules. This is a good option because it's fast and doesn't require any further installation of software.
This guy is checking which browser using PHP, but you could do this using any framework, preferably something fast like Node or plain ruby Rack.
On my website, I intend to stream background audio using the HTML5 <audio> tag. However, even after cutting down on the track length, my two files (MP3 and OGG Vorbis, for different browsers) end up at just short of 5MB a piece.
Due to this, it would be nice to ensure loading time and bandwidth is conserved by caching the files. What I would like to know, but can't seem to find, is if it's possible to force the files to cache, or if browsers would normally cache the files at all.
Thanks for your input!
You can not force caching. Browser treats these files as standard resources, so make sure that your server is properly configured to make caching as likely as possible. (Returns valid ETag, Expires and Cache-Control, no Pragma:none, 304 Not modified responses, etc..). HTML5 local storage can be used (but not worth the effort) to cache small items like pictures.
Mobile browsers have such a small cache, that even this doesn't help and they will flush the cache pretty soon.
Fast forward 7 years, and you can now easily do this with a Service Worker. You could even get crafty and cache/combine various Range requests if you wanted.
https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker