Windows 8 WinJS HTML5 Application Cache

Question

I want to use HTML5 Application Cache  in windows 8 winjs application. Can i achieve html5 application cahce through iframe tag in winjs application?

---

shishir

Answer 1

Hi shishir,

If you wish to create an iframe loaded from locally-packaged content (like the HTML5 Application Cache that runs in the web context, you must use a different scheme, "ms-appx-web:". Content referenced via this scheme is loaded from the local package, but runs with the abilities and restrictions of the web context.

You could know more from here: http://msdn.microsoft.com/en-us/library/windows/apps/hh781215.aspx

Best Regards,

--James

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 2

Thanks James, But now my scenario is like i want to get some viewmodel from server side and cache using html5 application cache and display on some tag. When their is no internet connectivity then it take from application cache. Can it is possible in winjs windows ?

---

shishir

Answer 3

Hi shishir,

I have no such experience with your scenario, but I think you could download them first as the local ApplicationData, but note application data cannot be any executable or potentially executable code, such as script or CSS. It is intended for media such as images or videos and the content.

Hope this can help you

--James

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 4

Thanks.

Actually i try HTML5 Application Cache in Windows 8 Metros App using winjs.

I have done according to HTML5 docs to implement application cache, but i am facing issue with cache.

Every time my app is return "Uncached:0" cache status in my win 8 winjs. Its working fine in IE10 browser but in metro apps is not working.

But same one of the Microsoft online sample http://ie.microsoft.com/testdrive/HTML5/Cookbook/ is working fine in my app.

Can you please tell me correct way of implementing html5 application cache in windows 8 metro app.

 

---

shishir

Answer 5

I have gone through app cache for win8 app  but it was not working. It was able to cache in windows 8 but whenever I closed the app, restart the machine and hold some time and again start the app then the expected outcome is not come. 

But same code it was working in iOS5 and iOS6 both and all other browser including IE10(win7 and win8). But same thing is not working  in win8 app.

Every time I am getting cache status “0”i.e “UNCACHED” but other browser getting cache status “1” for “IDLE” and “2” for “CHECKING” that was our expected result.

Can you tell me approach for using HTML5 Application Cache in windows 8 

---

shishir

Answer 6

Hi shishir,

Sorry for the late response.

I cannot find any official document for how to implement HTML5 Application cache by WinJS. I'm not sure if you can do that or not.

And I'm interested with a word:"It was able to cache in windows 8 but whenever I closed the app, restart the machine and hold some time and again start the app then the expected outcome is not come."  If you tell me how you could do this, we can find a solution that keep the cache stay longer on the machine.

--James

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 7

Thanks James.

---

shishir

Answer 8

Below Steps for implementation for HTML5 Application in Windows 8 App:

1) First i have create a   .net web site project.

2) On that web site project, i have create html page.

3) HTML Code 

 <!DOCTYPE html>
<html manifest="appcache.manifest">
<head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <script src="Scripts/jquery-1.10.2.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
    <title>HTML5 Offline Form Demo</title>
    <script type="text/javascript">
        function load()
        {
            var cache = cacheStatus();
            document.getElementById("printConsole").innerHTML = cache;
            console.log(cache);
            //alert(cache + "--" + navigator.appVersion);
        }
        function sentData()
        {
            var FName = document.getElementById("inputTxt1").value;
            var LName = document.getElementById("inputTxt2").value;
            var data = JSON.stringify({ fName: FName, lName: LName });
            var url = "Default.aspx/GetData";  //Test/Default
            $.ajax({
                type: 'POST',
                url: url,
                data: data,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result)
                {
                    if (result)
                    {
                        url = 'display.html?name=' + encodeURIComponent(result.d);
                        document.location.href = url;
                    } else
                    {
                        //url = 'display.htm?name=ajay';
                        url = 'display.html';
                        document.location.href = url;
                    }
                    //window.location = "display.htm";
                },
                error: function (result)
                {
                    alert('error occured:' + result);
                }
            });
        }
        function cacheStatus()
        {
            var appCache = window.applicationCache;
            appCache.onerror = function (e)
            {
                alert(e);
            };
            switch (appCache.status)
            {
                case appCache.UNCACHED: // UNCACHED == 0
                    return 'UNCACHED';
                    break;
                case appCache.IDLE: // IDLE == 1
                    return 'IDLE';
                    break;
                case appCache.CHECKING: // CHECKING == 2
                    return 'CHECKING';
                    break;
                case appCache.DOWNLOADING: // DOWNLOADING == 3
                    return 'DOWNLOADING';
                    break;
                case appCache.UPDATEREADY:  // UPDATEREADY == 4
                    return 'UPDATEREADY';
                    break;
                case appCache.OBSOLETE: // OBSOLETE == 5
                    return 'OBSOLETE';
                    break;
                default:
                    return 'UKNOWN CACHE STATUS';
                    break;
            };
        }
        function reload()
        {
            location.reload(true);
            // text/cache-manifest
        }
