Turn your web into a Windows 10 app lightning fast with Hosted Web Apps (Project Westminster)


I am extremely loyal to the coffee chain I frequent.  They have a really nice loyalty system with a card that gives you 10% off and your 10th cup of coffee for free, and they handle this by sending you a text with a link to a one time use coupon page.  This is a system that works well for all mobile phones, but to be honest I rarely go to their web site so I never see any of their offers etc. 

If they did have an app I would pin it to my start screen to find out about their current offers, charge my loyalty card etc. but I realize that developing an app, let alone one for each platform might be a bit too much to handle and may not be worth their while.

What if they could publish their website to the app store and just augment it with some platform specific functionality? This would let them keep their code on the servers they are used to, continue developing in the tools and languages they are used to. There is no separate app to update and support, just the same web they already have, while still getting the benefits of app store presence and access to platform features.

Hello Hosted Web Apps, the artist formally known as Project Westminster.

Try it yourself – appifying Bing.com

1. Open Visual Studio 2015 (you can get the Community Edition for free from here)

2. Create a new JavaScript/Windows/Universal/Blank App (Universal Windows) 

3. Remove the css, js and WinJS folder and default.html.  We don’t need them, but do keep the images folder, it contains all the app logos etc.

4. Double-click on the package.appxmanifest file to open the app properties

5. On the Application tab, set the Start page to http://www.bing.com/ this is where the app will start

6. On the Content URIs tab, add http://*.bing.com/ – include – WinRT Access: none to the app. 

The include means that whenever you click a link that goes to anywhere on bing.com it will browse in the app, WinRT Access: none means that it does not have access to the Windows 10 features, but we’ll get to that later.

7. Run the app… that is literally how easy it is to create a hosted web app from an already existing web.

image

As you explore the app you will notice that as long as you stay within http://bing.com – showing search results, moving to the images section etc. you will stay within the app, as soon as you click a link you will launch a browser, this is because those URL are not included in the app which is neat since it clearly defines what is part of the app and not.

Technically, if you fixed up the logos to be your own, gave the app a nicer name etc. you could now publish this, but I wouldn’t recommend it unless you in fact own http://bing.com, but if this was your site instead, you could totally do that, and to update the app you would simply update your website. 

But I want more…

Great, but the whole point here was to do things like replace the SMSes and emails with toast notifications, and access all sorts of crazy Windows 10 features. Maybe Cortana integration.  The users expect rainbows and unicorns when they download an app, just the same ol’ web won’t do. 

Accessing a windows 10 feature is as easy as

1. adding a piece of javascript to the web site, and

2. setting WinRT Access: all in the app manifest to allow the page to access the feature. 

You can use pretty much any WinRT feature you want, like updating the calendar, or letting the user pick contacts, or the camera, or popping up toast notifications.

To pick a contact for example you would write something along the lines of

 

Code Snippet
  1. function PickAContact() {
  2.     if (typeof Windows !== ‘undefined’) {
  3.         var picker = new Windows.ApplicationModel.Contacts.ContactPicker();
  4.         picker.desiredFieldsWithContactFieldType.append(Windows.ApplicationModel.Contacts.ContactFieldType.email)
  5.         picker.pickContactAsync().done(function (contact) {
  6.             if (contact !== null) {
  7.                 var output = “Selected contact:\n” + contact.displayName;
  8.                 console.log(output);
  9.             }
  10.             else {
  11.                 console.log(“no contact was selected”);
  12.             }
  13.         });
  14.     }
  15. }

This code was taken from http://rjs.azurewebsites.net/ where you can also find code snippets for other common tasks.

The key here is that whenever your website runs in the context of an app it will have access to WinJS and Windows and the Windows.ApplicationModel etc. will be defined.  If you run this code in a browser, even on Windows 10, Windows will be undefined and the code won’t execute and then you would fall back to the normal web behavior.

If you want to try a more complete sample, try changing the bing app you created earlier so that it goes to http://contosotravel.azurewebsites.net/.  Just remember to also change the includes under Content URIs to include http://contosotravel.azurewebsites.net/ and make sure you set WinRT Access to All because otherwise the win 10 features won’t be available.

This is an example of the app in action but you should really experience it for yourself. 

image

If you want to see the code for Contoso it is available at https://github.com/seksenov/ContosoTravel

In summary… by making your website an app, the experience for your users can be greatly enhanced with very little code. And I can’t stress this enough… The best part is that when you want to update the app, or fix a bug you do that in the context of the web site so you don’t have to keep track of the app as a separate entity.  Updates to your app would just be features added to your web.

A few things to consider…

Hosted Web Apps use Edge, and while pretty much everything works in Edge, some things do not, like ActiveX controls or other plugins so make sure that your web is Edge compatible.

You may have noticed that you don’t have a browser bar, which means that you need to add code for back button support unless you have a SPA.  Here is a sample showing how you can handle backbutton clicks

You should include some static pages in the app in case the user doesn’t have network connectivity so you have something to fall back on and you can mix and match local and web content.

If you need to have more control in your app, you may want to look into using a web view in a standard UWP app instead.

Resources

MSDN Docs on Hosted Web APPs

Nathalies Assorted Hosted Web App Links

Peter Drougge’s blog series on Edge compatibility

Hosted Web Apps, integrating with Cortana and other demos

Comments (3)

  1. vicksjaipur says:

    Good to see you back, with the blogs……

  2. Vitor Canova says:

    Just for the for the sake of correctness in "…you can get the Community Edition for free from here…" there is not link.

    But sure is easy to found it.

  3. Paw says:

    But I wont more…
    Make it work in VS Code with cross-platform support.
    Now THAT would get me excited! 🙂

Skip to main content