Nativefier: 将网页变成应用

最近我将我的博客的工程文件放到了一台服务器上,这样我就可以在不同的电脑上写我的博客,而不是将我的 MacBook 搬来搬去了。为了尽可能方便客户端,我放弃了 VSCode 的 Remote 方式。因为这种方式要求前端至少要装一个 VSCode。于是我用 code-server 在服务器上搭建了一个 VSCode 的网页环境。

便捷性是有了,不过牺牲了一点点的体验。其中最让人恼火的一点是,我在 Mac 上会习惯用 Command + W 来关闭 VSCode 的 Tab,但是在浏览器上这么操作会关闭整个网页页面。另一个问题是,浏览器上的 Tab 太多,管理反而会麻烦一些。因此,我研究了一下如何将一个网页包装成一个独立的应用。这样上面两个问题都可以解决。

我找到了这样一篇教程:How to use Nativefier

Nativefier 这个工具是基于 Node.js 的,这意味着它有着良好的跨平台特性。使用 npm 即可完成安装:

1
npm i nativefier -g

使用起来非常简单。原教程是以 github 为例的。运行

1
nativefier "https://github.com" --name "Github"

即可完成应用的打包输出。在 Windows 下,这个命令输出的是一个完整的文件夹,里面是免安装版的应用。

如果网页是 HTTPS 的,而且证书会被 Chrome 标注为不安全,那么这时用上面的方法输出的程序是打不开网页的。为了解决这个问题,需要允许我们输出的程序支持载入非安全资源。因此需要带上 --insecure 的设置,即命令变为

1
nativefier "https://github.com" --name "Github" --insecure

一个小问题:在 MacOS 上实验以后发现,在打包后的应用中我按下 Command + W 之后会关闭整个窗口,而非当前的 Tab (Windows 上是可以关闭 Tab 的)。Google 过程中我没有发现直接在 Nativefier 框架下解决这个问题的方法。不过在这个 Issue 中提到

即我们可以为 Chrome 提供一个 --app 参数来以应用封装模式的 Chrome 打开一个 URL。打开的视觉效果和一个独立应用是类似的(不过在 Dock 上仍然和其他 Chrome 窗口放在一起)。具体的操作是在命令行中找到 Chrome 的可执行文件,应该是在 /Applications/Google Chrome.app/Contents/MacOS/ 目录下的 Google Chrome 文件。

我们可以尝试将这个路径设置为一个 alias

1
alias chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"

然后就可以命令行输入 chrome --app="your url" 来打开应用了。