February 16, 2016 2:00 pm

Leveraging existing code for Yahoo Mail with Hosted Web Apps

Creating a Hosted Web App (HWA) is a great way to fast track an app into the Windows Store when you already have an existing web app. Yahoo found this out firsthand when they realized they could use the Windows bridge to bring their browser version of the Yahoo Mail app to Windows 10. In addition to reusing their existing codebase, Yahoo was also able to extend the codebase with features normally only found in a native app. “We saw that Microsoft could let us essentially wrap our web app in a desktop app and get the best of both worlds,” said Josh Jacobson, director of product management for Yahoo Mail.

Keep what works

Retaining existing functionality, such as the much-loved stationery, was critical to the team at Yahoo Mail. Likewise, the Yahoo Mail web developers wanted to keep using JavaScript, their language of choice, in which they were already highly proficient. As a company, Yahoo saw the opportunity to leverage a single codebase across multiple platforms and jumped at the chance.

To ensure they could keep their critical features intact, the team at Yahoo Mail wrapped their existing web app, creating an app that worked on Windows with minor tweaks to their original code. This allowed them to keep their stationery and other user-favorite features. In the case of the stationery, this also meant keeping their relationship with third-party vendors intact as well as internal processes for creating holiday stationery.

The wrapped web app turned into a Universal Windows Platform (UWP), using a WebView. The web app itself continues to be hosted on a remote website. The WebView provides a specialized browser based on the Microsoft Edge engine that is contained in a Windows Store app and points to their website. This means that changes to the website are automatically reflected in the UWP app. Instead of two codebases, there continues to be only one main codebase to maintain.

Note: For a demonstration of the basic approach Yahoo took to the conversion process, take a look at this Windows 10 Hosted Web Apps presentation.

Best of both worlds

To help their app integrate more fully with Windows, the Yahoo Mail team wanted to add a couple of new features that took advantage of native Windows functionality.

When a user leaves a website, there is no easy way to get the user’s attention and bring them back to the site. By contrast, a UWP app uses Live Tiles, badges, and toast notifications to let the user know when new updates have occurred (shown below).

According to Josh, the Yahoo Mail team saw this as a major incentive for creating a UWP version of their app. “We looked at what things we’re limited to in a browser, and what things in a desktop app we could really utilize to help users return to Yahoo Mail and use it as part of their daily workflow.”

To make this a reality, the Yahoo Mail app uses background tasks to poll for changes on the server and dynamically update the mail count on the Live Tile. This update triggers animations on the Live Tile as well as a count change on the notification badge, which is the small number in the corner of the Live Tile, to tell the user how many new emails she has.

1_livetile

Utkarsh Shrivastava, development engineer for Yahoo Mail, summed it up when he said, “In a nutshell, it was as simple as creating a background task in Visual Studio and calling the WinJS API to update the count.”

The second feature to take advantage of native Windows functionality was integration with the lock screen to alert users to the number of emails they have received. “It’s the kind of thing that you don’t necessarily expect as a user, but when you see it, you’re happy that it exists,” said Josh. Adding this feature was as easy as enabling the app to display badge and tile notifications on the lock screen. Doing so lists the app as a lock screen app in the device settings, where the user can elect to receive the notification.

Although Yahoo Mail generally chose to use JavaScript for anything that made the app feel more integrated with Windows, such as the Live Tile notifications, there were two notable exceptions. For the Yahoo Mail account manager feature, which was already available in the browser, they produced a new Windows version so users could manage accounts from the Windows settings. And for the login, they produced a login mechanism using the PasswordVault class, which as an exercise, developers chose write in C#.

In porting their web app to Windows Store, Yahoo Mail mainly used the WebView to make their mail client look and behave like a native app. It helps to know that there are three different types of UWP web apps:

  1. A hosted web app that is fully hosted on a remote webserver
  2. A packaged web app that is fully hosted on the local client
  3. A hybrid app that is hosted partially on the local client and partially on a remote web server

