HTML5 offline cache manifest
Contents |
Introduction
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, if you use the provided cache manifest on your site, and enable it correctly in the markup of your template, the browser will effectively cache all the pages you specify in the cache manifest (so in this example the whole site).
The manifest-generation JSP
<%@ 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 listSitePages(CmsJspActionElement cms, JspWriter out, CmsJspNavBuilder nav, CmsJspNavElement ne, CmsJspNavElement current) throws java.io.IOException {
Iterator i = nav.getNavigationForFolder(ne.getResourceName()).iterator();
while (i.hasNext()) {
CmsJspNavElement sub = (CmsJspNavElement)i.next();
if(sub.isFolderLink()) {
out.println(cms.link(sub.getResourceName()));
listSitePages(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/");
listSitePages(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 markup
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.
The correct value after the version string should be the last modification datetime of the youngest file in the site.
Of course you can still manually update the cache manifest when you update your content. Some people also use a Version number which they increment when the content changes.
