Table of Contents
- 1. WebApp Directory structure
- 2. Sample App
- 3. Dreamhost servers
- 4. Offline
- 5. Crazy Maik
- 6. Actions and Commands
- 7. session fragment
- 8. Network
- 9. functionality
- 10. printing
- 11. HitiPPR_GetPrinterInfo
- 12. PrintingPhotoUtility
- 13. Network Discovery
- 14. update yii apps
- 15. ACT I. Scene I. Verona. A...
- 16. Scene II. A Street.
- 17. Scene III. Capulet's house.
- 18. Scene IV. A street.
- 19. Scene V. Capulet's house.
- 20. PROLOGUE
- 21. ACT II. Scene I. A lane b...
- 22. Scene II. Capulet's orchard.
- 23. Scene III. Friar Laurence...
- 24. Scene IV. A street.
- 25. Scene V. Capulet's orchard.
- 26. Scene VI. Friar Laurence'...
- 27. ACT III. Scene I. A publi...
- 28. Scene II. Capulet's orchard.
- 29. Scene III. Friar Laurence...
- 30. Scene IV. Capulet's house
- 31. Scene V. Capulet's orchard.
- 32. ACT IV. Scene I. Friar La...
- 33. Scene II. Capulet's house.
- 34. Scene III. Juliet's chamber.
- 35. Scene IV. Capulet's house.
- 36. Scene V. Juliet's chamber.
- 37. ACT V. Scene I. Mantua. A...
- 38. Scene II. Verona. Friar L...
Offline
OpenBook utilizes two HTML5 techniques to realize offline capabilities:
- AppCache
- LocalStorage
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:
CACHE MANIFEST
//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js
//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css
/assets/bdbf088/css/openbook.css
/assets/bdbf088/fontello/css/fontello.css
/assets/bdbf088/js/global.events.js
/assets/bdbf088/js/jquery.mousewheel.js
/assets/bdbf088/js/plug.drop.message.js
/assets/bdbf088/js/plug.interpret.js
/assets/bdbf088/js/plug.tool.js
/assets/bdbf088/js/plug.openbook.js
/assets/bdbf088/js/plug.offliner.js
NETWORK:
*
FALLBACK:
/ /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:
<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' ) {
offliner.renderCachedPage();
}
});
</script>
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.
