Solutions for distributing HTML5 applications as desktop applications? [closed]

Asked 2/2, 2011 at 0:37 Answered 16/7, 2012 at 14:33

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?

Oakman answered 2/2, 2011 at 0:37 Comment(11)

Chrome + Fullscreen works well – Yokum 2/2, 2011 at 0: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...) – Oakman 2/2, 2011 at 0:39

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. – Isidroisinglass 2/2, 2011 at 0:48

Do you have any other requirements, like accessing local files or other things that are normally not possible within the browser? – Parting 8/8, 2011 at 8:31

Note that windows 8 will have desktop apps running on javascript (my question was originally ahead of its time!) – Oakman 11/10, 2011 at 19:36

This subject has subsequently been brought up in #11215954 and #11016311 – Inquiline 26/11, 2012 at 10:56

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. – Miriam 6/1, 2013 at 10:13

This question is both relevant and topical - as shown by this recent article: clintberry.com/2013/html5-apps-desktop-2013. – Athamas 10/10, 2013 at 7:45

Take a look at PHP Desktop. 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. – Hierolatry 2/2, 2014 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! naetech.com/php-nightrain – Offal 23/7, 2014 at 18:24

You can embed browser & hide the window, you can use github.com/dns/WinAPI-Embed-Browser/releases as starting example program. – Assibilate 4/3, 2015 at 18:9

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

Tide SDK (archived on 2015-07-12 at archive.org), beta version, discontinued on 12th Jul 2015

http://www.tidesdk.org/
XULRunner from Mozilla may do the trick for you but adds some overhead.
app.js ended at 28th Oct 2013 for being surpassed by (https://github.com/rogerwang/node-webkit)[node-webkit].

Because it is simple and yet powerful. Using AppJS you don't need to be worry about coding cross-platform or learning new languages and tools. You are already familiar with HTML, CSS and JavaScript. What is better than this stack for application development? Beside, AppJS uses Chromium at the core so you get latest HTML 5 APIs working. So and focus on the task your application should do.
Mozilla Prism is decomissioned, their slugline was:

Bringing web applications to your Desktop
Prism is an application that lets users split web applications out of their browser and run them directly on their desktop.

Guyot answered 2/2, 2011 at 1:5 Comment(7)

Mozilla Prism is inactive now – Clarify 25/6, 2012 at 8:39

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. – Inger 7/8, 2012 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. – Guyot 8/8, 2012 at 0:8

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). – Andraandrade 17/8, 2012 at 10:2

You can consider Sentenza Desktop 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. – Monochromatic 7/2, 2013 at 0:58

Unfortunately XULRunner is now marked as Archived content. (a.k.a.) Dead – Ferrocene 20/7, 2016 at 16:43

Atom Shell is now known as Electron – Simulcast 2/10, 2016 at 3:8

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

Soucy answered 2/6, 2012 at 14:16 Comment(2)

Similar one is node-webkit, it has some nice features like compiling your javascript using v8 snapshot. link – Boylan 1/3, 2013 at 9:23

Deprecation Notice AppJS project has not been actively developed for a few years. Please check out NW.js or Electron instead. – Tollman 26/2, 2017 at 2:15

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.

Samella answered 6/4, 2011 at 17:55 Comment(8)

If you want a prepackaged solution, I think this is the answer. – Homopterous 26/11, 2011 at 23:53

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. – Unfasten 23/2, 2012 at 14:18

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) – Maudmaude 29/2, 2012 at 13:43

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 – Anatole 4/6, 2012 at 9:7

Titanium Desktop has become TideSDK tidesdk.org – Teddi 28/6, 2012 at 12:53

And what is Appcelerator? – Lovelace 24/8, 2013 at 16:44

TideSDK has become the paid TideKit tidekit.com Too bad too. – Kristofor 12/4, 2014 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 – Pyromagnetic 8/8, 2015 at 21:12

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.

Shadshadberry answered 2/2, 2011 at 0:46 Comment(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. – Mcgarry 2/2, 2011 at 0: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. – Fertilization 4/3, 2012 at 12:27

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

Floorer answered 28/10, 2011 at 11:48 Comment(1)

Unfortunately, application shortcuts aren't available on Mac. – Miffy 30/5, 2013 at 16:12

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.

Villain answered 4/4, 2012 at 20:42 Comment(1)

Link for the mac-port version, github.com/shazron/phonegap-mac. Cheers. – Mechanical 30/5, 2012 at 4:7

[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

Cuisse answered 28/6, 2012 at 15:38 Comment(0)

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.)

Overtire answered 2/2, 2011 at 0:43 Comment(3)

the integrated browser in AIR is old and will never be updated, so I do not recommend it(I used it in more projects) – Moreville 17/3, 2014 at 8:31

@simion314: I'm curious, as AIR is an ongoing project, why you say the browser in it will "never" be updated. – Overtire 17/3, 2014 at 8:47

see 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) – Moreville 17/3, 2014 at 10: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/

Teddi answered 22/5, 2012 at 21:9 Comment(1)

Too bad they dont really create it as a chromeless app. – Perreira 26/6, 2012 at 10:57

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).

Lusterware answered 2/2, 2011 at 0:44 Comment(0)

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

Hyp answered 4/10, 2011 at 5:17 Comment(0)

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

Monacid answered 12/1, 2012 at 14:12 Comment(1)

Sencha: "Starting at $995 per developer seat" Pokki: Windows only... – Inquiline 26/11, 2012 at 5:35

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.

Prakash answered 24/1, 2012 at 13:47 Comment(2)

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?... – Infield 15/2, 2012 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! – Croquet 13/3, 2017 at 19:45

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

Braxton answered 4/4, 2012 at 20:38 Comment(0)

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.

Perreira answered 26/6, 2012 at 10:59 Comment(0)

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>

Groce answered 16/7, 2012 at 14:33 Comment(1)

+1 Look for Linux and Mac support too :) – Unbalanced 9/9, 2014 at 5:34

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

HTML5 Apps in 2014

Frames by chrome/webkit

Frameworks + Tools

Inactive approaches

Recommended topics

Hot tags