« Back
in javascript php html5 read.

Develop a desktop application using PHP, HTML5, JavaScript & WebSql.

I am sharing a simple method, to develop a clean native desktop application using technologies such as PHP, HTML5, JavaScript & Web Sql. Before starting, I would like to introduce some tools for the development. We don’t need to develop much here, just use some tools to wrap up the web application with a portable browser & server.

Get the Tools

  • PhpDesktop: PHP Desktop is an open source project founded by Czarek Tomczak in 2012. It is a combination of portable php server and a portable browser, and it uses chromium embedded framework to run the application. Php desktop can be downloaded from here
  • Resource Hacker: It's an application to modify the attributes of a .exe file, so that we can change the icon. Download resource hacker from here
  • Inno Setup: Inno Setup is a free installer for Windows programs. This helps to compile our application to a easy installable setup file. And inno setup can be downloaded from here

We can start the development, once we have all the above tools.

Getting Started

Extract phpdesktop, and you can rename it to your project name.But for now, am using phpdesktop all over the article. Locate the www folder in the root, and you can delete all the files inside it. This www folder is actually our application root. So, we need to develop the application here. Its better to develop the application first, and then copy it to the www folder.

While developing the application, you can skip compatibility for any other browsers except web-kits. And the you can use localstorage, web sql for storage purposes. If you are new to web sql, take look here.

I recommend to use google chrome while you develop the application, to avoid compatibility issues in future. After copying the web application to www folder, we need to change some configurations in the application settings. locate the settings.json file in the phpdesktop folder, were we configure everything.

Some important options are explained below, but I would suggest you to go through documentation of ‘setting.json’ at phpdesktop wiki.

Make sure the following settings,

show_console = false 
listen_on = ["", 0]   

Replace 0 with a port number between, 49152–65535. otherwise OS will assign random ports and this may affect local storage and all since application url will be different.

Chrome settings

We can customize chrome with a bunch of options in the same settings.json file. I just mentioned some important settings below and the rest can be found at phpdesktop wiki - settings.

Now change, cache_path = "webcache" to C:/ProgramData/YouApplicationName/ to avoid permission issues for writing data. If you need to use getUserMedia API, add a flag to command_line_switches

"command_line_switches": {"enable-media-stream":""} 

More flags here

Please remember to remove prefixed or —- while adding, and assign an empty string since it should be valid json. For example, adding –enable-accelerated-2d-canvas flag, should be like,

"command_line_switches": {"enable-media-stream":"", "enable-accelerated-2d-canvas":"", } 

Now we can change the application icon using resource hacker. After installing resource hacker, open phpdesktop-chrome.exe with resource hacker. Expand the tree on the left side /Version Info/1/1033; change FileDescription,FileVersion` and other strings and then save it.

The original phpdesktop-chrome will be renamed to phpdesktop-chrome_original, and a new one will be created, with new icon. rename it to you app, am assuming it to be myapp.exe.

Just try executing myapp.exe, and your application should open in a new window.

Develop an Installer

We use Inno setup to develop an installer for application. Run Inno setup, and from the file menu, click new, and continue with the wizard. Its an easy wizard and it explains everything. Just explaining the main step, Application Files. Here you can select the applications main executable. Locate the project directory and select myapp.exe. Then select add folder and browse to phpdesktop folder and click add. You can configure Icons, start menu shortcuts, languages and all in the coming screens. At the end, a script will be generated, and we need to do some modifications there, to create data folder etc.

To create our data folder add,

 Name: "{commonappdata}\{#MyAppName}\data"; Permissions: everyone-full; 

Remember, these should constitute the same path as cache_path, we’ve defined in the setting.json. No need to care about that if you followed the same pattern.

If you need to add the app to start up programs, add the following in the [icons] section

Name: "{commonstartup}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"

And, if you need any icon creation option to checked by default, just remove ‘Flags: unchecked;’ from the respective entry.

Note: Please remember, You dont need to replace the above variables MyAppExeName, commonstartup etc, since they are variables.

So that’s it, we just need to build the compiler, by selecting compile from the build menu. Installer file will be generated at the destination you selected during installer creation.

Setup file is ready, install it and see it in action. This is a beginner level article, but I hope it will be helpful to someone like me. Remember comments are the only way, that you can encourage me. Please feel free to contact me, if you have any doubts.