Build an ASP.Net web app with offline functionality

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!

Eo

Is the file named 'cache.manifest' (iOS requirement) and its response type 'text/cache-manifest'? Are you sure you are not getting any 404s on those resources? – Stenosis

@pep Yep, the file is called 'cache.manifest' and the response type is also 'text/cache-manifest'. We've set the MIME type in IIS too. We're not getting any 404s either. It's very confusing! – Eo

I've worked on a full application using ASPXs with no caching issues on home screen apps or safari. Since you seem to be having a strange issue, it might be really helpful to update your answer with the HTML rendered to the browser so we can see exactly what is going on. You probably don't need to post contents like the body but if possible, post anything like doctype, headers, meta tags, etc. It looks like it should work - my last question was to make sure the bases are covered which you seem to be doing. – Stenosis

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.

Cody

Thanks for your response. We are using local storage for any data the user needs however the problem we are having is when we install the web app onto a device and then put the device into airplane mode we are unable to launch the app. We've tried using a .html page as the default page and that works fine, however with an .aspx page, it encounters the error described. – Eo

Answer 2

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/

Orgulous

By no fault of the answerer Icarus above, this has since been deprecated: en.wikipedia.org/wiki/Cache_manifest_in_HTML5 – Necrotomy

Answer 3

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.

Emmenagogue

Why the downvote? This answered the question and went in-depth as to how – Emmenagogue

Answer 4

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.

Grassland

Thanks- I've just tried adding the ashx handler but I'm still getting a 'Cannot open because it could not connect to the server' error. I'll update my initial post with my current .manifest file as I might not have go that bit right. – Eo