How to develop Desktop Apps using HTML/CSS/JavaScript? [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
First, I'm not interested in doing this professionally. I am a web developer, a coworker of mine recently left for Spotify and said he will be working mostly in JavaScript for the Spotify Desktop app. He said it uses "Chrome frame" and everything inside is done like a web app (HTML/JS/CSS).
As a web developer who never built anything for Desktop, this is great news. If I can use the technologies I already know and implement them inside some sort of a "frame" and still be able to build a windows or better yet cross platform app.
I know I didn't mention anything about the database, but even a simple hello world desktop app with web technologies would be great to get going.
So how does one go about this? Exactly what do I need/need to know?

You may start with Titanium for desktop dev. Also you may have a look at Chromium Embedded Framework. It's basically a web browser control based on chromium.
It's written in C++ so you can do all the low level OS stuff you want(Growl, tray icons, local file access, com ports, etc) in your container app, and then all the application logic and gui in html/javascript. It allows you to intercept any http request to either serve local resources or perform some custom action. For example, a request to http://localapp.com/SetTrayIconState?state=active could be intercepted by the container and then call the C++ function to update the tray icon.
It also allows you to create functions that can be called directly from JavaScript.
It's very difficult to debug JavaScript directly in CEF. There's no support for anything like Firebug.
You may also try AppJS.com (Helps to build Desktop Applications. for Linux, Windows and Mac using HTML, CSS and JavaScript)
Also, as pointed out by #Clint, the team at brackets.io (Adobe) created an awesome shell using Chromium Embedded Framework that makes it much easier to get started. It is called the brackets shell: github.com/adobe/brackets-shell Find out more about it here: clintberry.com/2013/html5-desktop-apps-with-brackets-shell

NW.js
(Previously known as node-webkit)
I would suggest NW.js if you are familiar with Node or experienced with JavaScript.
NW.js is an app runtime based on Chromium and node.js.
Features
Apps written in modern HTML5, CSS3, JS and WebGL
Complete support for Node.js APIs and all its third party modules.
Good performance: Node and WebKit run in the same thread: Function calls are made straightforward; objects are in the same heap and can just reference each other
Easy to package and distribute apps
Available on Linux, Mac OS X and Windows
You can find the NW.js repo here, and a good introduction to NW.js here. If you fancy learning Node.js I would recommend this SO post with a lot of good links.

Awesomium makes it easy to use HTML UI in your C++ or .NET app
Update
My previous answer is now outdated. These days you would be crazy not to look into using Electron for this. Many popular desktop apps have been developed on top of it.

NOTE: AppJS is deprecated and not recommended anymore.
Take a look at NW.js instead.

It seems the solutions for HTML/JS/CSS desktop apps are in no short supply.
One solution I have just come across is TideSDK: http://www.tidesdk.org/, which seems very promising, looking at the documentation.
You can develop with Python, PHP or Ruby, and package it for Mac, Windows or Linux.

Sorry to burst your bubble but Spotify desktop client is just a Webkit-based browser. Of course it exposes specific additional functionality, but it's only able to run JS and render HTML/CSS because it has a JS engine as well as a Chromium rendering engine. This does not help you with coding a client-side web-app and deploying to multiple platforms.
What you're looking for is similar to Sencha Touch - a framework that allows for HTML5 apps to be natively deployed to iOS, Android and Blackberry devices. It basically acts as an intermediary between certain API calls and device-specific functionality available.
I have no experience with appcelerator, bit it appears to be doing exactly that - and get very favourable reviews online. You should give it a go (unless you wanted to go back to 1999 and roll with MS HTA ;)

I know for there's Fluid and Prism (there are others, that's the one I used to use) that let you load a website into what looks like a standalone app.
In Chrome, you can create desktop shortcuts for websites. (you do that from within Chrome, you can't/shouldn't package that with your app) Chrome Frame is different:
Google Chrome Frame is a plug-in designed for Internet Explorer based
on the open-source Chromium project; it brings Google Chrome's open
web technologies to Internet Explorer.
You'd need to have some sort of wrapper like that for your webapp, and then the rest is the web technologies you're used to. You can use HTML5 local storage to store data while the app is offline. I think you might even be able to work with SQLite.
I don't know how you would go about accessing OS specific features, though. What I described above has the same limitations as any "regular" website. Hopefully this gives you some sort of guidance on where to start.

