Using the HybridWebApp Framework

If you'd like to go lower level you can install the framework itself directly and bypass the controls. Note that you will need an implementation of IScriptInvoker and IBrowser which BrowserWrapper from the toolkit conveniently implements for you.

To install using NuGet: Install-Package HybridWebApp.Framework

Basic Usage

//BrowserWrapper is an implementation of IBrowser and IScriptInvoker tied either to WebBrowser or WebView (depending on WP8/WP8.1 or Universal App)
var browserWrapper = new BrowserWrapper(WebView);

var interpreter = new Interpreter(browserWrapper);

var webRoute = new WebRoute(interpreter, browserWrapper);
webRoute.Root = new Uri("http://example.org");

//map all route changes so that the framework, app.js and app.css are loaded each time (they are flushed on navigation)
webRoute.Map("/", async (uri, success, errorCode) =>
{
    if (success)
    {
        await _Interpreter.LoadFrameworkAsync(WebToHostMessageChannel.IFrame);
        await _Interpreter.LoadAsync("ms-appx:///www/js/app.js");
        await _Interpreter.LoadCssAsync("ms-appx:///www/css/app.css");
    }
    else
    {
        //TODO: handle this somehow, ie: show offline overlay
    }
});

Messaging

Messaging back and forward between the webpage and the host application is of critical importance if you want to create a native feeling app. This differs slightly with the 8.1 OS family. See Important note about Windows Phone 8.1 & Windows 8.1 for more detail.

In general, messaging follows the below pattern where Host is the host native application and Client is the website.

From Host to Client

  interpreter.Eval("app.doSomething();"); //call a known function defined in app.js

From Client to Host

In app.js:

  app.doSomething = function () {
    var navItem = {};
    navItem.href = "http://example.org";
    navItem.title = "Homepage";
    
    var msg = {};
    msg.type = 'something';
    msg.payload = JSON.stringify(navItem);

    framework.scriptNotify(JSON.stringify(msg));
}

In the host app:

//listen for the iFrame navigation event, this is where the messages will be delivered
WebView.FrameNavigationStarting += (sender, args) =>
{
    if (!uri.OriginalString.Contains(FrameworkConstants.MessageProxyPath) || uri.OriginalString.EndsWith(FrameworkConstants.MessageProxyPath))
            {
                return;
            }

            //process message
            var encodedMsg = uri.AbsolutePath.Replace(FrameworkConstants.MessageProxyPath, string.Empty);
            var jsonString = System.Net.WebUtility.UrlDecode(encodedMsg).Replace("/\"", "\\\"");
            var msg = await Task.Factory.StartNew(() => JsonConvert.DeserializeObject<ScriptMessage>(jsonString));

    switch (msg.Type)
    {
        case "something":
            {
                var navItem = JsonConvert.DeserializeObject<NavItem>(msg.Payload);
                break;
            }
    }

    //cancel navigation
    args.Cancel = true;
}; 

Sample Code

See implementation of the HybridWebView control for WP8.x Silverlight or Universal Apps.