I have been looking into HTML5 manifest but I am unclear as to whether or not there is file size limit for caching using the manifest.
For example if i wanted to make several audio files available offline would this be achieved using manifest? or is it really only for small images and text?
as far as i know the spec doesn't specify a maximum size for an object or for the entire cache, but e.g. firefox has a preference which by default allows a total of 50mb worth of cache-files. that implies that indeed the cache is optimized for small files (html, css, js, images) and not for big files (video, audio, ...).
Related
If you put video tags on a page, with not much other attributes other than src (just a onclick javascript handler), what is the usual behavior of browsers? Will they download the video(s) completely? Just some frames? Is this browser specific?
I have been asked to review a site, which showcases a lot of videos, so I am just curious.
This behaviour is browser specific and as browsers get updated so often it may change over time. I believe the spec 'advises' the default to be 'metadata' (see below).
There is a 'preload' attribute which can have several values to instruct the browser to do what you want. It is a 'hint' attribute so browser do not have to follow it:
auto - load when the page loads
metadata - only load the metadata when the page loads
none - don't load the video when the page loads
If the attribute is present with not value or an empty string then is taken as auto case above.
Its worth being aware that this page may be ignored in some cases - one common example was browsers on mobile devices which in the past generally ignored preload to protect a users data usage, although this is changing now.
More info here - worth checking as browsers change often: https://developer.mozilla.org/en/docs/Web/HTML/Element/video
Its probably worth mentioning also that if the video server is providing the video in a streamed format such as HLS or MPEG DASH, then the client will typically only download enough of the video to fills its buffer anyway. These protocols split the video into segments or chunks which the client downloads as required.
Progressive JPEGs seem pretty useful for performance purposes. I've found: https://github.com/gruntjs/grunt-contrib-imagemin, which has an option to progressive'ify your jpegs. It is using http://libjpeg-turbo.virtualgl.org/ under the hood. This is great; however, it seems like my images load top down still.
Questions:
Do pjpegs have their own file extension?
Do pjpegs have their own mime types?
What is a good way to test that the pjpeg is doing what it needs to do?
Every JPEG library I have seen recently decodes progressive JPEG image. A progressive JPEG breaks each component into two or more scan (as opposed to 1 scan per component in sequential JPEG).
In theory, an application can redisplay a progressive JPEG image after each scan. In a web browser, that effect would give you images that start out as 8x8 blocks the get clearer.
In ye olde days of internet over 1200 baud serial lines that made a lot of sense.
Now, most images can be downloaded so fast that there is little need for a web browser to progressively display an image, even when it is in progressive JPEG.
To use progressive JPEGs, you just need an encoder that creates them
Progressive JPEGs generally do have their own extension.
No
Just display the image. If it is visible in your web browser, it is doing what it needs to do.
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.
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".
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