Search code examples
htmlinternet-explorercachingwebbrowser-controlcache-manifest

Cache Manifest with Windows Forms WebBrowser control (Visual Studio)

I am using the Windows Forms WebBrowser control to display a web application that I am also writing. The Web Application is using the HTML5 Cache Manifest functionality which I have got working fine when I call the page up in Chrome and IE (V11). However when I test the Cache Manifest in my WebBrowser control it does not work.

My understanding is that the WebBrowser control uses the latest local instance of IE for rendering/processing - however it does not like the Cache Manifest functionality. My cache manifest (cache.appcache) file contains the following:

CACHE MANIFEST
#V1.6

CACHE:
Default.aspx

NETWORK:


FALLBACK:
Error.aspx

and the rest of the project is pretty standard.

I did have to update the MIME of IIS to recognize the appcache extension and this has been cast as: text/cache-manifest

Any help anyone can give on this would be massively appreciated! I have looked at the possibility of using other Web Broswer controls in the project but really want to keep things as simple as possible... if possible!

Thanks!

Solution

  • Got it! for anyone else that might need some help with appcache inside a .net webcontrol.

    below code is a sample I was testing with. the code covers the aspx page, javascript, webconfig and appcache file.

    the javascript also has some event handlers to display its progress.

    the meta tag in the aspx page was a key player - without it, it just didn't work.

    don't forget, the nature of appcache is to download the changes the 1st time you visit the site, then display changes on the next visit.. you can intercept any changes and display automatically via the event handlers if you wish.

    also something else that caught me, avoid using localhost to visit the page, (only seems to be a problem in chrome), the appcache doesn't seem to work the same way.. you really want to use an IP address: eg: don't use: http://localhost/web/index.aspx use: http://10.1.1.4/web/index.aspx

    one last thing - filename case sensitivity! I noticed that the appcache contents relies on exact case - so i just made sure all my files are in lowercase. (appcache file, aspx, js, images, everything!)

    hope it helps - good luck all!

    #### ASPX Page (file: index.aspx) ##### 


    <html manifest="index.appcache">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <title></title>
</head>
<body>
    <div>index.aspx--v1</div>
    <img src="./images/data_replace.png" />
               <textarea id="Textarea1" 

        style="position: absolute; font-family: Arial; font-size: 10pt;
                    width: 277px; height: 360px; margin-top: 2px; text-align: left; top: 103px; left: 18px; z-index:1000;"></textarea>

</body>

<script type="text/javascript" src="index.js"></script>

</html>


###### JavaScript (file: index.js)  ######


function $get(id) {
    return document.getElementById(id);
}


function fnLoad() {

setTimeout(function () { alert("hello"); }, 1000);

if (window.applicationCache) {
    var appCache = window.applicationCache;
    appCache.addEventListener('error', appCacheError, false);
    appCache.addEventListener('checking', checkingEvent, false);
    appCache.addEventListener('noupdate', noUpdateEvent, false);
    appCache.addEventListener('downloading', downloadingEvent, false);
    appCache.addEventListener('progress', progressEvent, false);
    appCache.addEventListener('updateready', updateReadyEvent, false);
    appCache.addEventListener('cached', cachedEvent, false);
}
function appCacheError() { $get('Textarea1').value = $get('Textarea1').value + "\nerror" }
function checkingEvent() { $get('Textarea1').value = $get('Textarea1').value + "\nchecking" }
function noUpdateEvent() { $get('Textarea1').value = $get('Textarea1').value + "\nnoupdate" }
function downloadingEvent() { $get('Textarea1').value = $get('Textarea1').value + "\ndownloading" }
function progressEvent() { $get('Textarea1').value = $get('Textarea1').value + "\nprogress" }
function updateReadyEvent() { $get('Textarea1').value = $get('Textarea1').value + "\nupdateready" }
function cachedEvent() { $get('Textarea1').value = $get('Textarea1').value + "\ncached" }


}

fnLoad();


#### Web.Config #####
<system.webServer>
    <staticContent>
       <mimeMap fileExtension=".appcache" mimeType="text/cache-manifest"/>
    </staticContent>
  </system.webServer>

#### Appcache File (file: index.appcache) ####
CACHE MANIFEST
# v1.1
CACHE:
index.js
images/data_replace.png
NETWORK:
*