Unable to open local file using cordova inappbrowser on windows 8.1 platform

Question

I am developing a phone gap application and we've recently added support for the windows 8.1 platform. The application downloads/creates files which are saved to the device using the Cordova FileSystem API.

I have successfully saved a file to the device using a URL which looks like this

ms-appdata:///local/file.png

I have checked on my PC and the file is viewable inside the LocalState folder under the app's root folder. However, when I try to open this file using inAppBrowser nothing happens; no error message is being reported and none of the inAppBrowser default events fire.

function empty() { alert('here'); } //never fires
var absoluteUrl = "ms-appdata:///local/file.png";
cordova.InAppBrowser.open(absoluteURL, "_blank", "location=no", { loadstart: empty, loadstop: empty, loaderror: empty });

I have verified that the url is valid by calling the following built-in javascript on the url

Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri).done(function (file) {
                debugger; //the file object contains the correct path to the file; C:\...etc.
            });

Also, adding the url as the src for an img tag works as expected.

I have also tried attaching the inAppBrowser handlers using addEventListener("loadstart") etc. but none of them are firing either. However, when I try to open "http://www.google.com" the events do fire and the inAppBrowser pops up on the screen.

After inspecting the dom I can see that the inAppBrowser element has been added, but it doesn't appear to have a source attribute set

<div class="inAppBrowserWrap">
    <x-ms-webview style="border-width: 0px; width: 100%; height: 100%;"></x-ms-webview>
</div>

I have looked at other questions such as this one but to no avail. I have verified that

a) InAppBrowser is installed

b) deviceReady has fired

I have also tried changing the target to "_self" (same issue) and "_system" (popup saying you need a new app to open a file of type msappdata://) and I'm running out of ideas. Has anybody come across similar issues?

Answer 1

I had a similar problem. My cordova app downloads a file and then opens it with native browser (so that images, PDF files and so on are properly handled).

In the end I had to modify InAppBrowserProxy.js class (part of InAppBrowser plugin for Windows platform).

This is the code that opens the file (plain JavaScript):

// This value comes from somewhere, I write it here as an example
var path = 'ms-appdata:///local//myfile.jpg';

// Open file in InAppBrowser
window.open(path, '_system', 'location=no');

Then, I updated InAppBrowserProxy.js file (under platforms\windows\www\plugins\cordova-plugin-inappbrowser\src\windows). I replaced this code fragment:

if (target === "_system") {
    url = new Windows.Foundation.Uri(strUrl);
    Windows.System.Launcher.launchUriAsync(url);
}

By this:

if (target === "_system") {
    if (strUrl.indexOf('ms-appdata:///local//') == 0) {
        var fileName = decodeURI(strUrl.substr(String(strUrl).lastIndexOf("/") + 1));
        var localFolder = Windows.Storage.ApplicationData.current.localFolder;

        localFolder.getFileAsync(fileName).then(function (file) {
            Windows.System.Launcher.launchFileAsync(file);
        }, function (error) {
            console.log("Error getting file '" + fileName + "': " + error);
        });
    } else {
        url = new Windows.Foundation.Uri(strUrl);
        Windows.System.Launcher.launchUriAsync(url);
    }
}

This is a very ad-hoc hack, but it did the trick for me, and it could be improved, extended, and even standarized.

Anyway, there may be other ways to achieve this, it's just that this worked for me...

Answer 2

After more searching, it seems that the x-ms-webview, which is the underlying component used by PhoneGap for Windows only supports loading HTML content. This Microsoft blog post on the web view control states that

UnviewableContentIdentified – Is fired when a user navigates to content other than a webpage. The WebView control is only capable of displaying HTML content. It doesn’t support displaying standalone images, downloading files, viewing Office documents, etc. This event is fired so the app can decide how to handle the situation.

This article suggests looking at the Windows.Data.Pdf namespace for providing in-app support for reading PDFs.