How to implement offline capable Single Page Application with Breeze.js and HTML5 local storage

Question

I have working Single Page Application using Breeze.js for Data Access. It uses the Breeze.js to execute queries against the local cache and the data is requested only once at start up. Only the data updates are posted back on the server afterwards.

I am looking for a solution to make the application connection aware. If the mobile device does not have internet connection the changes will be saved locally with Breeze.js and HTML5 local storage. When the mobile device is back online the changes will be synched to the remote data storage.

Any guidelines how to implement that requirement? Thanks

Answer 1

Looks like the HTML5 provides 5MB local storage, which persists until cleaned and is useful for storing JSON values with XMLHttpRequest.

HTML 5 navigator.onLine property provides offline detection. True if online, false if not

 var nav = window.navigator;
 if(nav.onLine) {
    // do HMLHttpRequests etc
 }
 window.addEventListener('online', function() {   });
 window.addEventListener('offline', function() {   });

For more information check Building Hybrid Mobile Applications with HTML5

Answer 2

@mitaka pointed you to connection change detection.

For using BreezeJS to save entities to local storage, the "Export/Import" topic in the BreezeJS documentation provides valuable clues. The "exportImportTests.js" file in the "DocCode" sample demonstrates some of the techniques described there.