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.

Comments

Post a Comment

Popular posts from this blog

Stupid exception: Device is not ready – System.IOException .net

-
When installing a Sitecore implementation from an development server environment to my laptop I ran into an absolutely stupid error. And it's great to have this kind of errors pop up from time to time even if you have been in the development world for so long and are still unable to fix it immediately. So, what error did I get? Device is not ready – System.IOException .net That is right... Nothing at all related to Sitecore. But then you start to doubt that as my stacktrace showed to Lucene [IOException: The device is not ready. ] System.IO.__Error.WinIOError(Int32 errorCode, String maybeFullPath) +1091 System.IO.Directory.InternalCreateDirectory(String fullPath, String path, Object dirSecurityObj, Boolean checkHost) +1413 System.IO.Directory.InternalCreateDirectoryHelper(String path, Boolean checkHost) +92 Sitecore.IO.FileUtil.EnsureFolder(String path) +128 Sitecore.ContentSearch.LuceneProvider.LuceneIndex.CreateDirectory(String folder) +100 Sitecore.Co...
Read more

Date Ranges in C#

-
DateRange utility class Throughout development there are a number of typical things that tend to recur. One of these is implementing a means to display start and end dates for News, Events, Symposiums, Lives etc etc Writing a little class that manages printing these dates seemed like a necessary task that just had to be done in order to make this tedious task be a thing of the past. Therefore I created my "DateRange" class (what's in a name) that should handle this entirely for you. The Idea The intriquities of displaying a datetime range should be an abstraction. You should only need to worry about passing the correct dates (start and end - if applicable) to the Utility class combined with an optional formatting. The class can be entirely configured through use of Enumerations for all the separate settings such as DayFormat etc. An additional class was used to implement this utility, the StringValue attribute class. You can easily use thie class to a...
Read more

Sitecore 8.2 in-depth preview + 8.3 update info and Sitecore Ecommerce information

-
Image
During the last Sitecore User group session here in Belgium, Ryan Donovan was featured as the central speaker. The following two topics were on the agenda: Sitecore Commerce An in-depth information on 8.2 and 8.3 I was impressed by the drive behind Ryan and his team(s). It emphasized the drive that is pushing Sitecore forward. Sitecore is putting a lot of effort in producing well hardened and tested product releases that bring new features and rich applications. Sitecore Commerce Previous Sitecore commerce solutions were structured around either SCpbCS and SCpbMD. However, the vNext commerce product has been newly developed from the ground up. Previously, the commerce solution focussed itself around the architecture of Commerce Server to provide and API, manage the products and to derive the entire feature set from. With this Commerce vNext solution, Sitecore has set forward the aspiration to become one of the market leaders in commerce. The fist aim is to focu...
Read more