How to create standalone desktop web application using Automator in OS X Lion

Without a doubt, web applications are a stable for our daily life especially when you are on OS X. If you do not want to be stuck inside a browser while using web app, Automator in OS X Lion lets you easily create a native application on your Mac based on the web app. This feature of Automator is not available in OS X Snow Leopard or older.

To get started, launch Automator and create a new project.

automator-1

Select the “Application” option from the various templates, and click on the “Choose” button.

On the left panel of Automator main screen, scroll down the list of Actions to search for “Get Specified URLs” action. Drag this action into the right empty panel.

automator-2

On the “Get Specified URLs” action info panel, click on the “Address” field to change it to the address of your web app. In the above example, the address is “http://www.facebook.com”.

The next step is to search for the “Website Popup” action, and drag it to the workflow.

automator-3

Configure the “Website Popup” options on the info panel such as the size of the window and user agent etc. Select File->Save from the menu, key in a name (e.g. “Facebook”) for the application, ensure “File Format” option is set as “Application” before clicking the “Save” button. Automator will save an application file with name “Facebook.app” in your specified directory.

To run your newly created app, just double-click on the app file as you would with any other application. The following picture shows our Facebook.app when launched. There is a dark-gray colored border around the web app. To close the app, click on the “OK” or “Cancel” button at the bottom-right corner. You can move the app file to the Applications folder, and even drag it to the dock for easier launching. 

facebook

How to change the default app icon

App created using this method all come with the default Automator icon. The icon is a file with the name “AutomatorApplet.icns” inside the app bundle. To view the content of the app and locate this file, right click on the app file in Finder, select “Show Package Contents” from the popup menu. The icon file is located under Contents > Resources folder.

automator-4

To change the default icon, you need to drag and drop a “icns” icon file with the same name “AutomatorApplet.icns”. One way to obtain icon file is to google using keyword such as “Facebook icns”. Download the icns file from search result, rename the file to AutomatorApplet.icns, and drag the file into the above location to replace the default icon.