Tag Archives: hosted web apps

Next-generation web apps for education

Just a short time ago, the new Microsoft Intune for Education was announced for teachers and technologists to manage devices, accounts, and apps for students. Since that time, we’ve heard from a number of developers and app publishers who work in education, who have questions about how their apps can take full advantage of this new system.  For those app builders who are already publishing their apps on the web (and there are a lot of them!) we have a great solution today – and it’s about to get a lot better.

In Windows 10, we introduced the concept of “Hosted Web Apps” – applications which serve your web content from your server, outside of the context of the browser and with both a native feel and access to native capabilities. Now, we’re excited about what’s coming next for web apps: Progressive Web Apps (PWAs). Together with other browsers and the web community, we’re working on enabling the next wave of native-like web experiences, where web content can have the essential capabilities and user experience of native desktop or mobile apps. These web apps can start up instantly, can run in the background and have additional APIs available for developers.  With Progressive Web Apps, web content gets promoted to app status when the user chooses and the environment allows for it.

Screen capture showing http://jig.space open in Microsoft Edge and as a native app on Windows 10

JigSpace is a platform for creating and sharing interactive, 3D instructions for anything. It’s simple, powerful and is available on desktop and mobile at http://jig.space, and can be ran as an app or in the browser.

The component technologies that make up PWAs are in development or supported on most browser platforms today. Additionally, Google has begun requiring Chrome apps to migrate to PWAs in order to remain accessible in Chrome, so there’s never been a better time for education-focused web apps to make the transition to a full PWA experience.

How to Write a Progressive Web App

Before migrating to a PWA you should make sure that your site is cross-browser compliant. Browser makers have gone to great lengths to make sure the rendering delta between browsers is small, but you’ll still want to make sure your app runs in all browsers before moving to a PWA.

To create a PWA you need to define your web project as an application. In the past, you’ve done this with a manifest file and image assets.  The problem was that each platform (like Chrome Apps and Windows Apps) had different manifest formats and asset requirements. PWAs require those same components, but standardize them so you build the app once and run it across all platforms that support PWAs.  There are three requirements for building a PWA:

  1. Your site must be hosted on an encrypted environment. This means it needs to be send as https instead of http. This has always been a recommendation for Chrome and Windows apps, but with PWAs it’s a requirement. If you don’t have an HTTPS certificate for your site already, get one today. The good news is this is easier than ever, thanks to resources like Let’s Encrypt.
  2. You need to have a W3C Web App Manifest. This is one standard manifest that supports your PWA across all platforms. We recently introduced PWA Builder, which simplifies and automates building a manifest so it’s as easy as providing resources and a description for your app.
  3. You need to have a service worker. A service worker is a JavaScript file that that runs between your HTML page and the Networking stack. SWs are also installed independently on host OSes to handle offline and push. You can also use service workers in a comparable way to make your site faster. PWA Builder also provides a selection of pre-built service workers based on the functionality you desire for your app.

Run your new PWA today as a “Hosted Web App” on Windows 10

Because PWAs are designed around the principle of progressive enhancement, building a PWA today will not only prepare you for next-generation experiences on desktop and mobile devices, but PWAs can already run as Hosted Web Apps today on Windows 10, and with a polyfill on Android and iOS.

Education-focused web apps, like other web apps, can be published to the Windows Store as “Hosted Web Apps.” These apps will run as standalone apps, just like PWAs. The primary differences between Hosted Web Apps and Progressive Web Apps today are simply in capabilities: while Progressive Web Apps support a Service Worker (and associated features like server push, cache, etc.), and require a secure connection, Hosted Web Apps currently do not. As support for the Service Worker family of features is added to the Windows web platform, HWAs with a Service Worker and HTTP will naturally evolve into PWAs.

Hosted Web Apps have some key user experience and discoverability advantages over remaining in the browser. Depending on your app’s customers and scenarios, you should review this list of benefits and determine whether your app is best delivered in the browser, as a hosted web app, or both.

Easier app management

As previously mentioned, a few weeks ago Microsoft announced a new version of Intune directed towards EDU to help teachers and schools better manager devices. By moving your web app to a HWA/PWA, it allows teachers and administrators to prep students devices with your app along side of the other store apps they use.

User notifications

You may already be using web notifications for re-engaging your users. These notifications will appear in the action center, where users are accustomed to find them. With a small amount of code added to your app, you can send push notifications or use the notification gateway to send toast notifications or Tile updates even when your app isn’t running.

Store listing

Hosted Web Apps get a listing in the Windows Store just like any application. When a user goes to the Windows Store to find education apps, your app will appear alongside the others and will participate in other store discovery mechanisms such as “recommended apps”.

Screen capture showing Jig.Space hosted in the Windows 10 Store

