Manifoldjs, a tool to create hosted apps

Modern web technologies are evolving not only to create faster and complex websites but also to create apps. There are plenty of examples for this. First of all, node.js, which is the one of the best examples, moving JavaScript to the server side. Then, you have electron, which is the technology behind Visual Studio Code, atom, the slack client and kitematic. Furthermore, you can think of frameworks that enables to create mobile apps using web technologies like apache cordova, ionic and React Native. However, you can go a step further creating a website and apps all in one using Manifoldjs.

Manifoldjs creates hosted web apps and some polyfill apps for Android, iOS, Windows 8.1, Windows Phone 8.1, Windows 10, FirefoxOS, Chrome, and the web, all based on the W3C Manifest for Web Apps. In addition to these platforms, the new version of manifoldjs supports creating your own platforms.

So, what is a “Hosted Web App”? It’s a store app (i.e. apps that can be downloaded from Google Play or Windows Store), whose content is hosted on a web server. In other words, it’s a website converted into an installable app. You can find more information about hosted web apps in this post.

A W3C Manifest for web apps is a standardized JSON-based manifest that provides developers a centralized place to put metadata associated with a web application. With this manifest, you can forget about using all the platform-specific meta tags that set the different size icons for each platform and other settings. In order to support this manifest on your site, you just need to add a single tag:

<link rel="manifest" href="manifest.json">

An example of a manifest.json could be something like:

{
  "name": "manifold.js",
  "short_name": "mjs",
  "icons": [{
    "src": "images/tiny.png",
    "sizes": "70x70",
    "type": "image/png"
  }],
  "start_url": "/",
  "scope":"http://www.manifoldjs.com/*"
  "display": "standalone",
  "orientation": "landscape"
}

If you want to generate a manifest.json for your site, there are several sites that can help you, for example, you can use the manifoldjs generator site or this one.

Of course, like most cool new features on the block, not every browser supports it yet. However, you can use the ManUp.js polyfill, for example, which will create the required meta tags on your site based on the manifest.json file. You can find more information about W3C Manifest and ManUp.js in this post.

Manifoldjs provides three ways to create your apps:

• A node-based command-line interface (CLI) which you can install with npm and is easy to use.
• A node.js module interface, which you can use to create your own tool just by adding the module as a common npm dependency in your node.js app.
• A website that generates the apps for you: http://www.manifoldjs.com/generator

I will try to explain each scenario in more detail in future posts, but for now, the website is the easiest option.

To sum up, with your site, a W3C Manifest JSON file and manifoldjs, you can easily leverage your site in a cool way, creating Store apps for today’s most important platforms.