server info
server info

Reputation: 1335

Pack an HTML5 app and deploy it on the desktop

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?

Upvotes: 14

Views: 17308

Answers (6)

dns
dns

Reputation: 2815

You can embed browser control in your C (WinAPI) program using IWebBrowser2.

http://github.com/dns/WinAPI-Embed-Browser/releases

I've created a project on github to make several html app pack into single EXE file.

To access html files from EXE/DLL resource use: res://programname.exe/test.html as path.

You also can hide the window border & just showing the content of your HTML app, or even running on fullscreen. This is very useful if you want to make interactive CD.

Upvotes: 1

Hamza Trabelsi
Hamza Trabelsi

Reputation: 1

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 -

Upvotes: 1

Per Quested Aronsson
Per Quested Aronsson

Reputation: 12120

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.

Upvotes: 4

RedRoosterMobile
RedRoosterMobile

Reputation: 786

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

Upvotes: 5

Tapio
Tapio

Reputation: 3456

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

Upvotes: 8

marvin
marvin

Reputation: 21

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

Upvotes: 2

Related Questions