Hosted Web Apps (and, in the future, Progressive Web Apps) can be listed in the Windows 10 Store for better discoverability and manageability.

The store also provides you with additional benefits such as usage reports and performance data. You also receive ratings and reviews, which gives you a way to get feedback from your users, and respond to that feedback in ways we just don’t have on the web today.

More surfaces for discovery

In Windows 10 HWA/PWAs will appear wherever users expect to find apps. This includes discoverability in areas like “related apps” in the store, Cortana search, the start menu and even installs from within the bing.com search listing.

Screen capture showing Bing search results for JigSpace, featuring the "Jig.Space" Windows App featured in the search results.

Web apps listed in the Windows Store are featured in related Bing search results

Integration with the host operating system

HWA / PWA appear to a user as any other app. This means that a user and easily install and uninstall the apps. It means that the web app will be integrated into the settings panel (for example, with notifications).

Screen capture showing the Jig.Space web app installed in the Windows Start Menu. A context menu is open, with options to Pin/Unpin, Resize, Uninstall, and more.

Web apps are managed just like native apps, including all the relevant contextual controls and management options.

These apps work as stand-alone apps, so they have their own tile, their own task bar menus and even appear as apps within the task manager.

Access to expanded resources

When your web app runs as a HWA / PWA is has more access to resource. This means data caps on storage like IndexedDB and local storage are removed. It also means your app will have a dedicated cache that will never be deprioritized by another app.

Screen capture showing the Jig.Space app open to a 3d image of a Mars rover.

JigSpace provides interactive guidance for complex objects like this “jig” of the mars rover.

API access for expanded functionality

HWA / PWA apps have access to the Windows Store App APIs through JavaScript. This allows you to take advantage of features like BTLE, USB access or access to the user’s calendar or contacts with appropriate permission controls.

Simplifying the PWA Transition

Developers have shared with us that moving from a web site (or Chrome OS App) to a Progressive Web App is not an easy task. With that in mind, we’ve recently shared a preview to some of the open source tools we are supporting to ease the transition from web site to Progressive Web Apps. As an education ISV, you can start using these tools today. Lear more about these tools at http://preview.pwabuilder.com .

PWA Builder helps you build out the components needed for a Progressive Web App and get your listing in the Windows Store and other markets, so you can reach users regardless of platform or device.

We’ll have lots more to share about the road to Progressive Web Apps in Microsoft Edge and Windows 10 soon – in the meantime, reach out on Twitter or in the comments below if you have questions!

Jeff Burtoft, Principal Program Manager, Partner App Experience

UWP Hosted Web App on Xbox One (App Dev on Xbox series)

For the fourth installment in the series, we are open sourcing yet another sample app: South Ridge Video, an open source video app developed as a hosted web application built with React.js and hosted on a web server. South Ridge can easily be converted to a UWP application that takes advantage of native platform capabilities and can be distributed through the Windows Store as any other UWP app. The source code is available on GitHub right now, so make sure to check it out.

If you missed the previous blog post from last week on Background Audio and Cross Platform Development with Xamarin, make sure to check it out. We covered how to build a cross-device music experience using Xamarin and how to support background audio on the Universal Windows Platform, including the Xbox One. To read the other blog posts and watch the recordings from the App Dev on Xbox live event that started it all, visit the App Dev on Xbox landing page.

South Ridge Video

image1

What if you could extend the investment put into your web application and make it available as an Xbox One Windows Store app? What if you could also continue to use your existing web frameworks, CDN and server backend, yet still be able to use native Windows 10 APIs?

You can! A Hosted Web App (HWA) is a web app that can be submitted to the Store just like any other Universal Windows Platform (UWP) app. Since you’ve already invested in the development of the web app, your transformation into a HWA can be done rather quickly and easily.

To do this, you’ll reuse your existing code and frameworks as if you were developing for the browser. Let’s take a look at the South Ridge Video example app on GitHub. This is an app built with React.js and uses a web server back-end.  The application is delivered by the server when the app is launched and the UWP app will host that web content.

However, the HWA is not just a simple wrapper; you can also call into native Windows 10 APIs, such as adding an event to the user’s calendar. You can even use APIs such as toast notifications and camera capture or media transport controls with background audio. Note that when accessing sensitive APIs, make sure you declare the required App Capability in the appmanifest.

Now that your web app is ready and you want to turn it into a HWA, let’s take a look at the things you need to do to get it ready for Windows Store distribution to Xbox One.

Local Testing on a retail Xbox One

First, you need to put your retail Xbox One into developer mode so you can deploy and test the app. This is pretty straightforward; it involves installing an app from the Windows Store. Go here to see the steps on how to activate dev mode and how it works.

