HTML5 offline cache manifest
| Line 8: | Line 8: | ||
<pre> | <pre> | ||
| − | |||
<%@ page session="false" contentType="text/cache-manifest" %> | <%@ page session="false" contentType="text/cache-manifest" %> | ||
<%@ page import="org.opencms.jsp.*" %> | <%@ page import="org.opencms.jsp.*" %> | ||
| Line 48: | Line 47: | ||
/js/javascript.js | /js/javascript.js | ||
/css/style.css | /css/style.css | ||
| − | |||
</pre> | </pre> | ||
Revision as of 12:57, 19 December 2010
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).
<%@ 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 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.
