Go seamless from Web to Desktop with HTML5

HTML5 provides developers the potential to develop rich internet applications. HTML5 turns any website into a Web App. HTML5 web apps are not only limited to desktop but are also accessible on modern mobile and tablets as well.

On mobile, we have a great tool called PhoneGap. Using this, anyone can develop apps for Android, iOS, Blackberry etc. using HTML5, CSS3 and JavaScript. The best feature of PhoneGap is that the users don’t need an internet enabled device to access the app. Once downloaded, the user can use it offline like other native apps.


html5 web to desktop Go seamless from Web to Desktop with HTML5

But what if you want the same experience on your desktop too i.e. not to open web browser and visit a particular URL for the web app but to click an icon on desktop and run it offline like the other native apps. There are several options available to a developer to provide such functionality. Some great tools with such functionality are Pokki and Chrome Package Apps and Mozilla XUL Runner.

Pokki and Chrome not only allow you to develop desktop HTML5 apps but also provide a marketplace to distribute them for desktop.

One another tool is Node-Webkit which is going to be discussed in this blog post.

Node-Webkit is a run-time based on Chromium and Node.js. It allows you to package your HTML5 apps and games for Windows, Mac and Linux.

Why do we like Node-WebKit??

  1. It packages your app for Windows, Linux and Mac such that they don’t need any dependencies to execute.

  2. It supports Node.js. You can build amazing apps and games using the Node.js Modules. You are not limited to internal node.js modules but can also use any existing node.js module.

How to use Node-Webkit

It’s very easy, develop your app or game in a way you want to and then you can package it with Node-Webkit. To package it

  1. Download the Node-Webkit

  2. Create a package file

    Name it as package.json

    1
    2
    3
    4
    
    {
      "name": "nw-demo",
      "main": "index.html"
    }

    here the name is the name of your app and main is the file that will be loaded on startup of your applications.

  3. Zip all your files along with package.json

  4. Rename the zip file with .nw extension for e.g. app.nw

  5. Now you can simply run your app with the node-webkit runtime
    e.g
    On Linux run command

    1
    
    ./nw app.nw

    And on Windows drag and drop app.nw over the nw.exe

  6. To package it and to make it more distributable, concatenate the app.nw with nw.exe
    e.g
    On Linux run command

    1
    
    cat /usr/bin/nw app.nw > app && chmod +x app

    And on Windows Run Command

    1
    
    copy /b nw.exe+app.nw app.exe

Checkout their wiki links to learn more .Hope this article helped you. If you have any further suggestions or know about any other tools like Node-WebKit, please do share it with us support@shephertz.com .

twitter Go seamless from Web to Desktop with HTML5facebook Go seamless from Web to Desktop with HTML5google Go seamless from Web to Desktop with HTML5linkedin Go seamless from Web to Desktop with HTML5pinterest Go seamless from Web to Desktop with HTML5reddit Go seamless from Web to Desktop with HTML5stumbleupon Go seamless from Web to Desktop with HTML5tumblr Go seamless from Web to Desktop with HTML5

4 thoughts on “Go seamless from Web to Desktop with HTML5

  1. I think it should be the other way.
    copy /b nw.exe+app.nw app.exe – for windows
    cat /usr/bin/nw app.nw > app & chmod +x app – for linux

Leave a Reply

Your email address will not be published. Required fields are marked *


2 × two =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>