A Look Back at Build: Using the Web Apps Template to Create Mobile Apps

In a world of devices and services there are many different kinds of developers. As Guggs and I spelled out a few weeks ago at Build, the kind of application that you’re building, and the tools you use to build it, impact how you get to your end product.

Casual game developers might use Flash, Unity or GameMaker: Studio; C, C++ and direct-to-metal developers rely on UNIX and code C libraries; .NET and managed code developers use Common Language Runtime; and Web developers focus on standards such as HTML5, JavaScript and CSS. That is the way it should be, and we’re committed to providing the tools that each of these communities needs.

No matter what platform they start from, most developers also see tremendous opportunity to tap into the potential of other platforms. For example, many Web developers out there want to break into the mobile app marketplace.

Today I want to discuss one aspect of the reference architecture that we showed off at Build, which is focused specifically on helping Web developers take their Web-based content and turn it into mobile apps.

One of the biggest obstacles of turning Web content into a truly mobile app experience is creating the client interface. This involves wrapping the Web content, addressing the need for offline capabilities — including the availability of both Web content and data — and determining how to integrate with the operating system.

Today, we’ll focus on the front end, while noting there are other issues that need to be addressed, such as creating a scalable server, dealing with common namespaces and conducting A/B testing. We’ll save those for another day.

During the keynote at Build, Guggs and I demonstrated Relecloud, an app that came out of a recent hackfest with Accela. As discussed in an earlier post about the hackfest, Relecloud started out as an HTML/CSS/JS app that runs on virtually any browser, including Internet Explorer, Chrome and Android.

Porting the Web app to a mobile platform starts with downloading the Web App Template (WAT). From there you can simply open the template in Visual Studio, paste in the URL, hit “F5” and you are up and running.

{

       "homeURL": " https://relecloud.cloudapp.net/ ",

       "navigation": {

              "hideOnPageBackButton": false,

              "hideBackButtonOnMatch": [

                     "{baseURL}/Json#livetiles"

              ],

              "pageLoadingPartial": "/template/partials/page-loading.html"

       },

       ...

As we talked about during the keynote, there is always the chance that you’ll lose Internet connectivity. The WAT has an offline mode to address this scenario.

...   

       "offline": {

              "enabled": true,

              "message": "It looks like you are offline. Please reconnect to use this application.",

              "useSuperCache": true,

              "addIndexedDBSupport": true,

              "imagesGuardBand": true

       },

The offline mode turns on caching and Indexeddb so you can access the same Web-based content in much the same manner as you would if you had an Internet connection. If you want to understand what is going on under the hood, we wrote an article about WAT offline tools.

Beyond that, you don’t need to do much else to enable offline capabilities. Right now, the WAT works on Windows Phone and Windows PC with plans to support Android right around the corner — with more to come after that.

I hope that today’s post gives you the resources to start porting your Web apps. Next time, we’ll talk about the server side of things.