# 2021-01-08 #「Linux」- 将网页应用变为桌面应用

问题描述

我们使用 Teambition 办公协作，但是这个软件没有桌面版，只有网页版。在日常使用中，我们经常会打开很多浏览器页面，当这些页面混合在一起，多个页面间切换时间很麻烦的事情。

虽然可以 Pin 标签，或者收藏，但是终究还是很麻烦，不够方便。所以我们希望能够解决这个问题。

解决方法

在 Ubuntu 中（旧版，具体版本已经忘记），我们见过桌面 Amazon 图标，用于打开 Amazon 网站。我们也在某些 Linux 发行版中见过 Gmail 桌面图标，双击将直接在浏览器中打开 Gmail 邮箱。

所以我们希望也可以使用类似的方式，来解决我们的问题。经过一番查找，得到以下解决方法：

第一种、使用 Chrome 保存

使用方法

该方法类似于 Amazon 图标或 Gmail 图标的功能，双击之后将在独立的浏览器窗口中打开页面。方法如下：

1）Click “the 3 dots” on the top-right corner
2）Click More tools
3）Click Create shortcut...

如果未选 Open as window 选择框，将会在桌面创建 .desktop 文件，双击即可打开页面（但是页面会在当前浏览器窗口打开）。
如果选择 Open as window 选择框，将会直接以窗口方式打开当前页面，而不会创建 .desktop 图标文件。

第二种、使用 nativefier 工具（推荐）

该方法更好，使用 nativefier 工具会将网页嵌套到 Electorn 中，生成独立的应用（具体原理我们不懂，可能还是嵌套在 Webview 之类的组件中吧，断网之后整个就是空白页，还能够使用 Ctrl + R 进行强制刷新，这对于我们来说足够了）。

配置方法

这里不再记录如何安装 nativefier 工具，参考 GitHub - jiahaog/nativefier: Make any web page a desktop application 页面即可。

这里简单记录使用 nativefier 创建应用的命令：

nativefier --verbose     --name teambition     --icon ./logo-one.png     "https://account.teambition.com/login" 

# 对于上述命令：
# --verbose 查看创建过程日志
# --name 执行应用程序名，在我们的场景中，将输出到 teambition-linux-x64 目录
# --icon 指定应用图标，否则任务栏将无法显示应用图标
# "https://xxxx" 指定将要打开的页面

sudo chown -v root: teambition-linux-x64/chrome-sandbox 
sudo chmod -v 4755 teambition-linux-x64/chrome-sandbox

# 对于上述两条命令：
# 是必须的，否则启动应用时，将会提示 chrome-sandbox 的权限及所有者问题

./teambition-linux-x64/teambition

# 对于上述命令：
# 用于启动应用程序。如果我们前面没有指定 --name 选项，并且 nativefier 无法确定应用名，则默认
# 使用 APP 作为名称，类似 ./APP-linux-x64/APP 来启动应用程序 

我们注重解决问题，而不是深入研究，因此该笔记没有介绍更多细节，细节内容请参考官方文档及手册。

常见问题

无法显示 prompt, confirm, alert 等等提示
Alert, Confirm, Prompt window not showing · Issue #130 · jiahaog/nativefier
javascript - Electron : Confirm and Alert of a website in a webview doesn‘t show - Stack Overflow
Electron 3.x and later break CSS injection · Issue #703 · jiahaog/nativefier

受到 Electron 本身限制，不支持 confirm 等等的显示。解决方法是通过 --inject "/path/foo.js" 注入 JS 代码，代码内容如下：

window.confirm = function (msg) {
    console.log(‘always agree: ‘, msg);
    return true;
};

// 但是这种方法并不能解决所有问题，比如下面的问题：

// 问题：我们将 Jumpserver 套在 Nativerfier 中，但是 Webterminal 无法关闭

// 原因：经过查找是 beforeunload 事件的原因，在 Developer Tools / Elements / Event Listerners 中移除即可

// 解决：
// 在 Console 中，执行：removeEventListener(‘beforeunload‘, getEventListeners(window)[‘beforeunload‘][0]["listener"])
// 在 Javascript 中，执行 window.removeAllListeners(‘beforeunload‘, (event) => {});（方法 getEventListeners 由 Developser Tools 提供，不可使用）
// 另外，使用 window.onbeforeunload = null; 是无效的，我们也试过其他 jQuery 方法，但是都无效（多半是自己技术不到家）。

第三种、使用 GNOME Web 创建（正在使用）

Apps/Web - GNOME Wiki! aka. epiphany-browser

该浏览器与 GNOME 桌面集成，可以创建应用程序，并且能在独立浏览器中打开。

使用方法

首先,安装该浏览器：apt-get install epiphany-browser

然后，使用该浏览器打开页面 => 右上角三条横线 => Install Site as Web Application，

常见问题

使用注意以下几点：
1）使用 GNOME Web 创建的应用程序，数据目录为 ~/.local/share/epiphany-<application_name>-<hash>/
2）并且该目录中包含 .desktop 文件，并以 软链接 形式链接到 ~/.local/share/application 目录中。

其他说明事项：
1）如果更新图标（Preference），需要重启 gnome-shell （Alt+F2 r）才能生效。
2）某些页面会带来较高的负载，这与 页面 及 浏览器内核 都有关系。

相关链接

在 GNOME Dock 中，没有显示 Add to Favorites 选项：Add to Favorites option does not show up

将网页转为应用的其他工具：6 Tools to Turn any Webpage into Desktop Mac App | by Justin Ng | Workflow Lab | Medium

参考文献

K4NZ/将网页应用变为桌面应用
Linux Fu: Turn A Web App Into A Full Program | Hackaday
gnome - Run chrome webpage as desktop application - Ask Ubuntu
GitHub - jiahaog/nativefier: Make any web page a desktop application
How to Turn Any Website into an App on Linux - Make Tech Easier