如何将一个网页应用程序放置在启动器上?

有时候我看到一些屏幕截图上有人使用网络应用程序和漂亮的图标在他们的启动器上,我该如何设置这个?

你还可以添加开关 --start-maximized,这样窗口将在最大化模式下打开。 - batte
8个回答

Ubuntu已经内置了这个功能,参见:

你也可以使用更传统的网页应用集成方法:

如果你使用了很多网页应用,这可能会耗费时间,所以我创建了一个名为“Web Applications”的文件夹来保存它们,因为我还需要一个地方来存放图标。我将这个文件夹与Ubuntu One同步,这样在重新安装或新电脑上,我就能立即使用这些应用程序,并且拥有高分辨率的图标。

chromium-browser Install chromium-browser 或 Google Chrome中,你可以通过打开想要制作成应用程序的网站,点击扳手图标,然后选择工具 -> 创建应用程序快捷方式来实现这一点。

enter image description here

然后选择“桌面”以在您的桌面上创建快捷方式:

enter image description here

你还可以在创建应用程序快捷方式中选择“应用程序菜单”,这样它就会放在Dash中,这样你就可以使用搜索功能来启动快捷方式了,但是大多数网站的图标缩放效果不好,所以看起来很丑。所以我会这样做来美化应用程序:
然后将其移动到“Web应用程序”文件夹或您想要保存的任何位置。

enter image description here

下载一个漂亮的图标版本。我推荐Fluid group on Flickr。将图标下载到文件夹中,然后右键点击快捷方式并选择属性。

enter image description here

拖放更漂亮的图标到快捷方式的图标框中,用新的图标替换低分辨率的图标。

enter image description here

将新的时髦图标拖放到启动器上,以获得最终效果。

Drop it on your launcher

最终效果如下:

Gmail and Seesmic in all their glory


1根据您所描述的方式,添加小程序非常顺利。但是,当点击侧边栏符号打开它时,又出现了一个(同样丑陋的)符号。这是个 bug 还是我错过了什么? - FuzzyQ
我遇到了相同的问题。 - sup
对我来说,生成的应用程序被视为在任务栏中的另一个Chromium窗口,与其他Chromium窗口分组显示。 - Yrogirg

你需要创建一个启动器图标(即一个.desktop文件),其中包含Exec=firefox www.askubuntu.com,然后将其拖到启动器上。首先创建一个空文件,并粘贴以下内容:
[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

然后将空文件重命名为somename.desktop,在这种情况下"askubuntu.desktop"是一个合适的名称。现在使用鼠标将其拖到您的启动器上,就完成了。
这不是必需的,但在将其拖到启动器之前,您可以右键单击它,转到属性->权限->允许作为程序执行文件,以便启动器的图标变得可见!
如果您删除*.desktop文件,图标将从启动器中消失。存储这些文件的通常位置是~/.local/share/applications/。

2请通过告诉如何创建一个启动器或链接到相应的答案来改进您的回答,解释如何进行操作。 - hytromo
@con-f-use 应用程序正常运行,但打开时,在启动器上不显示图标。 - d a i s y

目前有两种首选的方法来实现这一点。在Ubuntu 12.04中,您可以通过从PPA安装官方Ubuntu Webapps的预览版来实现(默认情况下与12.10一起提供)。
sudo add-apt-repository ppa:webapps/preview
sudo apt-get update && sudo apt-get install unity-webapps-preview

这只适用于支持的网站(目前约40个)。当您使用Firefox访问该网站时,会询问您是否要将其集成到Ubuntu中。
另一种方法是使用Fogger,这是Ubuntu应用展示的银奖得主。只需从软件中心安装foggerInstall fogger软件包即可。
两个选项都比Firefox Prism和Chrome的常规站点特定浏览(ssb)功能更好,因为它们允许与Ubuntu完全集成。这包括启动器菜单、HUD、指示器和通知。

1雾化器似乎不再有了,有没有替代品? - Josef Engelfrost

渐进式Web应用程序(PWA)

如果你有一个PWA,那就容易多了。我在这里找到的一个方法是:

  1. 安装PWAifynpm install -g pwaify
  2. 使用electron生成二进制文件:pwaify https://voice-memos.appspot.com/ --platforms=linux,或者根据你的PWA URL进行相应操作。
  3. 进入子文件夹并运行该应用程序。

就是这样。


如果您使用的是最新版本的Chromium(>11.0.696.57),它现在可以与Unity兼容。在Chromium中创建应用程序快捷方式,然后将其拖到Unity工具栏上。这适用于11.04版本。

这在Chrome 14及以上版本中似乎出现了问题。现在,所有的Web应用程序都再次归为Chrome下的一个组,而不是独立的图标。 - Adam

我认为为每个应用创建不同的Chromium配置是一个好的做法。由于默认配置中安装的扩展程序不会运行,所以您的应用程序将运行得更快。此外,您可以安装针对您的应用程序的特定扩展程序,这些扩展程序不会在默认的Chromium实例中运行。

如果您想要使用不同的配置来运行您的应用程序,请按照以下步骤进行:

创建一个新的配置文件目录: mkdir ~/.config/NAME_OF_APP
在桌面上右键单击应用程序的快捷方式
添加: --user-data-dir=~/.config/NAME_OF_APP
执行命令并关闭。
如果这个方法不起作用,那么请按照以下步骤操作:
1. 创建一个新的配置文件目录: mkdir ~/.config/应用程序名称
2. 在桌面上右键点击应用程序的快捷方式
3. 添加以下内容: --user-data-dir=--user-data-dir=~/.config/应用程序名称
执行命令并关闭。

1这已经不再必要了。Chrome会在自己的窗口中打开每个应用程序(包括Chromium)。 - MarkovCh1

我同意 @con-f-use 的观点,使用 .desktop 文件 是一个好方法,但我建议使用专为此目的设计的 webapp-container,而不是 Firefox。这是我的示例,取自一个 Ubuntu SDK Web App 项目
[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

要创建快捷方式,只需在您的桌面文件夹中创建一个名为WorkFlowy.desktop的可执行文件,并粘贴以下内容。

1这个对我非常有帮助。 - Arul

在Ubuntu 22.04中,你可以使用"Gnome Web",也被称为"Epiphany Browser"来完成这个操作。
  1. 安装 Gnome Web:

    sudo apt install epiphany-browser
    
  2. 使用启动器打开 Gnome Web

    enter image description here

  3. 打开您想要转换为应用程序的网站。

  4. 打开设置菜单,选择“将站点安装为 Web 应用程序...”

    enter image description here

  5. 选择一个名称并点击“创建”。

    enter image description here

现在你可以将这个网站打开成一个应用程序:

enter image description here

任何你在网页应用中点击的外部链接都会在你的默认浏览器中打开。