You can build Javascript apps with Adobe AIR… http://www.adobe.com/products/air.html

CEF offers lot of flexibility and options for customisation. But if the intent is to develop quickly node-webkit is also a good option. Node-web kit also offers ability to call node modules directly from DOM.
If there aren't any native modules to integrate Node-Webkit can offer better mileage. With native modules C/C++ or even C# it is better with CEF.

Related

Local HTML + JS application with filesystem access

I need to create an offline application with HTML and JS, that can edit and write files (local application folder, but NOT sandboxed browser local storage).
Is there any way to do this, in a reasonably lightweight and straightforward way? Researching this question gave me the following overview of available options - Electron is gigantic, Chrome Apps are a discontinued project, W3C FileSystem API was abandoned, W3C File API is very restrictive.
There have been multiple attempts to create an SDK on top of Node.js for building desktop applications powered by modern HTML5 / CSS / JS frontends. AppJS and its offshoot Deskshell come to mind. And then there's Node-Qt, which is built on top of the Qt platform.
Unfortunately, none of these projects reached sufficient levels of maturity for me to recommend them, and they all seem to have been abandoned years ago. NW.js is the only alternative to Electron that I can think of that, at the moment, reached a decent level of maturity and is still being maintained.
That is, at least, if your focus is a desktop computer. For applications intended to be run on mobile devices, you might want to take a look at NativeScript, React Native or Tabris.

Is there a way run an HTML file in a Google Chrome "environment" without having it installed?

I'm making a game with HTML/CSS/Javascript because it's the code I'm most comfortable with at the moment. I'm only really doing this as an exercise in game development and plan to learn C# later. But for now that's what I'm using, and I have a question about it.
Obviously when making a website, you want your website to be compatible with all web browsers equally. Right now, I'm using Chrome to test/debug my game, and I've decided to develop this game with Chrome in mind. But not everybody has Chrome, and not everyone would want to download it in order to play my game.
Is there a way to run an HTML/CSS/Javascript file in a Google Chrome "environment" without having the actual browser installed? Just it's code engine and none of the rest of the browser.
I've been reading about their V8 Javascript engine that they use in Chrome, and am wondering if that is part of the answer I'm looking for. What I'd like to do is include this "engine" in an installer with my game files and have it install like any other game.
Hopefully this makes sense. This may not be possible/exist, but if someone knows something I don't or an point me in the right direction, that'd be amazing. Thanks!
You could look into Node-webkit which essentially allows you to write desktop applications in html/css/js. When you distribute your game along with your node webkit executable, it is always run in the same environment. You can see some cool examples on their demos and examples page.
Usually a common path to convert web application to native desktop applications is to use a "thin" browser as app container and ship it.
A lot of current applications out there are using this trick (Spotify, Slack, etc...) and it works pretty well.
I've read of some people using the CocoonJS game engine framework and successfully ship it with this techniques.
To most famous wrappers, that I know are node-webkit or electron (AKA atom-shell).
Once you include your game in either one of those you can just "compile" it (it is not a real compile, but just to give you an idea) and ship it: with some tricks it is also possible to publish it in the Mac/Win app stores.
In case you want to focus on mobile instead, there are similar frameworks but I don't really know which are the most common.
Note: if you're using fancy WebGL or very advanced stuff these tools may have some issues sometimes.
So essentially you want to install the JS engine to use it with any browser? In this case, the answer is: nope. Browsers act different, they don't have a standard interface, nor have this "swapping" capability in mind.
In case you'd be asking for an embedded browser inside an app... well, isn't that worse than installing Chrome? You may embed webkit/V8, but it's a hard way and you'd know programming.
So simple answer is: you'd make it compatible for at least the evergreen browsers (Chrome / Firefox mainly). Or reduce your target to webkit based only browsers (or in your case V8, i.e. Chrome, Chromium and the forks).
If you want that your game is only for chrome, because you read V8 documentation, you can create it as an extension. There'sn't other way to install your JS, because browser interpret javascript, not compile it. And the docs you need is found at: https://developer.chrome.com/extensions/getstarted

Questions regarding AppJS / Tidesdk

