Solutions for distributing HTML5 applications as desktop applications?

JavascriptHtmlDesktop Application

Javascript Problem Overview


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?

Javascript Solutions


Solution 1 - Javascript

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

Solution 2 - Javascript

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

Solution 3 - Javascript

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.

Solution 4 - Javascript

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.

Solution 5 - Javascript

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

Solution 6 - Javascript

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.

Solution 7 - Javascript

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

Solution 8 - Javascript

[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

Solution 9 - Javascript

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

Solution 10 - Javascript

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/

Solution 11 - Javascript

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

Solution 12 - Javascript

Solution 13 - Javascript

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.

Solution 14 - Javascript

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

Solution 15 - Javascript

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.

Solution 16 - Javascript

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>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionShai UIView Question on Stackoverflow
Solution 1 - JavascriptSamuel HerzogView Answer on Stackoverflow
Solution 2 - JavascriptMorteza MilaniView Answer on Stackoverflow
Solution 3 - JavascriptWill HartungView Answer on Stackoverflow
Solution 4 - JavascriptggutenbergView Answer on Stackoverflow
Solution 5 - Javascriptuser822746View Answer on Stackoverflow
Solution 6 - JavascriptChristian KuetbachView Answer on Stackoverflow
Solution 7 - JavascriptT.J. CrowderView Answer on Stackoverflow
Solution 8 - JavascriptVikView Answer on Stackoverflow
Solution 9 - JavascriptJeffView Answer on Stackoverflow
Solution 10 - JavascriptPeacemoonView Answer on Stackoverflow
Solution 11 - Javascriptuser977828View Answer on Stackoverflow
Solution 12 - JavascriptathanisView Answer on Stackoverflow
Solution 13 - JavascriptMustafa HanifView Answer on Stackoverflow
Solution 14 - JavascriptBruno TafareloView Answer on Stackoverflow
Solution 15 - JavascriptFrankView Answer on Stackoverflow
Solution 16 - JavascriptWilliam WalsethView Answer on Stackoverflow