如何使用HTML/CSS/JavaScript开发桌面应用程序?

首先,我对专业地做这个不感兴趣。我是一名网络开发人员,我的一位同事最近去了Spotify,他说他将主要为Spotify桌面应用程序使用JavaScript.他说,它使用“ Chrome框架”,里面的一切都像Web应用程序(HTML/JS/CSS)一样。

作为一名从未为桌面开发过任何东西的Web开发人员,这是一个好消息。如果我可以使用我已经知道的技术,并在某种“框架”中实现它们,并且仍然能够构建Windows或更好的跨平台应用程序。

我知道我没有提到任何关于数据库的东西,但即使是一个简单的带有Web技术的Hello World桌面应用程序也会很棒。

那么,如何做到这一点呢?我到底需要/需要知道什么?

168433 次浏览

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.

NOTE: AppJS is deprecated and not recommended anymore.

Take a look at NW.js instead.

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

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

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.

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.

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.

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.