How to Build Hosted Web Apps on Android, iOS, and Windows with manifold.JS

Originally published at: http://www.sitepoint.com/build-hosted-web-apps-android-ios-windows-manifold-js/

Recently at BUILD 2015, Microsoft announced manifoldJS – the simplest way to build hosted apps across platforms. While John Shewchuk, Technical Fellow and the CTO for the Microsoft Developer Platform, did a great job building a hosted web app right on-stage (you can see the recap here), I’d like to go into a bit more detail and explain why you’d want to use Hosted Web Apps and explain how to build one for yourself using manifoldJS.

Why Hosted and manifoldJS?

Hosted Web Apps bring the best of the web to store apps on with minimal effort. They are a great way to get more user reach with the experience you’ve already built. And when you update your web experience, your users get the same update in hosted web apps too! The problem is, until now, the hard thing about hosted apps, was how different the process is on every platform. manifoldJS changes that by putting the focus on the W3C Manifest for Web Apps – a standards-driven, open source approach for creating apps – and then uses that metadata to create a hosted native app on Android, iOS, and Windows. When a platform supports hosted apps, we build it natively and then we use Cordova to polyfill the platforms that don’t have native support.

Getting Started with manifoldJS

There are basically two ways to get going. If you’re a web developer who lives in the command line, start with the CLI interface. For devs who want to run manifoldJS in the cloud, we have the same tools on the website.

Mobile apps

The first thing you want to do, is create a manifest for your website. This should be pretty familiar to web developers, as it’s a fairly simple JSON object. Here is a sample from this site:

{
"name": "This Here Web",
"short_name": "THW",
"icons": [
{
"src": "images/tiny.png",
"sizes": "70x70",
"type": "image/png"
}
],
"start_url": "index.html",
"scope":"http://*.thishereweb.com"
"display": "standalone",
"orientation": "landscape"
}

For more details on building a manifest file, including how to serve it from your webserver, check out this post on the manifest. If you want a little help building that manifest, try the code generator on manifoldjs.com site. We’ll walk you through the values you need with the wizard, and then provide you with a completed manifest for your website at the end.

Continue reading this article on SitePoint

Great stuff, I think ManifoldJS looks promising. One question though: in order to use cordova plugins on your native devices, you need to add them to your website prior to generating the projects with manifoldjs? Or should you add them to your project after generating with manifoldjs?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.