Now that you have your Xbox ready for deployment, let’s review the ways you can generate the app. There are three main options:

  • Using a web browser-based tool, such as Windows App Studio, to generate it for you
  • On a Mac or PC using Manifold.js
  • On a PC using Visual Studio

Let’s drill down into each option to see which best fits your needs.

Windows App Studio

Let’s start with the browser-based option, using Windows App Studio to create the HWA. Windows App Studio is a free online app creation tool that allows you to quickly build Windows 10 apps.

  1. Open Windows App Studio in your web browser.
  2. Click Start now!
  3. Under Web app templates, click Hosted Web App.
  4. Follow the on-screen instructions to generate a package ready for publishing to the Windows Store.
  5. You can then download the generate package that you’ll publish to the Store.

On a Mac using Manifold.js

What you need:

  • A web browser
  • A command prompt

ManifoldJS is a Node.js app that easily installs from NPM. It takes the meta-data about your web site and generates native hosted apps across Android, iOS and Windows. If your site does not have a web app manifest, one will be automatically generated for you. For example, take a look at the web app manifest for South Ridge Video.

  1. Install NodeJS, which includes NPM (Node Package Manager)
  2. Open a command prompt and type “NPM install -g manifoldJS”
    1. npm install -g manifoldjs
  3. Run themanifoldjs command on your web site URL:
    1. manifoldjs http://southridge.azurewebsites.net
  4. Follow the steps in the video below to complete the packaging (and publish your Hosted Web App to the Windows Store)

image2

A couple notes about using Manifold.js

  • If you have a W3C manifest, it will use that for app info; otherwise, it will be created automatically.
  • Use the -windows10 platform flag to generate only for UWP.

On a Windows PC using Visual Studio

What you need:

  • Visual Studio 2015. The free, full-featured Visual Studio Community 2015 includes Windows 10 developer tools, universal app templates, a code editor, a powerful debugger, Windows Mobile emulators, rich language support and much more—all ready to use in production. The same is true for Professional or Enterprise variants of VS 2015.
  • (Optional) Windows Standalone SDK for Windows 10. If you are using a development environment other than Visual Studio 2015, you can download a standalone Windows SDK for Windows 10 installer. Note that you do not need to install this SDK if you’re using Visual Studio 2015 Update 3; it is already included.

Steps to create the HWA (go here to see all these steps with screenshots):

  • Pick the website URL and copy it into your clipboard.
  • Launch Visual Studio 2015.
    1. Click File.
    2. Click New Project.
    3. Under JavaScriptthen Windows Universal, click Blank App (Windows Universal).
  • Delete the VS project template generated code.
    1. Since this is a hosted web app where the content is served from a remote server, you will not need most of the local app files that come with the JavaScript template by default. Delete any local HTML, JavaScript, or CSS resources. All that should remain is theappxmanifest file, where you configure the app and the image resources.
  • Open the appxmanifestfile.
    1. Under the Application tab, find the Start page text field.
    2. Replace html with your website URL.
  • Set the boundaries of your app.
    1. Application Content URI Rules (ACURs) specify which remote URLs are allowed access to your app and to the Universal Windows APIs. At the very minimum, you will need to add an ACUR for your start page and any web resources utilized by that page. For more information on ACURs, click here.
    2. Open theappxmanifest file.
    3. Click theContent URIs.
    4. Add any necessary URIs for your start page.

For example:

  1. 1. http://southridge.azurewebsites.net2. http://*.azurewebsites.net
  2. Set theWinRT Access to All (for each URI you added).
  • At this point, you have a fully functioning Windows 10 app capable of accessing Universal Windows APIs! You can now deploy to the Xbox One using the remote debugger as if it were any Windows 10 remote device, or you can use the Device Portal (covered in the next section).

Installing your HWA on the Xbox One for local testing

At this point, you now have an app package (APPX) or a manifest folder (Manifold.js), containing the files you need to install or publish your application. You can “side-load” your HWA to the Xbox by using the Device Portal (go here for more information about the Device Portal for Xbox One). One you’ve logged into the portal, you can then deploy your app.

APPX Deployment (Visual Studio / App Studio)

Here are the steps (go here to see these steps below with screenshots):

  1. Go to the Apps tab on the portal.
  2. You’ll see two buttons to upload items to the device: App Package and Dependencies.
  3. Tap the App Package button and navigate to the package folder you generated for your app. In there, you’ll find an appx file. Select that file and upload it.
  4. Now tap the Dependencies button, navigate again to your package folder and drill down to the dependencies sub folder. This contains the dependencies that your app needs to run – upload each one in the folder. (Note that you only need to do this when deploying via the Portal. Visual Studio delivers dependencies when remote debugging and the end user’s machine will already have these installed when delivered via the Store.)
  5. With the app package and the dependencies uploaded, click the Go button under the “Deploy” section and the app will be installed.
  6. Now go to the Xbox and launch the app!

