Thursday, July 26, 2012

HTML5 & Offline Rocks

Even though I know that the HTML 5 standards and features are slowly becoming old news, there are still a number of features that we haven't incorporated into a lot of projects until now.

So after doing some research on the topic of Offline applications and how to use the local storage I set out to build a simple proof of concept.


Using the information I found on the following sites :

http://www.code-magazine.com/Article.aspx?quickid=1112051

http://www.w3.org/TR/offline-webapps/#offline

http://html5demos.com/html5demo.appcache

http://www.html5rocks.com/en/tutorials/webdatabase/todo/

I was quickly able to create a simple project that allows for users to register themselves.
Registration is then handled by a manager class that does nothing more than append to a file.

If you are in offline mode however, the system still allows for the pages to load and to register. Once the internet connection is recovered, the page will synchronize the registrations to the manager, in result adding the registrations to the flat-file.

Some code snippets below :

//Sync to server


function syncToServer() {
            for (var i = 0; i < localStorage.length; i++) {
                var model = getModel(i);
                if (model.IsDirty) {
                    $.post("/home/RegisterSubscription", model,
                            function (data) {
                                var key = data.Key;
                                var m = getModel(key);
                                m.IsDirty = false;
                                localStorage.removeItem(key);
                                logMessage("'" + m.Name + "' saved to server");
                            });
                }
            }
            logMessage("Sync to server complete");
        }

//Save locally


function saveToLocal() {
            var model = getModel(subscriberIndex);
            model.IsDirty = true;
            model.Name = $("#Name").val();
            localStorage.setItem(subscriberIndex, JSON.stringify(model));
            logMessage("'" + model.Name + "' saved locally.");
            subscriberIndex++;
            $("#Name").val = "";
        }

//Check statusses


function reportOnlineStatus() {
            var status = $("#onlineStatus");

            if (isOnLine()) {
                status.text("Online");
                status.removeClass("offline").addClass("online");
            }
            else {
                status.text("Offline");
                status.removeClass("online").addClass("offline");
            }
        }

//React to cache and state events


window.applicationCache.onupdateready = function (e) {
            applicationCache.swapCache();
            window.location.reload();
        }

        window.addEventListener("online", function (e) {
            reportOnlineStatus();
            syncToServer();
        }, true);

        window.addEventListener("offline", function (e) {
            reportOnlineStatus();
        }, true);



Creating a viable Poc took me approx 2 - 3 hours in asp.net MVC with Razor in Visual Studio.
Feel free to contact me to get the entire code base of this project.
All in all fun to see how easy this is.

No comments:

Post a Comment