Page 49 - MSDN Magazine, April 2017

Figure 1 Default Download Experience
need to be tested, reviewed and re-factored through code to align with users’ expectations. A few key scenarios are considered in the next sections to demonstrate different classes or objects available to developers while working with the Project Westminster tool and related code workflows. While porting the app to the UWP, it’s a good idea to consider integrating a few native features of the plat- form for a richer UX and an enhanced app experience. Here are some of the commonly implemented features by app developers:
• Contacts
• Cortana integration
• Live tiles
• Toast notifications
• Camera and microphone
• Photos library
• Rich graphics and Media Windows Runtime Stack • Sharing content with other apps
In this article, the focus is on integrating UWP features, such as Cortana and Live Tiles, for example, which help with activation of apps through voice-based commands and information delivery to the user. Thus, it enhances the overall UX with support of the UWP apps infrastructure. The latest Windows 10 features for developers Webpage(bit.ly/2iKufs6)providesaquickoverviewofmoreintegration
Figure 2 File Download JavaScript Code (Larger Files)
opportunities. The Web page, which is being converted to an app, provides information on the following:
1. Web application functionality features
a. File downloads
b. Session management or single sign-on
c. Can go to previous page through back button in a
stately way
2. UWP integration features
a. Live Tiles
b. Cortana
These features need to be considered while porting and refac-
toring to deliver a predictable experience for the app.
File Download Scenario
Most Web applications today enable file downloads for a variety of content. As shown in Figure 1, the default experience of file download in the browser is like clicking a button or hyperlink; the browser begins to download it and also saves the file to (mostly) rootdir:\users\username\\\\\\\\Downloads.
This happens partly because the browser is a native Win32 appli- cation running with full trust privileges and writes the file directly to the Downloads folder.
Now, consider the same scenario when the Web site is running in the context of an app (WWAHost.exe, to be specific) and the download button is clicked. What next? Most likely, nothing will happen and it will appear that the code simply doesn’t work. It might appear that the button isn’t responding or, perhaps, the file download has started, but where is it being saved?
WWAHost.exe is an app container for Web sites, which has a subset of features, compared to the browser. This subset of features
(function() {
if (typeof Windows !== 'undefined' &&
typeof Windows.UI !== 'undefined' &&
typeof Windows.ApplicationModel !== 'undefined') {
function WinAppSaveFileBGDownloader() {
// This condition is only true when running inside an app.
// The else condition is effective when running inside browsers.
// This function uses the Background Downloader class to download a file. // This is useful when downloading a file more than 50MB.
// Downloads continue even after the app is suspended/closed.
if (typeof Windows !== 'undefined' &&
typeof Windows.UI !== 'undefined' &&
typeof Windows.ApplicationModel !== 'undefined') {
var fileSavePicker = new Windows.Storage.Pickers.FileSavePicker();
// Example: You can replace the words EXTENSION and ext with the word PNG.
fileSavePicker.fileTypeChoices.insert( "EXTENSION file", [".ext"]);
// Insert appropriate file format through code. fileSavePicker.defaultFileExtension = ".ext";
// Extension of the file being saved. fileSavePicker.suggestedFileName = "file.ext";
// Name of the file to be downloaded. fileSavePicker.settingsIdentifier = "fileSavePicker1";
var fileUri =
new Windows.Foundation.Uri("<URL of the file being downloaded>");
fileSavePicker.pickSaveFileAsync().then(function (fileToSave) { var downloader =
new Windows.Networking.BackgroundTransfer.BackgroundDownloader(); var download = downloader.createDownload(
fileUri, fileToSave);
download.startAsync().then(function (download) { // Any post processing.
console.log("Done");
});
}); }
else {
// Use the normal download functionality already implemented for browsers, // something like <a href="<URL>" />.
} }
} })();
msdnmagazine.com
April 2017 35