Hello HTML5 Offline Cache: NodeJS+Express Minimal Example

#!/usr/bin/env node

var Http=require('http');
var Express=require('express');
var Morgan=require('morgan');
require('date-format-lite');

var app = Express();
app.use(Morgan('combined'));

var version=1;

app.get('/cache.manifest',function(q,s){
    s.setHeader('content-type','text/cache-manifest');
    s.end(['CACHE MANIFEST','#v'+version,'CACHE:','/'].join("\n"));
});

app.get('/', function(q,s){
    var r=''
    r+='<html manifest="cache.manifest">';
    r+='<body>hello world,v'+version+'</body>';
    r+='</html>';
    s.end(r);
});

Http.createServer(app).listen(8080);

Index

Actual application design
Safari (MacOSX/iOS-iPhone) behavior (Tested version:iOS8)
Chrome behavior (Tested version:38.0.2125.111)
How to use cache.manifest with Client Certification on Safari

Actual application design

Use window.applicationCache.update() manually to re-check manifest file.
If manifest has been changed, Event updateready will be raised. You should handle it and call window.applicationCache.swapCache() then window.location.reload().
If you don't implement the process above, Some browsers never reload the page,and unable to change your web application.
In the condition above, Use my Bookmarklet to force reload the manifest.

Example

window.addEventListener('load', function(e) {
    window.applicationCache.addEventListener('updateready', function(e) {
        window.applicationCache.swapCache();
        window.location.reload();
    })
    window.applicationCache.update();
})

Safari (MacOSX/iOS-iPhone) behavior (Tested version:iOS8)

If connection is HTTPS+ClientCert authentication, Safari doesn't load manifest and never cache it.
User pushes Reload, Safari reloads manifest file and updates automatically.
(Off topic)Mobile safari ignores .focus() method of input form since of security reason(maybe). To avoid, You have to enable apple-mobile-web-app-capable meta tag and bookmark it to home screen. focus() method is only working when it called via home screen icon.

Chrome behavior (Tested version:38.0.2125.111)

Chrome calls applicationCache.update() automatically but don't calls swapCache(). Application should call swapCache manually.
If application doesn't have swapCache() code,The cached page naver be reloaded. You have to open chrome://appcache-internals and remove cache. or Use my Bookmarklet .

How to use cache.manifest with Client Certification on Safari

Safari fails loading cache.manifest or pages to be cached which needed Client Certification(Bug?). If you want to use cache.manifest on HTTPS with rejectUnauthorized:true, Bypassing authentication when accessing cache.manifest or pages which allowed caching is necessary. Refer following example.

var app = Express();
.
.
//Bypass authentication of manifest file and pages for cache
app.use(function(q,s,next){
    var whiteList=['/cache.manifest','/cached.html'];
    if(q.client.authorized||whiteList.indexOf(q.url)>=0){
        next()    //Authorize by cookie (such as express-session) for white list urls at this point.
    }else{
        s.status(404).end();
    }
})

var httpsOptions={
    key: Fs.readFileSync(Path.join(__dirname,'self-private-key.pem')),
    cert: Fs.readFileSync(Path.join(__dirname,'self-certificate.pem')),
    ca: [ Fs.readFileSync(Path.join(__dirname,'ca-certificate.pem')) ],
    requestCert:true,
    rejectUnauthorized:false   //Disable automatic authentication checking.
}

Https.createServer(httpsOptions,app).listen(app.get('port'))

Top Page

Economizing Technology > Hello HTML5 Offline Cache: NodeJS+Express Minimal Example