How do I put a web application on the Launcher?

Question

Sometimes I see pictures of screenshots with people with web applications and nice icons on their launcher, how can I set this up?

Answer 1

Ubuntu has this feature built in, see:

• How do I use Ubuntu's web application integration?

You can also use the more traditional webapp integration approach:

Since these can be time consuming if you use a bunch of webapps I created a "Web Applications" folder that I keep these in because I need a place to hold the icon as well. I sync this folder with Ubuntu One so that on reinstalls or new computers I have my applications all ready to go with the high resolution icons.

In chromium-browser or Google Chrome you can do this by going to the website you want to make into an application. Clicking on the Wrench icon and select, tools -> Create Application Shortcuts:

Then select Desktop to create a shortcut on your desktop:

You can also select "Applications Menu" in the create application shortcut, this will put it in the Dash for you, which is handy so you can use the search feature to launch the shortcut, however most web site's favicons don't scale very well so they look ugly. So instead I do this to pretty up the application:

Then move it to this "Web Applications" folder or wherever you want to keep it:

Download a snazzy version of the icon that is good looking. I recommend the Fluid group on Flickr. Download the icon to the folder, and then right click on the shortcut and select properties:

Drag and drop the nicer icon onto the shortcut's icon box, replacing the low resolution icon with the new one:

Drag and drop the new slick icon right onto the Launcher for the final effect:

And the final effect:

Answer 2

You create a launcher icon (meaning a .desktop file) that says Exec=firefox www.askubuntu.com and drag it to the launcher. So first create an empty file and paste the following content:

[Desktop Entry]
Name=Ask Ubuntu
Comment=Open Ask Ubuntu in firefox
Exec=firefox www.askubuntu.com
Icon=network
Terminal=false
Type=Application
StartupNotify=true
Categories=GNOME;
OnlyShowIn=GNOME;Unity;
X-GNOME-Keywords=Network;AskUbuntu;
Name[en_US]=AskUbuntu

Then rename the epmty file to somename.desktop in this case "askubuntu.desktop" would be an appropriate name. Now use the mouse to grag it to your launcher and you're good.

This is not necessary but before dragging it to the launcher, you can right-click on it, go to Properties->Permissions->Allow executing file as program so as the icon of the launcher to became visible!

If you delete the *.desktop file the icon will disappear form you launcher. The usual place to store these files is ~/.local/share/applications/.

Answer 3

Currently there are two preferred ways to do this. In Ubuntu 12.04 you can use the the preview of the official Ubuntu Webapps by installing it from a PPA (comes by default with 12.10)

sudo add-apt-repository ppa:webapps/preview
sudo apt-get update && sudo apt-get install unity-webapps-preview

This only works for supported websites (currently about 40). When you visit the site with Firefox you will be asked if you want to integrate it into Ubuntu.

The other way is to use Fogger, the silver-prize winner of the Ubuntu App Showdown. Just install the fogger package from software-center.

Both options are better than the regular site-specific-browsing (ssb) features of Firefox Prism and Chrome, because they allow full integration with Ubuntu. This includes the launcher-menu, the HUD, indicators and notifications.

Answer 4

If you use the latest build of Chromium (>11.0.696.57) this now works with Unity. Create the app shorcut from within Chromium then drag it on to the Unity bar. This works on 11.04

Answer 5

I think it is good practice to make a different Chromium profile for every app. Your apps will run faster because the extensions installed in the default profile are not run. Also, you can install extensions specific for your app that won't run in your default chromium instances.

If you want to run your apps with a different profile, do this:

1. Make a new profile directory:

   mkdir ~/.config/NAME_OF_APP
   

2. Right-click on the shortcut to your app on your desktop

3. Add

   --user-data-dir=~/.config/NAME_OF_APP
   

to the command and close.

---

If this doesn't work, do the following:

1. Make a new profile directory:

   mkdir ~/.config/NAME_OF_APP
   

2. Right-click on the shortcut to your app on your desktop

3. Add

   --user-data-dir=--user-data-dir=~/.config/NAME_OF_APP
   

to the command and close.

Answer 6

I agree with @con-f-use that a .desktop file is the way to go, but I would suggest using webapp-container, which is designed for this purpose, rather than Firefox. Here's my example, drawn from an Ubuntu SDK Web App project:

[Desktop Entry]
Comment[en_US]=webapp for WorkFlowy
Comment=webapp for WorkFlowy
Exec=webapp-container --store-session-cookies --webappUrlPatterns=https?://workflowy.com/* http://workflowy.com %u
GenericName[en_US]=
GenericName=
Icon=/home/CORP.INSTRUCTURE.COM/banderson/Pictures/WorkFlowy.png
MimeType=
Name=WorkFlowy
Path=
StartupNotify=true
Terminal=false
TerminalOptions=
Type=Application
X-DBUS-ServiceName=
X-DBUS-StartupType=
X-KDE-SubstituteUID=false
X-KDE-Username=
X-Ubuntu-Touch=true

To create the shortcut, just create an executable file in your desktop folder named something like WorkFlowy.desktop and paste in these contents.

Answer 7

Progressive Web Apps (PWA)

If you have a PWA is much easier. One way I found here is for example:

1. Install: npm install -g pwaify
2. Generate binaries with electron: pwaify https://voice-memos.appspot.com/ --platforms=linux, or whatever your PWA URL is.
3. Go to subfolder and run the app.

That's it.