Creating A Self Contained, Offline Html5 App And The Best Method For Embedding Its Resources

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 describi

Solution 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!

Solution 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.

Solution 3:

Pretty old question, but just for anyone else, this is the perfect app/extension to do it: https://chrome.google.com/webstore/detail/singlefile/mpiodijhokgodhhofbcjdecpffjipkle

Also, you can use any browser user agent string changer to load mobile version of the page and then save it to single html file (contains all images media css everything inside), which displays nicely on smartphones and you just need to send a single file.

If you want to create from a PDF instead of a web page then you can use www.zamzar.com or such online converters and select 1-page HTML5 option.