Pack an HTML5 app and deploy it on the desktop

Question

I have read tons of articles and stackoverflow questions but I seem not get it to work.

I want to distribute some product information for a customer which will be send out on a CD or USB stick. Back in the days I did it with Flash. Because flash could compile into a EXE called Flash projector and could run my Flash content without installation.

Now I want to give HTML5 a spin. And I need a way to pack everything on a CD an make it run everywhere without installation.

I heard something that I could compile chromium and embed it in a c++ application. (http://code.google.com/p/chromiumembedded/) I could use QT with QtWebkit. (http://developer.qt.nokia.com/doc/qt-4.8/qtwebkit.html) I could compile Webkit and embed it in a c++ application... (http://www.webkit.org/)

The examples are to big and I do not have any C++ skills =(

Then there are projects like mozilla chromeless (http://mozillalabs.com/chromeless) (and berkelium (https://github.com/sirikata/berkelium)

With chromeless my JQuery Javascript did not work and Berkelium... I did not get to compile...

I have no budget for http://www.appcelerator.com/ or other paid/commercial options... (also Flash/Air and Silverlight are not an option). Because Content should also be deployed on the web server without the use of plugins ...

I do not need any access to the OS. What I want have my Jquery/Backbone app which consumes JSON files to run in a desktop client without installation.

So no browser adressbar just pickup the index.html and everything else is handled by the app... Something like Fullscreen and Close would be nice...

Unfortunately I cannot rely on the installed browser of the "customers OS" because the target group is to large and I expect alot of old browsers.

Can anyone give me instruction how to compile "easily" an app which makes my web app stuff running on the desktop from CD without security warnings, etc?

Or are there any pre-compiled packeges that I could use?

Solution 1

Node-webkit combines the Chromium (Chrome) browser with Node.js. As I understand it, you don't need the extra APIs, but you don't need to use them, simply creating a really short json file and zipping up your project is enough, and you can even combine everything into a single executable. The project provides binaries, so no compiling needed.

https://github.com/rogerwang/node-webkit

Solution 2

I also tried Awesomium(it's c++ and 40mb+) PyWebKit(did work but my svg mousemove-listeners didn't) therefore ended up using cefpython and pyinstaller.

Here's what I just did to get a "one-click-windows-web-app-executable".exe.

• downloaded cefpython , it comes with a compiled dll with chromium inside (20mb)
• run "python cefsimple.py" to see if it's working (it should)
• now download pyinstaller
• unpack if to some folder
• copy all the files of cefpython to you newly created pyinstaller-folder
• copy from pyinstaller/utils MakeSpec.py and Build.py one folder down
• run "MakeSpec.py cefsimple.py" to create a cefsimple.spec file for the built
• If you try to run "Build.py cefsimple.spec" if will copy the files to a folder called dist
• if you run the exe it won't work, because some dlls and an icon are missing
• lets add the dlls by changing the spec-file (I put it later in the text)
• is you build it again, it will copy the icon and everything else to the folder so that the exe will run (you'll see cefsimple.html in a real embedded chromium frame)
• now you can play around either with the embedding or the pyhton-code to fix your http-links and you'll get a fine "one-click-windows-web-app-executable" :-) (see --onefile option in pyinstaller docs)

cefsimple.spec:

# -*- mode: python -*-
a = Analysis(['cefsimple.py'],
             pathex=['c:\\pyinstaller-2.0'],
             hiddenimports=[],
             hookspath=None)
pyz = PYZ(a.pure)
exe = EXE(pyz,
          a.scripts,
          a.binaries,
           [('icudt.dll', 'icudt.dll', 'BINARY')],
               [('avcodec-54.dll', 'avcodec-54.dll', 'BINARY')],
               [('libEGL.dll', 'libEGL.dll', 'BINARY')],
               [('avformat-54.dll', 'avformat-54.dll', 'BINARY')],
               [('avutil-51.dll', 'avutil-51.dll', 'BINARY')],
               [('d3dcompiler_43.dll', 'd3dcompiler_43.dll', 'BINARY')],
               [('d3dx9_43.dll', 'd3dx9_43.dll', 'BINARY')],
               [('libGLESv2.dll', 'libGLESv2.dll', 'BINARY')],
               [('locales\\en-US.pak', 'locales\\en-US.pak', 'DATA')],
               [('icon.ico', 'icon.ico',  'BINARY')],
          a.zipfiles,
          a.datas,
          name=os.path.join('dist', 'cefsimple.exe'),
          debug=False,
          strip=None,
          upx=True,
          console=False, icon='icon.ico' )
app = BUNDLE(exe,
             name=os.path.join('dist', 'cefsimple.exe.app'))

If it should run on any windows 2000+, no python, no system libraries, no additional dlls nor icons needed.

If you build it on Windows7 64 bit, it won't work on 32 bit systems

If you build it on WindowsXP 32bit it works everywhere. Even in Wine. But somehow I couldn't get the icon out of the exe for the titlebar. had to load it from external(code in cefwindow.py).

Ask me for details while it's still fresh!

EDIT:

to activate local json requests: # BrowserSettings, see: http://code.google.com/p/cefpython/wiki/BrowserSettings browserSettings = dict() browserSettings["universal_access_from_file_urls_allowed"] = True browserSettings["file_access_from_file_urls_allowed"] = True

Solution 3

For a good overview, check out this review article by Clint Berry. He covers TideSDK, AppJS, Node-webkit, Sencha Desktop and Brackets Shell, and lists pros and cons of each solution.

EDIT: After having read the review, I chose Node-webkit for my own project, and it works great! It does not require you to build the app according to any specific paradigm. I just took my standard AngularJS web app as it was, added the required manifest file, and built it for Windows and OSX.

Solution 4

as somebody mentioned in comments, you can use xulrunner according to this: https://developer.mozilla.org/en/Getting_started_with_XULRunner you just download xulrunner, unzip it in a folder,configure it and make it start in autorun.inf or something like that. no compilation needed (i presume you need to present it on windows, but other platforms should not be a problem as well).

Solution 5

i made an application for HTML5 games developers , if you want to run your html5 games or apps on windows like native applications, no need for hosting or manually running a local server in order to access html5 features.

WinApps Jx Builder is an application that allow you to pack your HTML5, java script ,CSS into one Executable application for windows that run Native-Like on Windows OS. From now on you will run HTML5 websites,applications,games on your Desktope with only double click, and WinApps JX will take care of the rest.

But you Need To install Google chrome frame on your machine :

google chrome frame

- WinApps Jx -

View more solutions

Comments

[Mr Lister]

I still think a regular browser in Kiosk mode would do.

[Ben]

I've successfully used XULRunner to make a desktop app in the past, you could check it out (it's the UI framework used by Firefox, Thunderbird, Songbird..)

[Anderson Green]

Is it possible to send command-line arguments to node.js in node-webkit (so that you can obtain the command-line argument using process.argv?)

[Tapio]

@AndersonGreen: Yes. For more info, see github.com/rogerwang/node-webkit/wiki/…

[server info]

thanks for your reply sounds interesting. Does this make a setup/installer or a runtime which executes with no dependencies? Because I would not like to make the user install something...

[RedRoosterMobile]

you just have the exe that points to some relative folder where your index.html lies. so it's the exe file plus your website and this is totally independent from anything. just click the exe and it's running.

[RedRoosterMobile]

if you wan't an exe with all html/css/.. included you could play around with iexpress.exe. It's part of all windows operating systems, very famous amongst hackers and work like charme. Otherwise you hab to tell your spec file where ALL the files are. This might lead to confusion.

[server info]

I like your idea and I am working on it to get it running. I have some issues with dll. First I had not install the win32api now I have a manifest error on other machines. The pulic key does not match the manifests one...

[Dennis Meng]

That doesn't actually answer the given question.

[Hamza Trabelsi]

yes sorry , i meant i will provide the application to do this job , very soon maybe tonight.

[Dennis Meng]

You misunderstand me. Ideally you should be answering the question here in the space you have. If you're going to write an application to do it, then at least wait until you've finished before posting (if you haven't yet, you're not really answering the question, and given that there's been no other activity on this question for the past two months; there's no rush). Once you finish, you also want to make sure you don't fall into the trap of providing a "link-only answer".