Web applications have exploded onto the scene. From web-based word processors available online through services like Google Docs and Office 365, to full-fledged video games like Angry Birds made available in Google Chrome, there's plenty of evidence that the online world is expanding to more than just web browsing. But some users don't want to be stuck inside their browsers. For these people, Automator lets you easily create a fully customizable native application on your Mac based around your favorite web apps.
Difficulty: Easy
>> Mac running OS X Lion
>> A URL of a website to convert to a native app
>> Img2icns (Free; img2icnsapp.com)
To get a native application, we’ll choose the Application option from the various workflow templates.
The first step is to launch Automator and select an application-based project from the workflow types that are presented.
Automator works by linking various actions together into a workflow that completes a certain task.
Next, we’ll need to create the Automator application workflow by dragging and dropping the following Automator actions from the sidebar to the main workflow area (in the same order):
- Get Specified URLs
- Website Popup
Now we will need to configure the actions that were just placed into the workflow. Edit the Get Specified URLs action so there is only one URL in the field, and that the URL is that of the web application you wish to create a native application for. We’ll be creating a native application for Angry Birds, so we’ll set the URL to: chrome.angrybirds.com.
In the Website Popup action, you can set the size of the window, but we’ll go with the default here. You can also set the user agent (Safari, iPad, iPhone), which can allow you to get the regular or mobile versions of websites, depending on the user agent you select. You can play around with these settings to get the type of application you want.
Saving the workflow as an application lets us use the web app just like a native Mac app, right down to placing it in the Dock.
To save our creation, go to File > Save, and then specify a name, and ensure that the File Format is set as Application before clicking the Save button.
We grabbed an icon from Google Images and used Skitch to shrink it to 128 x 128 pixels.
To make your native application look more official, we’ll create an icon for it. To do this, you’ll need to get an image that’s 128 x 128 pixels. Using an image editor, you can crop and tweak the image as you like. When you’re ready to create the icon, export the image as a PNG file.
Img2icns will export the required .icns file we need to replace Automator’s placeholder application icon.
Open the Img2icns application that you download from the developers website at img2icnsapp.com. The free version will allow us to export a .icns file in order to replace the default Automator icon file. Drag and drop your PNG file in the application, then click on the Icns option. Select your save location, and then close the Img2icns application. Locate the icon file and rename it “AutomatorApplet.icns”.
The icon may not change instantly, but will change when the application is run.
Finally, right-click on your saved Automator application and select “Show Package Contents.” Next, navigate to Contents > Resources. Drag and drop the newly created icon file into this folder, replacing the default Automator-themed icon.
To close the application, click on the OK or Cancel buttons in the bottom, right-hand corner.
To run your native web application, just double-click on the icon just as you would with any other application. You can place the application in your Applications folder for permanent storage, and even drag it to the Dock for easier launching.
Follow this article's author, Cory Bohon on Twitter.
jscotta
July 28, 2011 at 10:39am
This would be a huge boon to me, if 1Password had Automator actions that I could use to log me in to specific sites. However, 1Password does not even have AppleScript support. I suppose I could script it with screen elements, but that would be a real pain.
