Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

How to create an offline HTML5 page

Saturday, August 6th, 2011 by Servage

HTML5 has added new functionality, one of which is the possibility to use HTML5 web apps in an offline mode, because the app can be instructed to cache files. This is particularly useful for web applications that use large resources, such as script libraries, or if a complete offline mode should be available. Data can then later be synchronized with the server, when operated online again.

This is a quick guide how to get started with offline HTML5 functionality.

Use the HTML5 doctype

Like any HTML document, you need to specify this, so the browsers know you’re talking HTML5:

<!DOCTYPE html>
<html>
  ...

Set manifest with .htaccess

Enable .htaccess support, and make sure you have the following entry in your .htaccess file:

AddType text/cache-manifest .manifest

Create manifest file

Create the file offline.manifest and add the following code:

CACHE MANIFEST
# This file contains the file to cache

CACHE
index.html
style.css
image.gif
# etc...

On top of that, you can use Network and Fallback declarations for further offline functionality.

Add manifest to HTML document

<html manifest="/offline.manifest">

That’s it! You now know the basics about HTML5 caching for offline use.

How to create an offline HTML5 page, 4.5 out of 5 based on 4 ratings
Categories: Guides & Tutorials

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.