Home > DeveloperSection > Articles > Developing Offline Web Application using HTML5

Developing Offline Web Application using HTML5


HTML HTML5  Web Application 
Ratings:
0 Comment(s)
 2238  View(s)
Rate this:

Developing Offline Web Application using HTML5

Hi everyone in this article, I’m explaining about offline web application using HTML5.

Description:

I have recently been working on a fairly complex web application which has the requirement to function both online and off-line. For both off-line web pages and content, the HTML5 Manifest is the best way to go for off-line functionality. However, I quickly realized that maintaining a list of all individual content items for a complex website can become very cumbersome. To address this challenge, I have automated the process of creating the manifest file. However, the file is only generated when the website is running in DEBUG mode. Once the site has been published in release mode, this process only uses the last version of the Manifest file that was created. This enhances the performance of the published website while ensuring that the manifest is up to date with all your latest website content modifications when working in DEBUG mode. In addition, the process includes several features for including or excluding certain website content by both directory and file. Manifest versioning can also be handled manually or in automated fashion depending on your requirements.

For those of you who have never experienced making an ASP.NET or MVC application available off-line before, here are the basic steps:

Step 1:

Open Visual studion >> file >> new >> Website

Select ASP.NET Empty Website >> Give Application Name “OfflineWebSiteApp” >> Click Ok

Step 2:

Add 2 html file in your application

Index.html

<!DOCTYPE html>

<html manifest="Manifest.ashx" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

</head>

<body>

    <h1>Hello Index</h1>

    <a href="About.html">About</a>

</body>

</html>

About.html

<!DOCTYPE html>

<html manifest="Manifest.ashx" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

</head>

<body>

    <h1>Hi About</h1>

    <a href="Index.html">Index</a>

</body>

</html>

 

Step 3:

Create manifest file

 

The Manifest file is mostly a text file containing a list of all the website content (i.e. pages, images, scripts etc…) which are required to make the website function off-line. Basically, everything contained in the Manifest will be cached on the user’s local computer so the website will function when it is not connected to the internet. My intent with this article is not to go into detail on how to manually create a Manifest file or spend a lot of time explaining each section of the Manifest file. Suffice it to say that itemizing every piece of content on your website can be very time consuming and error prone.

 

Now add 2 Manifest file

1.       Manifest.txt

2.       Manifest.ashx

 

Manifest.txt:

 

Manifest.ashx:

<%@ WebHandler Language="C#" Class="Manifest" %>

 

using System;

using System.Web;

 

public class Manifest : IHttpHandler

{

    const string FileTypes = "*.aspx;*.htm;*.js;*.css;*.gif;*.png;*.jp*g;*.ico;*.txt;*.tif";

    /// <summary>

    /// Determines the version number contained in the Manifest.  This could also be set

    /// to something

    /// dynamic such as the date, depending on your requirements.

    /// </summary>

    const string ManifestVersion = "v1";

    /// <summary>

    /// A list of folder names in the root directory to include in the Manifest file.

    /// </summary>

    System.Collections.Generic.HashSet<string> includeFolders = new System.Collections.Generic.HashSet<string> { "css", "elements", "inc" };

    /// <summary>

    /// A list of file names in any folder to exclude from the Manifest file.

    /// </summary>

    System.Collections.Generic.HashSet<string> excludeFiles = new System.Collections.Generic.HashSet<string> { "Manifest.txt" };

 

    public static bool IsDebug

    {

        get

        {

            bool debug = false;

            try

            {

                #if DEBUG

                  debug = true;

                #endif

            }

            catch

            {

                debug = false;

            }

            return debug;

        }

    }

 

    public void ProcessRequest(HttpContext context)

    {

        HttpRequest request = context.Request;

        HttpResponse response = context.Response;

        System.Text.StringBuilder SB = new System.Text.StringBuilder();

 

        if (IsDebug)

        {

 

            response.ContentType = "text/cache-manifest";

 

            SB.AppendLine("CACHE MANIFEST");

 

            SB.AppendLine("# " + ManifestVersion);

            SB.AppendLine("# Root Path: " + request.PhysicalApplicationPath);

 

            SB.AppendLine();

 

 

            SB.AppendLine("CACHE:");

 

            SB.AppendLine("# Jquery Libraries");

            //Add jquery entires to the mainfest file.

            SB.AppendLine(@"http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js");

            SB.AppendLine(@"http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js");

            SB.AppendLine();

 

            SB.AppendLine("# Site Content");

            string[] filePatterns = FileTypes.Split(new string[] { ";" }, StringSplitOptions.RemoveEmptyEntries);

            System.Collections.Generic.List<string> cacheFileList = new System.Collections.Generic.List<string>();

 

            foreach (string filePattern in filePatterns)

            {

                cacheFileList.AddRange(System.IO.Directory.GetFiles(request.PhysicalApplicationPath, filePattern, System.IO.SearchOption.AllDirectories));

            }

 

            cacheFileList.Sort();

 

            foreach (string filePath in cacheFileList)

            {

                string path = String.Format("{0}/{1}", request.ApplicationPath, filePath.Replace(request.PhysicalApplicationPath, "").Replace(@"\", "/"));

                char[] del = new char[] { '/' };

                string[] folder = path.Split(del, StringSplitOptions.RemoveEmptyEntries);

 

                if (folder.Length <= 1 || includeFolders.Contains(folder[0]))

                {

                    path = path.Substring(2);

                    if (!excludeFiles.Contains(path)) SB.AppendLine(path);

                }

            }

 

            //Add NETWORK section to the mainfest file.

            SB.AppendLine();

            SB.AppendLine("NETWORK:");

            SB.AppendLine("http://*");

            SB.AppendLine("https://*");

 

            //Create an updated manifest file

            using (System.IO.StreamWriter writer = new System.IO.StreamWriter(request.PhysicalApplicationPath + "Manifest.txt"))

            {

                writer.Write(SB.ToString());

            }

        }

 

        //Create a response from the contents of the Manifest.txt file.

        //This file was dynamically created by this process, if in DEBUG mode.

        context.Response.ContentType = "text/cache-manifest";

        context.Response.WriteFile(context.Server.MapPath("Manifest.txt"));

    }

    public bool IsReusable

    {

        get

        {

            return false;

        }

    }

 

}

Step 4:

Add a reference to the Manifest on any web page that you would like to be available off-line:

 

The Manifest reference should be added to the <html> tag for all web pages that will be functional off-line. This was the easiest part of the process. My reference was created by pointing to the Generic Handler which is responsible for serving up the Manifest file. However, if you chose to add the Manifest mime-type to your web.config file, I believe you could also point directly at a text file which contained a valid Manifest as well. Here is what the <html> manifest tag looks like:

<html manifest="Manifest.ashx">

Manifest.ashx above is the name of the Generic Handler I created in my ASP.NET project. (Right click on your visual studio project name, add new item, select Generic Handler from within the Web template list)

 

Now run our application:

Output:

1. When Application Run First Time you can go any page

 

2. After close iis server we can go to any page


In my previous post i'll explain about Crud Operations in MVC Using (DB First Approach)


Don't want to miss updates? Please click the below button!

Follow MindStick