Crafting Hybrid WebApps

A good Hybrid WebApp is one that feels more app than website and most importantly, presents a compelling reason to use the app instead of opening the website in a browser.

Lets avoid creating websites in a box, ok?

In order to become masters of our craft and create a great experience for our end users, we’ll need a solid understanding of the website the app will be based on.

As we don’t always have access to server-side code or an ability to customise the delivery of the website to better suit our app, this typically results in a trip to the DOM Inspector and Javascript console to:

  1. Decide which elements don’t make sense in our app. These typically include footers, links to download apps (we’re already in an app!), navigation items, etc
  2. Decide which features of a native app, such as secondary tile pinning, background audio, etc make sense to support
  3. Look for nice JavaScript objects that we can reuse as data sources for our app (ie: model objects)
  4. Look for nice JavaScript functions that we can call to perform tasks such as authentication

The way I typically do this is a combination of the IE dev tools:

And Visual Studio DOM Explorer:

For Windows Phone I tend to use the Visual Studio DOM explorer more as it loads the site in the emulator, if you weren’t aware you can debug a website in any of the Windows Phone emulators via:

Once we have an idea of our integration, start mocking it up live in the tools mentioned above (IE Dev tools, DOM Explorer).

In practice my environment looks something like this when I’m starting to work on a new Hybrid WebApp (although usually across multiple screens):

Then as I work out a new style change, I copy it over to app.css. Likewise for scripts, which end up in app.js.

Website in a box

Someone recently asked me to describe what I mean by:

“Website in a box”

Consider the following image:

It’s an old English post box.

If we think about the primary purpose of a post box, it’s to allow the general public to place letters (messages) inside a slot (message channel), while preventing any of those letters being retrieved by members of the general public once they’ve been placed into the slot.

Now imagine:

  1. Those letters are commands
  2. The post box is the native host app
  3. The website lives inside the post box

With this in mind from the developers perspective, we can only send commands to the website – the website has no real ability to respond.

As a result, this limits the interaction model between user and app, thus I effectively have a website in a box.

HybridWebApp Framework

After some work I did last year took me deep into the realm of merging website + app, I decided to take some of those learnings and build a reusable framework and imaginatively named it the HybridWebApp Framework.

Below is a little history on the problems the framework overcomes and some links so you can start building great Hybrid WebApps today πŸ™‚

The problem

Most WebApps I saw being developed were little more than a website in a box – my challenge was to go beyond this in a significant way and create an app based on a website that really felt like an app as opposed to the typical 1 part WebView, 1 part CSS approach.

If we consider the interaction model between website and app in the most basic website in a box implementation, it looks something like this:

Unsurprisingly, this rarely results in a good end user experience as it is simply a recreation of the website with some minor tweaks, housed in a basic app. There is very little ability to interact with OS light up features under this model and even the most basic of tasks such as pinning secondary tiles is challenging.

This begs the question: Why would an end user want to use this type of app instead of the website when they offer largely the same experience?

The solution

From the above we can deduce that the website needs to be able to communicate easily back to the host app so that the host app can take advantage of the content!

This is already possible through the use of ScriptNotify, however there is one important caveat in Windows 8.1: the website and all of it’s content must be hosted over HTTPS, which isn’t always the case.

This is where the HybridWebApp Framework comes into play, creating a structured way for the website and the host to communicate bi-directionally, so our interaction model looks more like this:

In practice this means developers can write some JavaScript, executed on demand, that sends some data back to the host app.

With this in mind, lets imagine a recipe website as a hybrid app where we want to implement a secondary tile feature that pins the current recipe to the start screen of the device.

The implementation:

  1. The user taps the Pin icon in the app which invokes a JavaScript function app.pinRecipe()
  2. The app.pinRecipe() function reads the DOM, finds the title of the current recipe, the URI to the image and some other info that should be displayed on the tile
  3. The function then uses framework.scriptNotify to send a JSON object that contains this info to the host app which then converts the JSON into a C# model instance
  4. The host app takes that C# model and generates a secondary tile as usual.