</script>
</head>
<body onload="load();">
<h3>Test Application Cache</h3>
<div id="printConsole"></div>
<fieldset>
First Name: <input type="text" id="inputTxt1"/><br>
Last Name: <input type="text" id="inputTxt2"/><br>
<input type="button" value="Send" onclick="sentData();" />
    <input type="button" value="Reload" onclick="reload();" />
</fieldset>
</body>
</html>

4) After i have set MIME type in IIS and start the IIS.

5) I have url to access the HTML.

6) In windows 8 winjs app i have html page, on that page i have <iframe> tag. The url  i have render in <iframe>.Here url i am accessing for e.g "http://10.15.160.141:82/AppData/index.html".

7) Here server html code i have implemented cache status that every time given me on windows 8 app "UNCACHED" means application cache is not yet initialize.

8) But in other browser cache status always return "CHECKING" that was a expected behavior.

Let me know if you need any more information this.

---

shishir

Answer 9

Hi Shishir,

Ok, I read your steps, quite detail and thanks for this.

Windows Store app runs in a sandbox model, which means it cannot access to other system files, that's why everytime when you trying to fetch cache, it tells you "UNCACHED". 

But Windows Store app has its own Cache file. You can manually put your cache file in ApplicationData Folder as below, in the INetCache folder, try to put your cache file inside to see if it can work or not.

If this solution not work then the only thing I can tell you is that Windows Store app Does Not Support HTML5 Application Cache.

Best Regards,

--James

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 10

Thanks James.

This is working for me.

But now i manually put all the file in INetCache which is hidden. How exactly i resolved through different approach.

I don't want to every time to INetCache.Can you me different approach for this.

Please suggest me on this. 

---

shishir

Answer 11

Hi Shishir,

A bad news is INetCache does not provide us any privilege to modify from our app, which means we have to manually create a Cache file and save it in somewhere else.

I will suggest a C# solution but I think you could translate to JavaScript, the idea comes from a Chinese Blog:http://www.cnblogs.com/lyandy/p/3228272.html, bacially I will translate something for you. Download the sample form:Here. Select the left one "下载" to download the project.

Step 1, Use the LoadFromUriAsync to fetch a XML data

await XmlDocument.LoadFromUriAsync(new Uri("http://xxx")),"CachedFeed")

Step 2, Choose the MediaElement from the content

Content.GetElementsByTagName(MediaElementTag)

Step 3, Create a folder by OpenIfExist method, use the original name as the image name,

StorageFolder MediaFolder = await ApplicationData.Current.LocalFolder.CreateFolderAsync("Media", CreationCollisionOption.OpenIfExists);

CacheImage(new Uri(MediaElement.Attributes[0].InnerText), FileName);

Download the image by ReplaceIfExist var BackgroundDownloador,

public async static void CacheImage(Uri Source, string FileName)
        {
            try
            {
                StorageFolder MediaFolder = await ApplicationData.Current.LocalFolder.CreateFolderAsync("Media", CreationCollisionOption.OpenIfExists);
                                                
                StorageFile destinationFile = await MediaFolder.CreateFileAsync(
                    FileName, CreationCollisionOption.ReplaceExisting);
                BackgroundDownloader downloader = new BackgroundDownloader();
                DownloadOperation download = downloader.CreateDownload(Source, destinationFile);
                await download.StartAsync();
            }
            catch (Exception ex)
            {
            }
        }

Step 4 Save the xml that we have modified

var file = await ApplicationData.Current.LocalFolder.CreateFileAsync(Name, CreationCollisionOption.ReplaceExisting);
var data = Content.GetXml();
await FileIO.WriteTextAsync(file, data);

Step 5 using the Cache

            var CacedFeed = await Cache.GetCacheXML("CachedFeed");
            SyndicationFeed feed = new SyndicationFeed();
            feed.LoadFromXml(CacedFeed);
            GridView1.Items.Clear();
            foreach (var item in feed.Items)
            {
                GridView1.Items.Add(new Feed()
                {
                    Title = item.Title.Text,
                    Image = item.ElementExtensions.First(ee => ee.NodeName == "content").AttributeExtensions[0].Value
                });
            }

Best Regard,

--James

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 12

Thanks James.

I will try your step and after that i will let you know the result.

---

shishir

Answer 13

Hi James,

Can you pleas through this link http://msdn.microsoft.com/en-us/library/ie/hh673545(v=vs.85).aspx

---

shishir