Creating HTML5 offline app with perisistant storage

Question

I have to create HTML5 application that downloads content when you have internet connection. After that you can loose connection and keep working on it. When connection is available agian it should synchornise all data with server. It should persist data over restarting program/browser. I think Slack and Visual Studio Code are written in this way.

According to my research I have to use the Manifest file to download recourses and use File API

For now I found that Chrome devTools are best for this purpose.

Have you other ideas how can I create such application? The important thing is it should be cross-platform.

Answer 1

Did you took a look at NW.js?

It is a compact framework to build html applications, works on linux/win/OSX.

Answer 2

Here are some of my experiences working with this kind of apps:

• To create a cross-platform HTML5 mobile App, you can use Apache Cordova. There are a lot of pugins for cordova that have access to your device, e.g. the network-plugin that can read the connection type (wifi/cellular) or online-status. Therefore this is certainly a better solution than a classic Website.

• In order to manage your Data on your application locally on the phone, you can use a single-page Javascript MVC-Framework. EmberJS together with Ember-Data has great features to manage models and model-relationships. There's a localStorage adapter that allows you to use HTML5 localStorage without any additional configuration. (There's even a ember-sync project that meets your requirements, but since it's in alpha phase you probably don't want to use it in production)

• as I said above, HTML5's localStorage is probably what you want to use to persist data on the user's phone. However, if your data gets too big for localStorage (~ >5MB) you can rely on cordova's SQLite-plugin. You won't need to use the File-API by yourself at all.

• As you have pointed out, the chrome dev-tools are a great way for debugging your application. They work flaweless for cordova web-views. Also, Safari has remote-debugging capabilities for iOS devices. But the best thin is: You can write and debug most of your application in your browser since it is HTML/JS/CSS-based. Ember has improved it's error handling tremendously over the last releases and with google chrome's extention ember-inspector also helps a lot in many cases.

In general, since cordova used to be painful sometimes, it came to an state here you can work with it in a very productive and efficient way. The same goes for Ember and Ember-Data. Just give it a try. Good luck!