CodeGuru content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.
Get up and running quickly with a Windows Phone app that builds on the effort you’ve put into creating your mobile website.
Table of Contents
Introduction
The Hybrid Web App sample
Customizing the Hybrid Web App sample
Creating a hybrid web app
Resources
Introduction
Smartphone users love apps! But developing apps for multiple platforms can be time-consuming. A great alternative might be a mobile website. Web developers are using HTML5 to create webpages that are more powerful and feature-rich than ever before. But a website is not as customizable as an app. Let’s look at some advantages to each approach to reaching your audience.
Mobile website advantages
Many businesses and organizations have developed websites specifically to meet the demands of a society more and more accustomed to doing just about every task with mobile devices. Mobile websites:
- Work across different mobile devices
- Are easily upgradeable
- Are searchable
- Leverage web development skills
Dedicated app advantages
Apps can be powerful and fast, but they are tied to a specific platform. You have to write your app for each platform on which you want it to be available. Despite this, dedicated apps for Windows Phone can have features that tip the balance in their favor, like:
- Pinning secondary Tiles to Start
- Live Tiles
- Local data on the phone itself
- Speech recognition
Apps must also pass certification to be included in the Windows Phone Store. This gives users confidence when downloading an app from the Store, but it may add to your development cost.
The hybrid web app: The best of both worlds
There’s an ongoing debate between developers about mobile websites versus dedicated mobile apps. How about a solution that provides the best of both worlds? This is the hybrid web app, and Windows Phone has it.
A hybrid web app gives you a presence in the Windows Phone Store with much less effort than building an app from the ground up, and it adds features that can give it winning advantages over just a website.
With a hybrid web app you can:
- Reuse the HTML, CSS, and JavaScript you’ve already created
- Reduce development costs by leveraging investments across different platforms
- Combine with C# to access the Windows Phone platform
For example, your app could support:
- The ability to pin pages from your website directly to Start
- The ability for users to share links to your webpages with their contacts on social networking websites
- Speech recognition for searching your product catalog and other user commands
- Wallet integration for storing loyalty card or payment card information
You could add many other features that you normally would find only in a dedicated Windows Phone app.
But, getting up and running quickly by leveraging the work you’ve already done creating your mobile website is where hybrid web apps really shine.
You could start a hybrid app from scratch by creating a hybrid web app using the HTML5 App template, or you could download and use parts of the Hybrid Web App sample as a starting point. Of course, your app should point to your own website, not the one in the sample, and include your own images.
The Hybrid Web App sample
The Hybrid Web App sample demonstrates an example of a hybrid web app by showing a wrapper of the Microsoft Store online mobile website.
Sample app main screen and website home page
It implements an app bar with buttons for home, refresh, pin to start, and share. The home button takes the user to the main page of the website. The refresh button reloads the current page.
With pin to start things start to get more interesting. This adds the ability to pin top-level category pages to Start as secondary Tiles.
Secondary Tiles pinned to Start
The share button enables the user to post a link to the current page to their social network accounts. This enables scenarios like sharing an item you just purchased or perhaps letting friends and family know what you’d like for a birthday gift!
Sharing a webpage link on social media
Finally, there is a menu item called shopping cart. This takes the user to the webpage that displays their shopping cart on the Microsoft Store online website.
Customizing the Hybrid Web App sample
The Hybrid Web App sample is an example of a hybrid web app in action. You can use some of this code in building your Windows Phone hybrid web app. When building your own, you’ll need to change a few things.
Point to your own website
There are two URLs in the project, one that points to the home page of the sample website and another that points to the shopping cart page. These are Microsoft URLs; you will need to remove them and add URLs that point to the relevant pages on your own site. Make sure you point to these pages in the mobile version of your website.
private string _homeURL = “http://m.microsoftstore.com/msusa/”;
private string _shoppingCartURL = “http://m.microsoftstore.com/msusa/ShoppingCart”;
Include your app Tile images
The solution includes standard Windows Phone SDK sample app Tiles. These images are only examples; when you build your hybrid app, you will need to include your own app Tile images. When the user pins your app to Start from the App list, they should be able to resize the Tile to one of the three supported Tile sizes and resolutions. Your app should contain images in all three of these sizes.
Include your secondary Tiles
Secondary Tiles are used for pinning deep links directly to Start. Similar to the app Tiles, the secondary Tile image included in the solution is an example; you should include artwork that represents the pages on your own website. The code that creates secondary Tiles is located in the PinApplicationBar_Click method in MainPage.xaml.cs.
Even more customization
There are many more modifications you can make to your app to get it just the way you want it. The beauty of a hybrid web app is that you can implement most of the features supported by the Windows Phone platform by leveraging your work from when you created your mobile website. You can add more features to your app in future updates. Here are just a few of the possibilities.
Live Tiles
Live Tiles distinguish the Windows Phone from other smartphones. Live Tiles update in real time, right on Start. You can let users know about an upcoming sale, for example, to entice them to open your app and find more information.
You can dynamically update your Tile using local or push notifications. For more information about these, see Local notifications for Windows Phone and Push notifications for Windows Phone.
Get all the details on Tiles at Tile design guidelines for Windows Phone.
Speech
In Windows Phone 8, users can interact with your app using speech. There are three speech components that you can integrate into your hybrid web app: voice commands, speech recognition, and text-to-speech (TTS).
If you choose to integrate voice commands into your app, users can access and maneuver your app on their phone simply by speaking a phrase such as “Start Contoso Search” or “Contoso Show Me My Favorites.” You can set up your app so that the phrase links to a specific page in your app, performs a task, or initiates an action.
From inside your app, users can speak to direct your app to accomplish tasks by using speech recognition. The key difference between voice commands and speech recognition is that speech recognition occurs from within the app, and voice commands are used from outside of the app. You could, for example, implement search functionality by using speech recognition.
Also from inside your app, you can use text-to-speech (TTS), also known as speech synthesis, to speak text to the user through the phone’s speaker. Your app can speak a simple string of text, or a formatted string defined by the industry-standard Speech Synthesis Markup Language (SSML) Version 1.0.
For more information about all these aspects of speech in Windows Phone, see Speech for Windows Phone 8.
Location
The Microsoft Location Service allows you to create location-aware apps for Windows Phone. The service obtains location data from multiple sources such as GPS, Wi-Fi, and cellular.
Imagine a scenario in which a user initiates a search from within your app to find a particular product they’d like to purchase. When they find what they’re looking for, they want to know how to get to the nearest retail location so they can physically see (and hopefully purchase) the product. You can use the location features of Windows Phone to find your store nearest to the user’s location and provide them driving directions, store hours, phone number, and so on.
To learn more about location services, see Location for Windows Phone 8.
Wallet
Windows Phone 8 introduces the Wallet, with which users can do the following:
- Collect coupons, credit cards, memberships, loyalty cards, and more in one place
- Manage the payment instruments they use in your app
- Link items in their Wallet to your app
- Complete transactions using Near-Field Communication (NFC), in some markets
With the Windows Phone Wallet APIs, you can create, read, write, and delete Wallet items directly from your app.
For more information, see Wallet for Windows Phone 8.
Creating a hybrid web app
To get started, you use the Visual Studio HTML5 App project template to create an app that wraps the WebBrowser control in which you host your mobile website.
Creating a Windows Phone HTML5 App project in Visual Studio
Buttons
Add ApplicationBar buttons and menu items to create a custom interface for your app. The HTML5 app project creates a standard app bar that has back and forward buttons. Replace these with buttons that interact with key features of your mobile website. The Hybrid Web App sample uses home, refresh, pin to start, and share buttons.
Windows Phone users expect the hardware back button to act as it does in the web browser. Remove the back button created on the app bar by the Visual Studio template and handle the hardware back key press event instead.
// Handle the hardware Back button.
void MainPage_BackKeyPress(object sender, System.ComponentModel.CancelEventArgs e)
{
if (Browser.CanGoBack)
{
e.Cancel = true;
Browser.GoBack();
_progressIndicator.IsVisible = true;
}
}
Progress indicator
A hybrid web app wraps a WebBrowser control with your own custom user interface elements, so you’ll need to implement some of the functionality users expect when navigating most websites. For example, you should show some kind of progress indicator when the user presses a link so they know that something is happening even if the webpage has not yet updated.
The Hybrid Web App sample uses the systemwide ProgressIndicator control for this functionality. You could also use an indeterminate ProgressBar control. Whichever progress indicator you choose, make it visible when the user initiates navigation, in the WebBrowser.Navigating event handler.
void Browser_Navigating(object sender, NavigatingEventArgs e)
{
// If the URL is a telephone number, turn off the progess indicator
if (!e.Uri.Scheme.Contains(“tel”))
{
_progressIndicator.IsVisible = true;
}
}
Then hide it again when navigation completes, through the WebBrowser.Navigated event handler.
void Browser_Navigated(object sender, System.Windows.Navigation.NavigatingEventArgs e)
{
// …
// We have arrived, hide the progress indicator
_progressIndicator.IsVisible = false;
// …
}
Create Secondary Tiles
Secondary Tiles allow users to pin deep links into your app on the Start screen of their phone. This is a great way for users to engage more deeply with your app.
Use the ShellTile class to create a secondary tile that gets pinned to the user’s Start screen. See Tiles for Windows Phone for more information on secondary tiles.
Resources
A successful hybrid web app starts with a successful mobile website that you’d like to present to users as an app. Here are some resources to help you design your mobile website so it looks great on Windows Phone 8 with Internet Explorer 10.
Web development for Windows Phone
Windows Phone 8: HTML5/IE10 for Developers
Developing in HTML5 and JavaScript for Windows Phone
Managing the Windows Phone Browser Viewport
Adapting your WebKit-optimized site for Internet Explorer 10
A hybrid web app can be a great solution for you to quickly create a Windows Phone app that leverages your web development skills and existing mobile website to reach your customers or users in a new way.
Reprinted with permission.
