Table of Contents


OpenBook utilizes two HTML5 techniques to realize offline capabilities:

Some (which?) pages include the Offline script, which inserts an <iframe/> into the DOM.

$( function() { if ( /*!offliner.isOffline*/ navigator.onLine ) { offliner.addCachingIframe(); } });

The <iframe/> is makes the browser load the /site/fallback page:

<iframe src="/site/fallback#iframed" ... >

The hashtag is to allow testing (in JS) whether we are actually in the <iframe/> or whether we have a GET request for a page and are falling back to site/fallback. The /site/fallback age has the following source:

<!DOCTYPE html> <html lang="en-US" manifest="/offline.appcache" > <head> ...

This is the only page that includes the offline.appcache:




/ /site/fallback

The upshot is that * all the JS ad CSS assets are (permanently) cached. * if OpenBook is online, it will load he ages from the server * if OpenBook is offline, it will show the /site/fallback page

The fallback (is the only page) to include the fallback script:

        console.log("Parsing Fallback Script");
    $( function() {
            offliner.isOffline = true;
        // We only want to render the page if we're not in the hidden iframe
            if ( location.hash != '#iframed' ) {

So, when we are offline, the renderCachedPage() method will actually render the page. It does so by checking location.href which points to the original page being requested.

When we suitcase a book in Openbook, we actually cause the chapters (HTML ages) to be stored in LocalStorage, which is indexed by url. renderCachedPage() then checks the LocalStorage whether it contains the requested location.href. Is it does, it we replace the DOM with the stored HTML page. If not, it will show an offline error.