Voila! Dynamically generated live tile is now on the start screen and user is happy.

Usage

The simplest way to use the HybridWebApp Framework and/or the Toolkit (Toolkit approach is strongly recommended) is to grab them from NuGet:

HybridWebApp.Framework

HybridWebApp.Toolkit (Recommended)

You can also reference the source directly, clone from the GitHub project located here: https://github.com/craigomatic/HybridWebApp-Framework

Rather than regurgitating what is already posted on the Wiki, please see https://github.com/craigomatic/HybridWebApp-Framework/wiki/HybridWebView-Control to get started building great Hybrid WebApps πŸ™‚

No Place Like Home v1.4 now available

The latest update to No Place Like Home recently passed certification and will be available in the Windows Phone Marketplace in your region shortly.

Free to try!

There has been some noise recently around the necessity of a trial mode for paid apps and while Alan Mendelevich of AdDuplex has a vested interested in seeing more ad supported trials, I think he does a good job being impartial in his post advocating trial apps:

Paid Windows Phone apps should have a Trial. Period.

The same way users expect non-game Windows Phone apps to be Metro, they expect paid apps to have trials. Installation of an app is supposed to always be free. Purchase decision comes later….It’s not about the amount of money, it’s about workflow.

Given the above valid points, the decision was made to make No Place Like Home available as both an ad supported trial and an ad free, paid version.

There are two limitations imposed in the trial version:

  • A small advertising panel on the distance screen
  • Public transport feature is unavailable

This gives everyone a chance to try out the app to see if it’s useful before making the decision to purchase.

New Features

While the main focus of this release was to introduce support for public transport and a trial mode, some additional features and fixes made it in also.

One such feature is a background image option that shows a satellite image of your home address:

This helps the app feel a little more personal and couples nicely with the live tile that does similar:

The UI has also been enhanced with subtle feedback on “stale” data and makes use of a number of simple transitions for various changes in the UI such as a travel mode availability, background image activation, etc.

Here’s a video of some of these features in action:

Unfortunately Vimeo decided to drop some frames so the last transition doesn’t show correctly, however it should give you some idea of the style of the app.

Download

Please give the app a try, would love to hear any feedback about the usefulness of it in the comments or via the contact form on this site.

Deep link: http://windowsphone.com/s?appid=27c5c9b2-9b3c-40f7-a90d-d738cafe493c

New apps released to marketplace

We’re proud to announce that we’ve released four new apps into the Windows Phone marketplace, all of which are available worldwide.

The four applications; ColourScape, ConvertUnits, TimeOfYourLife and NoPlaceLikeHome were built as part of a competition in under 10 days and as a result their initial feature set is fairly simple. Expect this to change over time!

Read on to find out a little about the apps and if you do download, an honest review in the marketplace would be appreciated πŸ™‚

NoPlaceLikeHome

NoPlaceLikeHome

Price: $0.99

Download: here
When you’re out and about it can be useful to know how far from home you are. This can be especially handy in a new city.

No Place Like Home allows you to specify your home address and gives an approximate time for travel by car or foot from your current location.

This can be useful when deciding how to get home after a long day or a night out on the town.

ConvertUnits

ConvertUnits

Price: Free

Download: here
Simple conversion application for converting between imperial and metric values.

The following units are supported:

  • Area
  • Length
  • Volume
  • Weight
  • Temperature

ColourScape



Price: Free

Download: here
Use the camera on your device to capture the colours from your world.

ColourScape makes it easy to snap a picture and find a colour value for any of the pixels in that image.

Useful for colour matching paint or for when you are out and about and see an inspirational colour you’d like to use!

TimeOfYourLife

TimeOfYourLife

Price: Free

Download: here
If you’ve ever wanted to keep track of your age, this is the app for you.

Takes a simple date of birth entry before presenting you with the number of years and days old you are.