The hybrid app, like the one Yahoo created, can include code running as a package inside the local app client and also retains the ability to interact with remote content. So, developers aren’t restricted to a Hosted Web App or a packaged web app. The elements can be blended as needed.

The team at Yahoo Mail plans to continue to evaluate and incorporate other Windows features accessible from their Hosted Web App. For information on using the Windows Runtime in JavaScript or to see the JavaScript language reference, please visit JavaScript reference in the Dev Center.

The developer experience

It’s worth mentioning that, as developers of a Hosted Web App, the Yahoo Mail team found that Windows Store provided two unexpected benefits. First, when they were working on the beta, they saw active participation from their users. “The Windows Store itself, for us, was an awesome experience because users are prompted automatically to give reviews,” said Josh. “We didn’t have to do a lot of work to get users to leave reviews, and we got lots of reviews right away as soon as we launched.”

The developers were able to make improvements and enhancements based on their direct interactions with the user community via the comments section. Now that the app is live, they can boast a solid 4+ star rating.

2_dashboard

Secondly, using the data on the Windows Dev Center Dashboard, they confirmed that users who download the app have higher retention and usage rates than those using only a browser. Armed with numbers, the development team could then provide evidence that they had achieved their goal of improving user retention.

Wrapping up

Using a Hosted Web App is a good way to get your existing app into the Windows Store quickly. As the team at Yahoo Mail found, it enables a developer to carry over existing code and features, while also allowing the integration of native features available only on the Windows platform, such as Live Tiles and lock screen notifications. For more information, check out these links:

Join the conversation

  1. [removed strong language – admin]

    Web hosted apps is horrible. First of all making an app but it’s actually a web wrapper is a total LAZY, this shouldn’t be allowed at all on Windows Store. This move allowing devs to get lazy on just developing a web wrapper into an app is just a desperate move by Microsoft to fill up all these holes on their app gap problems, they will say “Oh developing in Windows 10 is much easier now because we are allowing you to just put a link on your website and make it an app tada! Come and fill up or app gap problem” Web apps are horrible in the sense that it only depends on your internet connection to download the html, css and whatever web techs you also used, so every time you open the apps it’s like you are opening a useless brick that is dumb unless you are connected to the internet because it nees to load it’s app structure or actually the webpage in disguise every time you need to open the app. So there is performances issues, since it’s actually a webpage contained in either a IEframe or Edgeframe or whatever Microsoft browser it’s based on you’ll see a white page on the first before you able to use the app. It’s actually a browser experience turned into a app. Also it suffers lack of being touch friendly. You’ll see above it’s actually a web based Yahoo Mail website so there’s no way that it is tablet optimized, and also responsive on whatever tablet size you are own. I bet the CSS inside is supposed to be the elements will be smaller until your fat fingers can’t actually properly touch on the elements so it can just fits whatever tablet size you are on. It will also suffers lag issues that is still present until this days of the web. Also given that the Edge is still buggy. Also building a web app is a very elaborate excuse just to elude following the design langauge of an platform, Modern design language 2 in this case on Windows 10 (maybe the developer also doesn’t like the ugly new Windows 10 design langauge) (also APIs on Windows 10 is decades away from iOS and Android). I would want a native responsive and functioning app rather than a Hosted web apps. I would rather be in Windows 10 with 2 years of app gap problem and wait for MS to properly address it in a right way rather than giving us a a fragmented app experience and ecosystem, not following app design language, straight-into-port apps and rushed buggy, incomplete functionality apps

    • The point of Hosted Web Apps is not to have a silver-bullet solution that just wraps the web application and put it into the Store. That’s why we have the extension capabilities to use the native Windows 10 features and optimize the experience.

      Things you mention like offline, loading experience and cross-device optimization are definitely things to consider when building an HWA and UWP features are offered to address those. A great HWA has an offline experience and handles these cases so it looks and works good on any device that the app runs on.