So not sure if this would be the correct place to ask these but I know I could perhaps get some answers.
I am getting into Meteor and now would like to make some desktop apps. I was going to go the route of just making a native Mac app. But then I found the app wunderlist and its open source making use of the tidesdk.
Anyways I was hoping to get some feedback just in general about these frameworks (pros/cons etc). I don't really have a conceptual understanding of what they do. (or what the main difference between the two is).
I notice you can do routing in them. How is this working exactly? Because there is no URLs or client/server side.
Another thing I was wondering is if it would be possible to use MeteorJS on the desktop in a similar way?
Thanks.
Working with TideSDK is quite easy. We are working to make the experience great for developers. You are essentially just creating an HTML5 app in a special Resources folder. In most cases you can drop an HTML5 app directly into the Resources folder, point to the index.html using TideSDK's configuration and have it running in minutes. TideSDK can be used to run clients, servers, processes, and workers. I tend to work with frameworks such as backbone.js where routing is baked into a single page app.
At the core of TideSDK is WebKit, the core technology that powers the Safari and Chrome web browsers. We use three different ports of WebKit in TideSDK, one to reach each platform (Windows, Mac, Linux). On OSX, we can also use the native WebKit. The APIs of TideSDK provide native UI capabilities (that we are enhancing over time). These include native windows, system trays, menus, and dialogs. You can also interact with the clipboard. We have networking and database capabilities, system notifications, and more. We patch Webkit to allow the interpretation of python, php or ruby in the DOM in script tags and are able to bridge objects between languages. Our API's really allow your to reach the resources of your system including interacting with its filesystem.
It would be fun to run meteor in TideSDK. It is currently possible to run node.js within TideSDK using an appropriate startup process so I cannot see an issue running meteor so that it can run client and server within an app.
If you need your apps to reach Apple's AppStore, TideSDK is the only framework that I am aware of that has this potential. Competitive frameworks use ports of WebKit that are not native to the Mac such as the Chrome port (appjs) or the QT port (Sencha Ion). Apple's scan of an app based on these ports will reveal the use of "private APIs". Therefore, you would could not enter the AppStore marketplace with an app based on these. TideSDK is different and can use the native WebKit implementation on OSX. More about this capability will be revealed in the upcoming TideSDK-1.4.0 release. Our upgraded WebKit will also bring the HTML5 capabilities right up to date with the trunk of WebKit. Many of our users are waiting for this important update.
With WebKit eliminated as a barrier to the AppStore, the last issue facing a developer is Apple's sandboxing and entitlement to the resources of the system. We are looking at possible solutions to aid developers with sandboxing requirements. Some apps will be suitable for sandboxing and others will not. That said, if your goal is AppStore compliance, you will need to work with restrictions Apple has in place. I hope this helps.

Is it possible writing a cross-platform desktop application with XHTML, CSS and JavaScript?

Is it possible writing a cross-platform desktop application with XHTML (or HTML), CSS and JavaScript?
If the answer is yes, how to run this application? Should I run it with a browser like Firefox?
Note: Currently Windows supports HTML Application.
It seems that what you're looking for is the Open Web Apps
HTA is really Old technology.
Try tools like Titanium (Appcelerator). They are tools, which render HTML content inside an APP. So, from outside, you will be running an executable but inside , it is loading a HTML file.
Same principle is being used in many apps now a days. Facebook for android is a best example
If client-side JavaScript, and/or HTML/CSS hackery accomplishes the task you wish it to, yes, and with a user agent like Firefox, indeed.
Yes. With HTML5.
The other answer's solutions are great, but generally they assume that the user is connected to the internet to have a server-side that handles the data.
But it's possible to use Open Web Apps (as ZER0 suggested) with HTML5, which has a lot of support for offline web apps.
Pay attention to it, though. Even HTML5 assumes that eventually the user will have some sort of internet connection, and offline functionalities are seen as a "cache". So, I'm not sure that this solution is enough for every requirement, because I don't know how much space HTML5 provides to offline applications

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

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
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?
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.
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
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.
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.
chrome can do what prism does See -- Tools-> Create application Shortcut
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.
[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
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.)
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/
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).
For mobile phones you can use PhoneGap http://www.phonegap.com/ . Probable with some more coding you can use it for desktop.
Sencha http://www.sencha.com/
Pokki http://www.pokki.com/
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.
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
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.
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>

Categories