1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
---
title: Fluid Style web apps for Linux
date: 2014-02-12T13:29:37Z
source: http://nucleartuxedo.com/linux/fluid-style-web-apps-for-linux/
tags: linux
---
If you haven't heard of [Fluid][1] for MacOs, go check it out, it's pretty cool. It takes your favorite web apps and turns them into desktop apps! From what I can tell, it does this by:
* Giving them their own launcher in the desktop
* Launching them in a separate browser window without a toolbar
* Launching with a separate config environment (This way you could have an app for each of your gmail accounts, for example, running simultaneously)
* Displaying notification badges for predictable notifications like for Facebook and Gmail (so when you get 2 new messages, you'll have the fancy notification badge on the launcher)
![][2]
Slick and very useful
This is the height of convenience for many web applications. I, for instance, would love to use this for things that are part of my workflow like [GravityDev][3] or [Asana][4], but which are not part of my normal browsing experience. The problem is that I use Linux for all of my computing, and Fluid doesn't exist for Linux. There is hope, though. If you look at the list of things above, you may realize that most of those things are possible to accomplish without any special software, and the following discussion will explain how it's done.
### Browser Issues
This tutorial will explain how to accomplish Fluid-esqe desktop applications using Google Chrome or Chromium browsers. If you use Firefox, a quick google search will reveal a plugin called Prism. I'll tell you the bad news right now: Prism is no longer maintained and is only compatible with older versions of Firefox. Another alternative to Prism is to create your own launcher (like we're going to do with Chrome), and a nice brief explaination of how to do that can be found [Here][5]. As to other browsers, you're on your own. I haven't looked into it because I don't really do much browsing with them. But since what we're doing inherently removes most of the browsing experience, it doesn't really matter which browser you use.
### Google Chrome and Chromium
The following is geared towards Ubuntu with Unity, but if you use another variation of Linux, the principles still apply, although the steps might not be exactly the same.
**1.** Browse to the website you want to turn into an application.
![Favicon Icon][6]
Not fancy, but it works
**2.** Click on File -> Create Application Shortcuts… and check the boxes for whichever types of launchers you want. I usually just go with "Applications Menu". Then click "Create". This will get you halfway there. Now you'll have a launcher, and by default the icon will be a stretched out, blurry version of the Favicon for the site. Also, this application will not be running in it's own separate config environment. So, for example, if you launch your fancy new GMail application, then in your normal browser, you go to gmail and log out or change accounts, your application will be logged out or have it's account switched as well. If this is good enough for you then Congratulations! You're Done! Enjoy! If not, read on…
**3.** To change the icon and set up your app to use its own configuration, you'll have to edit the _.desktop_ file created by Chrome. This should be located in your _~/.local/share/applications/_ directory, and it will be called _chrome-<url of your app>.desktop_. You can open it by browsing to it and dragging it into an open instance of Gedit. We'll start by changing the Icon. The file, by default, looks like so (this one is for Gmail):
#!/usr/bin/env xdg-open
[Desktop Entry]
Version=1.0
Name=Gmail
Exec=/opt/google/chrome/google-chrome --app=https://mail.google.com/mail/u/0
Terminal=false
Icon=chrome-https___mail.google.com_mail_u_0
Type=Application
Categories=Network;WebBrowser;
StartupWMClass=mail.google.com__mail_u_0
Change the line that says _Icon_ to the path to whatever icon you want to use. You can make one yourself, or find one online (Fluid has a [Flickr Group][7] specifically for these launcher icons), just be sure to put its absolute path in the _.destkop_ file on the Icon line, like so:
#!/usr/bin/env xdg-open
[Desktop Entry]
Version=1.0
Name=Gmail
Exec=/opt/google/chrome/google-chrome --app=https://mail.google.com/mail/u/0
Terminal=false
Icon=/path/to/my/shiny/icon.png
Type=Application
Categories=Network;WebBrowser;
StartupWMClass=mail.google.com__mail_u_0
![][8]
Now it looks fancy
To See your shiny new icon, if it doesn't show up immediately after saving, you have to reset Unity. To do this you hit <Alt + F2> and type the following command
unity --replace
Then hit Enter. Looks good, no? Let's move on to the isolated Gmail environment.
**4.** You should still have the .desktop file open. Find the line that starts with _Exec_. At the very end of that line, we're going to add some information that tells Chrome to use a different configuration directory:
--user-data-dir=/home/username/.config/google-chrome-gmail
Remember, of course, to substitute your own username where it says _username_. So the end result should look like this:
#!/usr/bin/env xdg-open
[Desktop Entry]
Version=1.0
Name=Gmail
Exec=/opt/google/chrome/google-chrome --app=https://mail.google.com/mail/u/0 --user-data-dir=/home/username/.config/google-chrome-gmail
Terminal=false
Icon=/path/to/my/shiny/icon.png
Type=Application
Categories=Network;WebBrowser;
StartupWMClass=mail.google.com__mail_u_0
You can pick any location or name for the new _user-data-dir_ as long as it's unique. If you close your Gmail app now, refresh Unity, and launch Gmail, it should now be in it's own isolated environment! If you look at the list in the outset of this article, you'll notice that we've accomplished 3 of the 4 items. Not bad. If I ever learn how to do the notification badges, I will be sure to tell you all about it in Part 2 of this article. Until then, Enjoy!
[1]: http://fluidapp.com/ "Fluid for the Mac"
[2]: http://nucleartuxedo.com/wp-content/uploads/2012/06/desktop_web_apps.png "Unity Web Apps"
[3]: http://www.gravitydev.com/
[4]: http://asana.com
[5]: http://askubuntu.com/a/137381
[6]: http://nucleartuxedo.com/wp-content/uploads/2012/06/gmail_app_original.png "Gmail Desktop App"
[7]: http://www.flickr.com/groups/fluid_icons/ "Fluid Icons Flickr Group"
[8]: http://nucleartuxedo.com/wp-content/uploads/2012/06/gmail_new_icon.png "Gmail app with fancy icon"
|
