Build an ASP.Net web app with offline functionalit

Question

I'm in the process of building an asp.net (3.5) web app and was wondering if you knew of any way I could do it so that there would be some offline functionality.

This is needed as people will be able to 'install' the web app on their device (using the 'Add to home screen' function on an iPhone for example) and then use the app when they are offline; the usage would only be limited (there would be no need for server calls at this point either).

Can this be done with an .aspx page?

Edit- .manifest added:

CACHE MANIFEST
index.aspx

/logo.png
/main.css
/main.js

Edit no.2-

We have it working offline, in a fashion; it works when in safari but we don't want it in safari, we want it as a standalone app. When we try to run it like this we get the 'can't connect to server error'. Is this possible with a .aspx page?

Edit no.3 -

We've got this to work using a .html page but still not yet with an .aspx

Edit no.4-

It's now working, although we're unsure why! We added the index.aspx to the 'network' section of the cache.manifest last week (which didn't work last week!) which may have helped but once I know for sure I'll update you with what actually happened!

Thanks to all for your help!

Answer 1

For offline HTML5 applications with ASP.NET, see this link and this link.

For offline functionalities, there are some alternatives:

01 - If you need to store small amounts of data in the offline application, and security is not a big concern, you can use HTML5 Web Storage (link, link, link, link, link, and take a look at CanIUse for understand browser version support).

The main disadvantages are that it lacks in security, is key-value based (no complex structures) and there is a big limitation in storage size (5MB for most browsers).

---

02 - If you need larger amount of data, you can look at IndexDB (link, link, link and CanIUse) or Web Sql (link, link, link and CanIUse for browser support).

The main disadvantages of Web SQL are that it is not supported by Firefox an IE. Also, it is deprecated by W3C.

IndexDB is good (link), but it seems like ios still doesnt support it (see canIUse).

For approaches 1 and 2, you can make a responsive design or a dedicated mobile web site in your ASP.NET application (link).

---

03 - (greater flexibility demands more effort) Implement an Web Service in your ASP.NET application and a mobile native app applying concepts of Occasionally Connected Applications (more info: link, link)

• ASP.NET Web Application => For the web application, expose a Web Service with services related to the offline functionality.

• Mobile application => Implement a native mobile app (e.g., develop an app for android and iphone) with a database for the application. You then create the offline functionality in the mobile app that will use its own database to read and write (locally) data that must be available offline.

You then implement a silent synchronization mechanism in the mobile app that relies on internet (e.g. a recurrent thread) that will search for updates by accessing the ASP.NET application via Web Service. This sync mechanism will send the data that was stored locally and recover data from the Web Service that can be useful for the offline functionality.

---

Hope it helps.

Answer 2

Yes that can be done with ASP.NET, because ASP.NET renders as an HTML page in the client's browser and offline functionality is a pure JavaScript/Html functionality. Here is an article by Stephen Walther showing one way to do it.

Answer 3

A way to do this -although I haven't had the chance to actually do it- would be using one of the new features of HTML5: the Cache Manifest.

You can read a very good example of this here: http://www.html5rocks.com/en/tutorials/appcache/beginner/

Answer 4

Yes. This can be done as others have said, using the Cache Manifest.

What I would suggest doing is creating a handler to generate the cache manifest, which can be dynamic.

One thing that is painful about the cache manifest file is that unless that file changes, updates will not take place. This is where the handler comes in. Add a comment section with # as the comment character, and update a timestamp after that

#2013-08-08 1:53:36 PM 'This is your comment section

If this is generated by a handler, you can store in the DB when each user's page may have updated (This making it dynamic while still caching it)

One important thing to keep in mind while using a cache manifest:

The files that are cached must match the exact query string of those being accessed. This appears to be case-sensitive on some devices, and any query strings that exist on one MUST exist exactly the same on the other, so you need this foresight when generating your cache manifest files.