我们使用 Teambition 办公协作,但是这个软件没有桌面版,只有网页版。在日常使用中,我们经常会打开很多浏览器页面,当这些页面混合在一起,多个页面间切换时间很麻烦的事情;
虽然可以 Pin 标签,或者收藏,但是终究还是很麻烦,不够方便。所以我们希望能够解决这个问题;
解决方法
在 Ubuntu 中(旧版,具体版本已经忘记),我们见过桌面 Amazon 图标,用于打开 Amazon 网站。我们也在某些 Linux 发行版中见过 Gmail 桌面图标,双击将直接在浏览器中打开 Gmail 邮箱;
所以我们希望也可以使用类似的方式,来解决我们的问题。经过一番查找,得到以下解决方法:
- 通过 GNOME Web Epiphany 创建 | gnome – Run chrome webpage as desktop application – Ask Ubuntu
通过 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 工具
仓库:https://github.com/jiahaog/nativefier
该方法更好,使用 nativefier 工具会将网页嵌套到 Electorn 中,生成独立的应用(具体原理我们不懂,可能还是嵌套在 Webview 之类的组件中吧,断网之后整个就是空白页,还能够使用 Ctrl + R 进行强制刷新,这对于我们来说足够了);
# 11/24/2024 Nativefier is unmaintained · Issue #1577 · nativefier/nativefier … consider using Electron directly which offers much more flexibility …
配置方法
这里不再记录如何安装 nativefier 工具,参考 GitHub – jiahaog/nativefier 页面即可;
这里简单记录使用 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 方法,但是都无效(多半是自己技术不到家);
相关链接
将网页转为应用的其他工具:6 Tools to Turn any Webpage into Desktop Mac App
参考
Linux Fu: Turn A Web App Into A Full Program | Hackaday
How to Turn Any Website into an App on Linux – Make Tech Easier