143

What are some solutions for distributing an HTML5 based desktop application?

I want to be able to distribute my HTML5 app as a standalone desktop application on Windows, OSX, and Linux. I would like for people to be able to double click my app icon shortcut to run my program.

I don't want the browser window showing at all, just my app. Is this possible?

Daniel X Moore
  • 14,637
  • 17
  • 80
  • 92
Shai UI
  • 50,568
  • 73
  • 204
  • 309
  • 4
    Chrome + Fullscreen works well – PostMan Feb 02 '11 at 00:38
  • I don't want full screen, just like an app window where it doesn't take the whole screen. maybe I could possibly even minimize, maximize (i know this is far fetched but maybe...) – Shai UI Feb 02 '11 at 00:39
  • 2
    Chrome on windows has an "make application shortcut" option from the wrench menu. It will create a link on the desktop that opens standard window with no address bar. – 6502 Feb 02 '11 at 00:48
  • 3
    Do you have any other requirements, like accessing local files or other things that are normally not possible within the browser? – Tiemen Aug 08 '11 at 08:31
  • Note that windows 8 will have desktop apps running on javascript (my question was originally ahead of its time!) – Shai UI Oct 11 '11 at 19:36
  • This subject has subsequently been brought up in http://stackoverflow.com/questions/11215454/is-there-a-production-ready-cross-os-desktop-html5-runtime/13563386 and http://stackoverflow.com/questions/11015811/html5-desktop-wrapper-framework/13563325 – Motin Nov 26 '12 at 10:56
  • 80
    Can someone explain me why this question is marked as **not constructive**? He is asking if there is a platform, the answer is objective: **yes**. And could be "implemented" with some possibilities, so why is marked in this way, really. – Francesco Belladonna Jan 06 '13 at 10:13
  • 13
    This question is both relevant and topical - as shown by this recent article: http://clintberry.com/2013/html5-apps-desktop-2013/. – Per Quested Aronsson Oct 10 '13 at 07:45
  • Take a look at [PHP Desktop](https://code.google.com/p/phpdesktop/). Don't let the name deceive you, PHP Desktop can also act as a packager for pure HTML5/JS applications. It embeds a Chromium browser and a web server. Shipping the PHP interpreter is not required. PHP Desktop is not strongly tied to PHP, it can also act as a packager for any other scripting languages like Perl, Ruby, Python, that provide a CGI interface for executing scripts. – Czarek Tomczak Feb 02 '14 at 12:13
  • Don't forget PHP Nightrain. You can just code your page in HTML/CSS/Javascript and never have to touch PHP. FYI, webkit support is coming soon! http://www.naetech.com/php-nightrain – roosevelt Jul 23 '14 at 18:24
  • You can embed browser & hide the window, you can use https://github.com/dns/WinAPI-Embed-Browser/releases as starting example program. – dns Mar 04 '15 at 18:09

16 Answers16

76

HTML5 Apps in 2014

Frames by chrome/webkit

  • Electron (former Atom Shell)

    Electron is an open source library developed by GitHub for building cross-platform desktop applications with HTML, CSS, and JavaScript. Electron accomplishes this by combining Chromium and Node.js into a single runtime and apps can be packaged for Mac, Windows, and Linux. (source)

    The folks at github use this to provide their code editor Atom as an app. It has an documented api and a help channel on the official atom forums.

  • Node-Webkit, the most minimal approach

    node-webkit is an app runtime based on Chromium and node.js. You can write native apps in HTML and JavaScript with node-webkit. It also lets you call Node.js modules directly from the DOM and enables a new way of writing native applications with all Web technologies.

    Intel is behind this (?). I've been told it's very rough around the edges.

  • Brackets Shell, the sandbox of Adobes code editor (and base of Adobe Edge)

    Note: The brackets-shell is only maintained for use by the Brackets project. Although some people have definitely had success using it as an app shell for other projects, we don't provide any official support for that and we haven't done a ton of work to make the app shell easily reusable. Many people will likely find it easier to use a project like node-webkit, which is more generic by design.

    says the readme, but there are quite a lot of folks out there who did it nevertheless.

Frameworks + Tools

  • Adobe AIR, as another answers suggested.

    The Adobe® AIR® runtime enables developers to package the same code into native apps for Windows and Mac OS desktops as well as iPhone, iPad, Kindle Fire, Nook Tablet, and other Android™ devices, reaching the mobile app stores for over 500 million devices.

  • Sencha is a company which sells tools for app developers, including html5 app development and distribution.

Inactive approaches

Community
  • 1
  • 1
Samuel Herzog
  • 3,561
  • 1
  • 22
  • 21
  • 7
    Mozilla Prism is inactive now – Harshith J.V. Jun 25 '12 at 08:39
  • 8
    Just a heads up with Adobe Air. If you're planning on using any kind of javascript template solution (i.e. Handlebars, Mustache) most of them don't work due to security errors related to the new function() javascript calls. – James Parker Aug 07 '12 at 13:46
  • thanks for that very useful hint! unfortunately I hadn't the oppurtinity to test out any of the examples listed above yet. I merely collected them via research. – Samuel Herzog Aug 08 '12 at 00:08
  • You can make your application run outsize the security sandbox. I had that problem with KendoUI templating system also, and was able to overcome it.Either way I switched from Air to Titanium Desktop, but am currently looking for alternatives since the Windows webkit implementation of TD has serious problems with form elements (inputs / dropdowns). – Vasco Costa Aug 17 '12 at 10:02
  • You can consider [Sentenza Desktop](http://www.sentenzadesktop.com) to package HTML5/CSS3/JS web application into Mac OS X application (.app). An API library is also available. It dosen't require any frameworks (like Adobe Air or TideSDK). Mac App Store deployment supported. – Beny Feb 07 '13 at 00:58
  • Unfortunately XULRunner is now marked as Archived content. (a.k.a.) Dead – AnthonyVO Jul 20 '16 at 16:43
  • Atom Shell is now known as [Electron](http://electron.atom.io/) –  Oct 02 '16 at 03:08
15

You can use AppJS which uses Nodejs and Chromium to build html5 apps for desktop. check it out: http://appjs.com Github Link: https://github.com/appjs/appjs

Access Denied
  • 224
  • 1
  • 14
Morteza Milani
  • 1,197
  • 3
  • 19
  • 30
  • 1
    Similar one is node-webkit, it has some nice features like compiling your javascript using v8 snapshot. [link](https://github.com/rogerwang/node-webkit) – pillar15 Mar 01 '13 at 09:23
  • Deprecation Notice AppJS project has not been actively developed for a few years. Please check out NW.js or Electron instead. – Aaron Franke Feb 26 '17 at 02:15
10

Definitely check out Titanium. Just today I took a functional HTML5 app and with a few minor modifications was able to drop it into Titanium and package it up for Mac, Windows and Linux.

And it also supports PHP, Python and Ruby if your app requires "server-side" processing.

ggutenberg
  • 6,880
  • 8
  • 39
  • 48
  • If you want a prepackaged solution, I think this is the answer. – dylanized Nov 26 '11 at 23:53
  • 15
    My experiences with Titanium have been terrible - it looks great on the outside but is stuffed with bugs and becomes hell to use very quickly. I cannot recommend it. – Damian Feb 23 '12 at 14:18
  • 3
    I also thought this would be a good choice but: 1) I could not make it run a simple "create-new-project/run" in Linux (Ubuntu 11.10) 2) Titanium Desktop is being transformed to a COmmunity-Driven project (that means, unless someone takes their code it will die) – Luis Lobo Borobia Feb 29 '12 at 13:43
  • 4
    I know this is old, but I just read this answer, and spent some time until I figured out that Titanium Desktop is dead. So, not an option any more. BTW, I'm thinking about creating something with c# and chromium embedded, as github did in his tool for windows – NicoGranelli Jun 04 '12 at 09:07
  • 6
    Titanium Desktop has become TideSDK http://www.tidesdk.org/ – Peacemoon Jun 28 '12 at 12:53
  • And what is Appcelerator? – Brian Ortiz Aug 24 '13 at 16:44
  • TideSDK has become the paid TideKit https://www.tidekit.com/ Too bad too. – Nostalg.io Apr 12 '14 at 17:31
  • And just for the completeness of this answer, i think that tidekit has died as well before it was released. There are some legal issues concerning the closed company and the money it collected as an early release payment, as you can see in their [twitter page](https://twitter.com/hashtag/tidekit) – gemantzu Aug 08 '15 at 21:12
9

You might want to look at XULRunner from Mozilla. At a 10000 foot level, the FireFox browser is a XULRunner application (obviously a very sophisticated one, but...). But XULRunner lets you use Javascript and XML to create applications, and the browser window is one of those components, so you once you get your basic window up, you can likely do pretty much anything you want.

Also, depending on the sophistication of your application, there are several "widget" frameworks (like Dashboard on the Mac, Yahoo Widgets, Windows Gadgets) which are basically HTML runtimes as well.

Will Hartung
  • 115,893
  • 19
  • 128
  • 203
  • 2
    I highly recommend looking at XULRunner. For what you describe, it's ideal, and well documented. Chrome would also work just as well, I suppose, but I haven't looked into it. – Jared Farrish Feb 02 '11 at 00:48
  • XUL runner is an awesome framework and very flexible, but not well documented as you say. A newbie will have to suffer alot to get thing started. – esafwan Mar 04 '12 at 12:27
5

chrome can do what prism does See -- Tools-> Create application Shortcut

user822746
  • 51
  • 1
  • 1
4

You can try Phonegap, there is a Windows Desktop Port: https://github.com/davejohnson/phonegap-windows

I tried the mac-port, it worked well. I didn't try the windows version yet.

Christian Kuetbach
  • 15,850
  • 5
  • 43
  • 79
3

[On Windows only] try HTML Application (HTA) approach - simply save your .html file with .hta extension. It also provides some additonal settings to get rid of browser window, set level of trust for the app, etc. Read more here: http://en.wikipedia.org/wiki/HTML_Application and here http://technet.microsoft.com/en-ca/scriptcenter/dd742317.aspx

Vik
  • 31
  • 1
2

Check this new project from Mozilla. You can create desktop apps too : https://developer.mozilla.org/en/Apps

Detail here: http://hacks.mozilla.org/2012/05/desktop-apps-with-html5-and-the-mozilla-web-runtime/

Peacemoon
  • 3,198
  • 4
  • 32
  • 56
2

Adobe AIR is meant to let you work primarily in HTML, CSS, and JavaScript while providing a desktop application. (Caveat: I haven't actually used it myself.)

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • 1
    the integrated browser in AIR is old and will never be updated, so I do not recommend it(I used it in more projects) – simion314 Mar 17 '14 at 08:31
  • @simion314: I'm curious, as AIR is an ongoing project, why you say the browser in it will "never" be updated. – T.J. Crowder Mar 17 '14 at 08:47
  • see http://forums.adobe.com/message/6177332 Adobe works more for the mobile part of AIR, and on mobile they use the StageWebView and they will not update the webkit engine in AIR , the stagewebview is limited to just displaying stuff,example if you try to load a complex javascript library or application like ckeditor 4 it will fail because of some incompatibilities with the webkit engine(some are related with the sandboxing but not all) – simion314 Mar 17 '14 at 10:02
1

You can use a embedded server like Tomcat or maybe Apache.

I use tomcat for a complete java web application. Run inside browser, but the application need be installed. The shortcut to start the app, start the service and open the browser.

Or try use webkit

Bruno Tafarelo
  • 11
  • 1
1

A bit late, but you can use a portable version of google chrome, and then create a small windows app to install it, and create a .ink shortcut to its --kiosk and app mode.
Kinda like chrome application shortcuts, but where you install chrome for them.

Frank
  • 1,056
  • 3
  • 17
  • 38
1

If you just need it for Windows, you should consider HTML Applications (HTA), it's been part of Internet Explorer since IE 5 (10+ years).

No server required, full HTML formatting, full access to local resources (even COM / USB ports), awesome. Also, easy to debug with Visual Studio, just bind to MSHTA.exe

You can enable HTML 5 in HTA's with the following meta tag:

<!-- enable html5 features --> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
William Walseth
  • 2,803
  • 1
  • 23
  • 25
1

Hmmm... a virtual machine for HTML5/CSS/JS... sounds like a browser. :)

Maybe Adobe AIR would do the trick, because it's based on the idea of bringing rich Internet apps to the desktop. I've never used it, however.

One thing you could do is develop a very basic desktop app that uses some kind of prepackaged web browser control (e.g. if you're developing for a Mac, just drop a WebView in the window and add some basic code to load your html upon app startup).

Jeff
  • 21,744
  • 6
  • 51
  • 55
1

For mobile phones you can use PhoneGap http://www.phonegap.com/ . Probable with some more coding you can use it for desktop.

user977828
  • 7,259
  • 16
  • 66
  • 117
1

Sencha http://www.sencha.com/ Pokki http://www.pokki.com/

athanis
  • 19
  • 1
1

Currently the answer is that are different solutions of each platform.

  • For MAC OSX You will create a Cocoa Desktop App with a UIWebView
  • For Windows you will make a .NET desktop app with a browser component.
Mustafa Hanif
  • 140
  • 1
  • 3
  • 8
  • I think than use a windows with a browser component has several limitations (can access to filesystem or show popup?), Do you know any project than use this approach?... – clagccs Feb 15 '12 at 21:29
  • Best answer and nobody acknowledges it. In the back mostly all hybrid solutions use a webview component that behaves just like a browser. This is all you need, get a webview up, load the html/css/js and voila! – Dan Ochiana Mar 13 '17 at 19:45