Loose Files Deployment (Manifold.js)

The only difference between deploying an app packages with Manifold.js is that you have “loose” files instead of an APPX package. In the steps above, instead of uploading an APPX and Dependencies, you choose the “upload loose files” option and select the manifest folder. The portal will look in that folder for the manifest file and gather all the required pieces to complete the installation.

Design and User Experience Considerations for Xbox One apps

Designing for the “10-Foot Experience”

Xbox One is considered a “10-foot experience”, meaning that your users will likely be sitting a minimum of 10 feet away from the screen. You’ll want to consider the app’s ability to be used at that distance as opposed to being accessed within a web browser, from two feet away, with a mouse and keyboard. This article explains how to make sure you get the best user experience for the 10-foot experience scenario.

Designing for TV and understanding the “TV SafeZone”

Television manufacturers will apply a “safe-zone” around the content that can clip your app. By default, we apply a safe border around your app to account for this, however you can ensure that your app takes the full screen size using following code:


var applicationView = Windows.UI.ViewManagement.ApplicationView.getForCurrentView();
applicationView.setDesiredBoundsMode(Windows.UI.ViewManagement.ApplicationViewBoundsMode.useCoreWindow);

Understanding and managing XY focus and navigation

You’ll want to consider your app’s ability to handle XY navigation by the user and disable the “Mouse Mode” that’s turned on by default for UWP apps. This is important because users’ main input method for Xbox One is a handheld controller. See here for more on how to work with XY focus and navigation. Use the following code to enable XY navigation using JavaScript:


navigator.gamepadInputEmulation = "keyboard";

To enable directional navigation, you can use the TVJS library which is discussed below.

Considering your app’s appearance when another app is snapped

When users run an app on Xbox One, a second app may be ‘snapped’ to the right of the main app. When this is the case, the main app is considered to be in Fill Mode. While testing your app, open Cortana or another ‘snappable’ app to see how your app appears. You want to make sure your UI is still usable and has a graceful transition between Full Screen and Fill Mode. Implement an adaptive UI to make sure the user has the best experience for this scenario.

Integrate with the System Media Controls

If your app is a media app, it is important that your app responds to the media controls initiated by the user via the on-screen buttons, Cortana (typically through speech), the System Media Transport Controls in the nav pane or the Xbox and SmartGlass apps on other devices. Take a look at the MediaPlayer control from TVJS which automatically integrates with these controls or check out how to manually integrate with the System Media Transport Controls.

TVJS

TVJS is a collection of helper libraries that make it easier to build web applications for the TV. If you are building a hosted web app that will also run on the Xbox, TVJS can help add support for Directional navigation, as well as provide several controls that make it easier to interact with content on the TV.

DirectionalNavigation

Directional navigation is a feature that provides automatic two-dimensional navigation within the pages of your TV app. Apps won’t need to trap and handle navigation within their pages, or to explicitly specify all the valid focus targets for each element in the UI. With automatic focus handling, users can navigate around in an intuitive and robust way.

When users enter directional input to move from one element to another, the automatic focus algorithm looks at the set of potential focus targets, determines the next element to move to and then automatically sets the focus to that element. To determine the element to move to, the algorithm combines directional input, past focus history, and the physical layout of UI elements on the page.

To enable directional navigation, include the following script reference:

<script src=”directionalnavigation-1.0.0.0.js”></script>

By default, only a, button, input, select, and text area elements are considered focus-able. To make other elements focus-able, set a valid tab index on the element.

<div tabindex=”0″>This div is eligible for focus</div>

Make sure to check out the documentation to learn how to change the root element, set initial focus, how to override next focus, best ways to optimize controls for focus and how to customize the input. Don’t miss the samples as well that go through a lot of great examples.

Submitting your app to the Windows Store

Once you’re happy with the app after testing it on Xbox, it’s time to publish it to the Windows Store!

Depending on which route you took to build the app, the process is a little different on how you build the package for Store submission.

Xbox One and Hosted Web Apps are a great way to deliver your web application to millions of Xbox One users and enter the living room experience with minimal effort.

Wrap up

Make sure to check out the app source on our official GitHub repository, read through some of the resources provided, watch the event if you missed it and let us know what you think through the comments below or on twitter.

Next time we will release another app experience and go in-depth on how to build great Internet of Things experiences using the Universal Windows Platform and how to make them shine on the Xbox One.

Until then, happy coding!

Resources for Hosted Web Apps

Download Visual Studio to get started!

The Windows team would love to hear your feedback.  Please keep the feedback coming using our Windows Developer UserVoice site. If you have a direct bug, please use the Windows Feedback tool built directly into Windows 10.

— Written by Jeff Burtoft, Principle Program Manager WDG/PAX

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: