Nativefier: 将网页变成应用

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

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

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

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

npm i nativefier -g

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

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

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

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

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

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

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