Creating a self contained, offline HTML5 app and the best method for embedding its resources

Question

I am trying to create a single file HTML5 document that can be emailed to people that would contain all markup, js, css and images needed to run it.

I am aware of articles describing the offline process such as http://diveintohtml5.info/offline.html, however would like to know the best method to embed its resources such as large images and js files.

Would I be using base64 encoding for these or is there a better approach?

App will be running on fairly new browsers.

Answer 1

Yes, base64 encode the images. What I do is save them as png and to the correct size before converting to base64 (there are free online sites that do it for you). This saves a lot of space.

For saving data to localfile, use HTML5 local storage, here is a guide: http://www.html5rocks.com/en/features/storage.

For the JS/CSS files, just paste them in the head, no biggie!

Answer 2

I've had to do this rather aggressively for some work.

To reduce the file size significantly, if the graphic is line art rather than a photo, I prefer to convert it to a scalable vector graphic file instead (.svg). These are text files understood by most browsers today on their own, and easily embedded into an HTML file directly. You have a few options here depending on how you want to do it, ranging from directly using the tag with the commands to drive it, or embedding it as a stylesheet component to use wherever you need it within the body of the document by using a data URI (e.g. .my_image{background:url(data:image/svg+xml;charset=UTF-8,[SVG file without newlines]);}, find more detailed information available here: https://css-tricks.com/using-svg/ ). Ensure you test on all the browsers you want this to work with... I've been able to do this successfully on IE, Chrome, Firefox, and Edge, although I had to use charset=US-ASCII and apply some filtering of the SVG text to make it work.

For fonts, I use Font Squirrel to generate a webkit from a font file I uploaded (use the advanced options, and set the stylesheet.css to have the font embedded within it, so you can copy the resulting text into your own page).

External stylesheets and JavaScript can simply be copied directly into your HTML, as already mentioned.