2

My application serves user created bundles of HTML pages for e-learning, also known as SCORM packages, and i'm trying to make that as fast as possible.

Loading page-by-page in iframes is quite slow, as pages may include high resolution graphics, animations, audio, video and so on.

Unfortunately pre-loading these pages is quite difficult, as they usually react to onLoad() events to start animations and interactions.

Without using applets or extensions, would it be possible to download the user bundle and serve it "in-browser" to the application?

Julio Faerman
  • 13,228
  • 9
  • 57
  • 75

2 Answers2

1

This is a common-enough task with the advent of fat clients built on Backbone.JS, Angular, Ember, etc. Clients request data (usually JSON), media, etc. from the server as opposed to pre-rendered HTML, and do rendering and resource management client-side. If you want to go this way so that you can support flexible offline mode the way you specified, you usually need a set of generic loaders and tools in your app cache manifest that will loading the more specific (user-specific, lesson-specific, etc.) resources on page load.

The first time your user opens your app, it should be in online mode, and your app will need to request the specific resources it needs to work well offline and store them in client-side storage (localStorage, indexedDB or what it's trying to replace - WebSQL, and fileSystem. There are many resources on the web on how to use each of these APIs.). This step can also be incremental, rather than a huge download of megabytes of data.

The next time your user opens your page, your app can attempt to load all the resources it needs from client-side storage before even calling the server. It will only need to call the server if it's missing some resources, or if it needs to get a fresher version of a resource, or of course if you need to write to the server. If you did a good job of loading all the resources it needed into client-side storage the first time, it can work decently in offline mode.

Mark Vayngrib
  • 974
  • 5
  • 14
  • That is the right direction... the problem is in the specifics. When loading a user defined page, what it does is unpredictable (think scripts, flash, etc). So the only way could think to to keep it working for sure would be to serve everything locally, but i couldn't find out how to do that without applets or extensions. – Julio Faerman Aug 02 '14 at 17:53
  • It's ok if it's unpredictable the first time or the first few times, as long as it's not unpredictable every time. You said that there's a user bundle you can download the first time. Once you have that in client-side storage, what's the problem? – Mark Vayngrib Aug 02 '14 at 18:18
  • This is a somewhat primitive example, but see how LinkedIn did it using localStorage - http://engineering.linkedin.com/mobile/linkedin-ipad-using-local-storage-snappy-mobile-apps – Mark Vayngrib Aug 02 '14 at 18:19
0

If your users are running modern browsers you could use the HTML5 cache manifest.

Creating a manifest file will get the browser to download and store the site locally and then the user may even visit it offline

http://en.wikipedia.org/wiki/Cache_manifest_in_HTML5

CJSewell
  • 183
  • 2
  • 8
  • That would hardly work, as the app would need to scan all links in the content packages to generate the manifest, and that may be quite dinamic and unpredictable. – Julio Faerman Aug 02 '14 at 11:15