I’ll start right off with a caveat. I am not claiming that the solution presented below is best, optimal, good, or whatever term you want to use. I am hacking – yes absolutely 100% hacking – together an application on Windows 8 using HTML and WinJS. For this app, I needed some initial startup data that would then be refreshed immediately once the application was up and running. I also wanted to cache the new data, replacing the old data, and use that data on each subsequent startup. Let me flesh out my approach and hopefully it will give you enough detail to use in your application, or more importantly, make better. 
First, I needed data that would be available the first time my application was ever used. In my case, I had several different “data feeds” that I needed to have available at startup. For this example, we will just say that I need two – a list of upcoming events and a snapshot of my twitter feed. I would refresh both data sets after the app launched and replaced the old data it the new.
First, I need to get the startup data setup. To do this, in my Visual Studio project, I created a folder named ‘startdata’ (I excel at good names for resources). In this folder, I placed to text files – events.json and tweets.json. The events.json file contains data like this:
[
{
"Date": "Tuesday, February 19, 2013 11:00:00 AM",
"Title": "Hands-On Lab: Create Apps with HTML/JS",
"Location": "Online",
"RegistrationUrl": "https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032540779&culture=en-US"
},
{
"Date": "Tuesday, March 5, 2013 06:00:00 PM",
"Title": "NebraskaJS",
"Location": "What Cheer ",
"Address": "1111 N 13th Street, #106",
"City": "Omaha",
"State": "NE",
"Zip": "68102",
"RegistrationUrl": "http://www.meetup.com/nebraskajs/"
}
]
The tweets.json file was created by hitting https://api.twitter.com/1/statuses/user_timeline.json?screen_name=jabrand&count=20 and saving the file returned to my browser. Yes, the tweet data will be grossly out of date by the time a user launches my app, but the intent is to have SOMETHING to populate the UI while I refresh the data from the live feed.
I need to get these files copied to the user’s machine at launch. This will allow me to use these files, and all future updates, in the same manner. Basically, caching the last known good data each time the app runs. Do do this, I create an init() function that is called inside of the default.js activated handler…
function init() {
var promiseArray = [];
promiseArray[0] = WinJS.Application.local.exists('tweets.json').done(
function (found) {
if (!found)
{
return copyStartData('tweets.json');
}
}
);
promiseArray[1] = WinJS.Application.local.exists('events.json').done(
function (found) {
if (!found) {
return copyStartData('events.json');
}
}
);
return WinJS.Promise.join(promiseArray).then(
function () {
var loadArray = [];
loadArray[0] = WinJS.Application.local.folder.getFileAsync('tweets.json').then(
function (file) {
return Windows.Storage.FileIO.readTextAsync(file).then(
function (content) {
var tweets = JSON.parse(content);
storedTweets = new WinJS.Binding.List(tweets);
},
function (error) { });
},
function (error) { });
loadArray[1] = WinJS.Application.local.folder.getFileAsync('events.json').then(
function (file) {
return Windows.Storage.FileIO.readTextAsync(file).then(
function (content) {
var events = JSON.parse(content);
storedEvents = new WinJS.Binding.List(events);
},
function (error) { });
},
function (error) { });
return WinJS.Promise.join(loadArray); });
}
Basically, I create some promises that check to see if the cached data files have been stored locally (i.e., the app has run before). If a file is not local, I copy the start data from the application package:
function copyStartData(copyfile) {
return Windows.ApplicationModel.Package.current.installedLocation.getFolderAsync('startdata').then(
function (startData) {
return startData.getFileAsync(copyfile).then(
function (file) {
if (file) {
return file.copyAsync(WinJS.Application.local.folder);
}
});
});
}
I join those promises so I know that all of my app’s start data has been copied local before moving on to loading it. The next setup of promises do just that – load the cached data and save it into variables (storedTweets, for example) that would be available to other parts of the application. In my app, I expose the init() function and the variables from a WinJS-defined namespace, but you can do it however you want.
Now, I create a set of functions that let me fetch updates to each of the respective feeds. Below is what I do for the Twitter feed:
getTweets: function () {
if (isConnected()) {
return WinJS.xhr(
{ url: 'https://api.twitter.com/1/statuses/user_timeline.json?screen_name=jabrand&count=20' }).then(
function (response) {
return WinJS.Application.local.folder.getFileAsync('tweets.json').then(
function (file) {
var json = JSON.parse(response.responseText);
return WinJS.Application.local.writeText('tweets.json', response.responseText).then(
function () {
storedTweets = new WinJS.Binding.List(json);
return WinJS.Promise.as(storedTweets);
}
);
},
function (error) { }
);
},
function (error) {}
);
}
else {
return WinJS.Promise.as(storedTweets);
}
}
Since I return promises for both the init() function and the getTweets() function, it is easy to combine these operations with the extended splash screen approach.
Hopefully this helps…
Subscribe