miércoles, 5 de septiembre de 2012

HTML5 iPad App Offline + J2EE + Dynamic refresh

So HTML5 can now work offline, and what is useful about that? Well is really useful think that you need to do something, anything that require to be showed offline, for example a game or perhaps your client want to see some reports offline or you make an HTML5 site that wold be prefect as an app, but you do not what to go and put all that code in Java for android or in Objective C.

Well now you can make a you pages to work offline withe the new App Cache HTML5 feature, check out the HTML5 Rocks tutorial is great!

Now that you understand how HTML5 App Cache works you can see that the content that your app will produce will be same for any user, and also will be same all the time until the manifest file change, well I will provide a work arround for that and also for each user have different content.

HTML5 App Cache file need to have a change to reload all the content so we need a way to change that file each time that the user needs it and with out making a deploy.

How we are going to do that, very simple, first the manifest file will be a file produced by a servlet and this server will control the changes required to give each user the content that they require.

And that's it!!  the rest of the code is simple Struts, HTM5 configuration.

I will show you how this thing works and after that I will post the code for you be able to play with it.

I have Chrome on the left and FF on the right, and and Eclipse with Tomcat 7 on the back, they will sing up to the same App but they will be provided with personal content and they will request new content each time that the require.

So let sing up with FF user1 for FF and Chrome user1 for Chrome:

When you hit the button you will be redirect to a progress bar in home.html that will mark the progress of the content in the manifest file, in this experiment you can not see that progress because the process is to fast but in your project will be more content and you will look at it; after that you will be redirect to index.html that will show you the following options

The online option call a servlet that is on the network part of the manifest file so that file was not saved, the offline option call a servlet that was on the manifest file so that will be saved, and the last one that is to reload in demand the conten (like we said just changin the manifest file). Lets click on the online option. And we can see the content produced, that is different for each browse.

Now lest go to the offline option, you can see here the same content but this content is not retrived from the servlet like the online option this content was retrived from the HTML5 App Cache. NICE!!
So lets click to the last option that will increment the version and then load all the content, again you should see a progress bar but like is local and the content is really light weigh you can not see it, after that you you was redirected to index.html and then let see what online option have to show us.
What we see was just a small change in the version number as expected. The same change is in the offline option.
Until now all the test was done with the Tomcat on, but what if we turn it off and consult the online option?
The browser is not finding the URL as expected, and what if we consult the offline option.
The content is showed again as expected because we are not retrieving data from the server we are getting this data from the HTML5 App Cache.

About the code, this project was done with Spring MCV 3.1, Tomcat 7 and Eclipse; find the code here but with out the lib one that is heavy because all the jars.

Just in case here is the screen of the lib folder:
Let me know if you have any doubts of comments.

No hay comentarios:

Publicar un comentario