HTML5 offline cache manifest

From OpenCms Wiki
(Difference between revisions)
Jump to: navigation, search
(New page: 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 ...)
 
 
(5 intermediate revisions by one user not shown)
Line 1: Line 1:
 +
=== Introduction ===
 +
 
Here is my first glance at having OpenCms create an HTML5 offline cache-manifest file dynamically, using a JSP.
 
Here is my first glance at having OpenCms create an HTML5 offline cache-manifest file dynamically, using a JSP.
  
Line 5: Line 7:
 
Read more about HTML5 offline principles here: http://diveintohtml5.org/offline.html
 
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).
+
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).
  
<pre>
+
=== The manifest-generation JSP ===
  
 +
<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 18: Line 21:
 
<%!
 
<%!
  
void showSiteMap(CmsJspActionElement cms, JspWriter out, CmsJspNavBuilder nav, CmsJspNavElement ne, CmsJspNavElement current) throws java.io.IOException {
+
void listSitePages(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();
 
Iterator i = nav.getNavigationForFolder(ne.getResourceName()).iterator();
 
while (i.hasNext()) {
 
while (i.hasNext()) {
Line 25: Line 27:
 
if(sub.isFolderLink()) {
 
if(sub.isFolderLink()) {
 
out.println(cms.link(sub.getResourceName()));
 
out.println(cms.link(sub.getResourceName()));
showSiteMap(cms, out, nav, sub, current);
+
listSitePages(cms, out, nav, sub, current);
 
} else {
 
} else {
 
out.println(cms.link(sub.getResourceName()));
 
out.println(cms.link(sub.getResourceName()));
Line 44: Line 46:
 
out.println();
 
out.println();
 
top = nav.getNavigationForResource("/en/");
 
top = nav.getNavigationForResource("/en/");
showSiteMap(cms,out,nav,top,current);
+
listSitePages(cms,out,nav,top,current);
  
 
%>/js/jquery.min.js
 
%>/js/jquery.min.js
 
/js/javascript.js
 
/js/javascript.js
 
/css/style.css
 
/css/style.css
 
 
</pre>
 
</pre>
  
Line 60: Line 61:
 
  AddType text/cache-manifest .manifest
 
  AddType text/cache-manifest .manifest
  
=== The needed html ===
+
=== The needed markup ===
  
 
AFAIK offline-capable websites must be html5. Additionally you need to have every page to refer to the cache.manifest file.
 
AFAIK offline-capable websites must be html5. Additionally you need to have every page to refer to the cache.manifest file.
Line 75: Line 76:
 
But, to be correct, the manifest should change when one of the content-pages change (because the browser should updated it's cache then.
 
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.
+
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.

Latest revision as of 13:01, 19 December 2010

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.

Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox