HTML5 offline cache manifest

From OpenCms Wiki
Revision as of 12:55, 19 December 2010 by 83.217.131.83 (Talk)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Here is my first glance at having OpenCms create an HTML5 offline cache-manifest file dynamically, using a JSP.

With this your whole website would be accessible offline.

Read more about HTML5 offline principles here: http://diveintohtml5.org/offline.html

Be warned, the browser will cache effectively all the pages you specify in the cache manifest (so in this example the whole site).


<%@ page session="false" contentType="text/cache-manifest" %>
<%@ page import="org.opencms.jsp.*" %>
<%@ page import="java.util.Iterator" %>
<%@ taglib prefix="cms" uri="http://www.opencms.org/taglib/cms" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%!

void showSiteMap(CmsJspActionElement cms, JspWriter out, CmsJspNavBuilder nav, CmsJspNavElement ne, CmsJspNavElement current) throws java.io.IOException {
	//Iterator i = nav.getFilesInFolder(ne.getResourceName()).iterator();
	Iterator i = nav.getNavigationForFolder(ne.getResourceName()).iterator();
	while (i.hasNext()) {
		CmsJspNavElement sub = (CmsJspNavElement)i.next();
		if(sub.isFolderLink()) {
			out.println(cms.link(sub.getResourceName()));
			showSiteMap(cms, out, nav, sub, current);
		} else {
			out.println(cms.link(sub.getResourceName()));
		}
	}
}

%>CACHE MANIFEST
# Version <fmt:formatDate value="${cms:convertDate(cms:vfs(pageContext).resource[cms:vfs(pageContext).context.uri].dateLastModified)}" pattern="yyyy-MM-dd HH:mm:ss" />
<%

CmsJspActionElement cms = new CmsJspActionElement(pageContext, request, response);
CmsJspNavBuilder nav = cms.getNavigation();
CmsJspNavElement current = nav.getNavigationForResource();

CmsJspNavElement top = null;

out.println();
top = nav.getNavigationForResource("/en/");
showSiteMap(cms,out,nav,top,current);

%>/js/jquery.min.js
/js/javascript.js
/css/style.css

Additional server settings

Your webserver needs to server the cache.manifest file with a mime-type of text/cache-manifest

In case you use Apache httpd, you can add an AddType directive to your server configuration:

AddType text/cache-manifest .manifest

The needed html

AFAIK offline-capable websites must be html5. Additionally you need to have every page to refer to the cache.manifest file.

So the doctype and html definition in your template should look like this.

<!DOCTYPE html>
<html manifest="/cache.manifest">

Caveat

There is one mistake in the generated cache manifest. It has a Version comment which only purpose is to have the file change when the manifest is changed. This is fine so far.

But, to be correct, the manifest should change when one of the content-pages change (because the browser should updated it's cache then.

If someone finds a way to, via the opencms taglib, get the last modification datetime of the youngest file in the site, that would be the correct date.

Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox