Turn Your Web Apps Into Real Apps

When you use a site like Gmail, you have to decide: Do I want to use the service's website, or do I want to use it through an app, like Outlook? Here's how to  get the best of both worlds.

What I'm talking about is something called site-specific browsers, which are essentially dedicated apps derived from the browsers already installed on your system, designed to load up a single web app. Nothing else. The thing is, limiting the app's functionality to a single website means it can do native-like things, like have its own icon, serve up notifications in the OS X dock, and be launched from Spotlight or the Start Menu like a regular, native program. It's also a great way to run multiple instances of the same service—like two Gmail accounts—without one forcing the other to log out.

And hell, you use web apps like Facebook, Last.fm and Gmail just as much and just as hard as you do regular apps, so haven't they earned their own icons? Their own windows, so they don't get lost in a sea of tabs? Their own notifications? Their own places in your application menus? Their own system processes, so a browser crash won't knock them out, too? Their own lives? Yeah, sure they have. Here's how to make it happen.

Mac OS X: Fluid

The best tool for creating site-specific apps in OS X is called Fluid. It's a free framework for creating your own site-specific apps, based on WebKit, like Apple's Safari or Google's Chrome. So!

1. Download it Fluid here, and drag the app over to your Applications folder.

2. Since the site-specific browsers you'll be creating will have their own icons, you'll need to download those. If you don't, Fluid will pull the site's favorites icon to use as the system icon, which is fine, but can look a bit rough, especially if you run your OS X dock large, or use CoverFlow a lot. This Flickr group  has hundreds of available icons, covering just about any site you can imagine. To use them, download the full-size .PNG from Flickr.

3. Create your app! When you open Fluid, You'll be prompted with a window asking you for a URL, a site name (Which will be the app's name, as far as your OS is concerned), a place to save the app (the Applications folder by default) and an option to either use the site's favicon or a custom icon. Fill the fields out, and hit create.


4. Launch your app. The first time you start the app, you'll be prompted to log into the service. After the initial login, though, Fluid will remember your details, so that when you start the app again, it'll be all ready to go
.

5. Customize! Ok, so you've got your web app—now it's time to tweak. If you want to change the look of the site, or how certain parts of it function, Fluid supports client-side userscripts, which basically let you reformat the page, or add functionality to it, however you want. From within a Fluid app, click the Script icon in the Menu Bar, and click "Browse Userscripts.org" and see if you find anything you like. If you do, the script should be downloaded and copied to YourUserName/Library/Application Support/Fluid/SSB/YourApp'sName/Userscripts.

There are also a small number of Fluid plugins, which give Fluid greater native app-like powers. These are scattered around the internet, and a good central resource is hard to come by. This Google string tends to work pretty well for finding them, though.

In addition, Fluid itself has some application settings to play around with, most of which are self-explanatory. One that's not, and that comes in handy a lot, is the "Allow Browsing to any URL" option under Settings > Advanced: This prevents new windows opened in Fluid from opening in your default browser instead, and cures most of the issues I've come across with using Fluid with less popular sites that may not have automatic presets built into Fluid.

Windows: Prism

Prism takes a slightly different approach to the creation of site-specific browsers, in that it's an extension for Firefox, not its own app. The creation process, though, isn't terribly different. Here's the routine:

1. Download the Prism extension for Firefox here. (Note: some people have issues with Prism freezing during the setup process, or find core functions, like minimizing to the system tray, missing in this version. In that case, download the last version of Prism right here—it should fix everything, without sacrificing any major features.)

2. Navigate to the webpage you want to convert into an app, let it load, and select "Convert Website to Application" from the Tools menu in Firefox. You'll be prompted with these options. Fill them out as you please:

If you'd like to use a custom icon, as opposed to the website's favorite's icon, you should download a full-res .PNG file from this Flickr group. These are icons created with Fluid (above) in mind, so some may have an OS X-like aesthetic, but they will work, and in the context of Windows 7, they usually look pretty great.

And that's it! Prism isn't as immediately customizable as Fluid for OS X, but it gets the job done.

Alternative: Prism supports something called "Bundles", which automatically apply settings and application icons for popular websites with a single click. Here are a few to try.

Alternative II: Chrome for Windows offers similar functionality to Prism, albeit in a rather basic, stripped-down form. If your only goal is to isolate web apps in their own windows, though, this'll work fine, and takes just a few seconds: [Video]

We would like to thank life hacker and gizmodo for sharing this wonderful tip!