网站封装成 app APP在线打包封装生成源码

文章插图

文章插图
由于每天日常的工作需要，我需要接触大量的外文资料，因此，一个好用的翻译工具必不可少。得益于 Google 在翻译上的优秀表现，将它作为我的主要翻译工具使用也是无可争议。但是在使用中经常会发现， web 端的页面总是会在不经意间被手滑关掉，要用的时候找了一会才发现需要重新打开。
此外，想要在工作时间更好地进行「摸鱼」，用电脑肯定会比用手机更安全。
有了这两个需求，我寻找了数款能够将 Web 转换成 Mac app 的工具，但在体验之后都发现会有这样那样的小问题，有一些甚至无法工作或是生产的 app 无法打开。
直到我发现了它 —— nativefier 。

安装 nativefier
nativefier 是一个基于 Electron 的命令行工具，完全开源，没有 UI 界面，且无需安装任何 app ，只需要通过一行简单的代码，就可以轻松地将任何 Web 页面打包成可以在桌面运行的 app ，并且支持在Windows ， Mac 甚至是 Linux 系统上运行。
P.S. 作者是一位在 Google 工作的软件工程师，似乎是一位华人。

目前， nativefier 在 Github 上已经获得了 2.14 万个 Star 。

使用 nativefier 的过程非常简单，但需要提前准备一些东西。这里我以 macOS 作为演示，其它平台大同小异，可以参考网上的其它教程。
首先，我们需要安装 Node.js 。你可以通过到 Node.js 的官方网站下载之后进行安装，但我这里更推荐使用 Homebrew ，这样就可以在一个终端 app 里搞定全部的事情。

如果你还没有安装 Homebrew ，可以通过下面这一条命令在终端进行安装。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"更多关于 Homebrew 的使用，可以参考这篇文章。
安装好 Homebrew ，就可以安装 Node.js 了。在终端内输入：
brew install node如果因为某些网络原因安装缓慢，可以试试换成国内的镜像源。跑完进度后，可以在终端中输入 node -v 和 npm -v ，测试一下版本，出现版本号即说明安装成功。
有了 Node.js ，我们就可以来安装 nativefier 本体了。同样是在终端，输入下面的命令：
npm install nativefier -g如果提示权限不足，可以试试在前面加上 sudo：
sudo npm install nativefier -g搞定。接下来，我们就用 nativefier 来制作一个 app 。
使用
最简单的使用方法，只需要用 nativefier 加上一个你需要转换成的网站地址就可以了。例如：
nativefier "https://www.sspai.com"第一次运行会下载 Eletron 框架，可能会慢一些。

命令执行完毕后，会生成一个大小在 120 – 150M 左右的，名为「 —darwin-x64」的文件夹。如果你没有更改运行地址，那么会默认出现在你的个人文件夹中。

点击进入文件夹内，就能看到刚刚制作好的 app 了。将这个 app 拖入到应用程序文件夹中，它就会出现在 Lanchpad 里。

一个网页打包的少数派 for Mac app 就做好了。

【网站封装成 app APP在线打包封装生成源码】上面的这个方法，会自动抓取网站的名字和 Logo 来作为名称及 app 图标。但有时， nativefier 也会「翻车」（比如上面 app 名字显示成了「–」），这时候就需要我们自定义 app 的名称。可以用下面这条命令：
nativefier --name "在这里输入 app 名字" "http://www.sspai.com"注意，这个 app 名字不支持中文。如果你想要更改中文的 app 名称，可以在 nativefier 制作好的 app 上直接更改，再拖入到应用程序文件夹中。
不过， nativefier 有个小瑕疵：由于有些网站的图标或 logo 形状不好看，又或者太丑、分辨率太低，导致有些时候生成的 app 图标无法令人满意。

这个问题其实也有解决办法。nativefier 提供了一个 –icon 的参数，只要我们准备一张 png 格式的图片，就可以应用成图标了。
如果你不太明白上面在说什么，你也可以手动进行替换。提前准备好一个 icns 格式的图标，并命名为「electron.icns」，然后在生成好的 app 上右键点击「查看包内容」，进入「Contents – Resources」，将我们准备好的图标放到里面替换原来的图标即可。

例如，我这里就用 Sketch 为 Tinde 和小特画了一个和 macOS Catalina 原生风格类似的高清图标，然后再用 Image2icon 转换成 icns 格式，替换之后，就没有这么强烈的「像素风」了，违和感也降低了不少。

这个页面里有 4 个 app 都是用 nativefier 生成的
除了这些之外， nativefier 还提供了很多可供选择的参数，例如是否要限制 app 窗口的宽高、是否显示菜单栏、、是否在关闭时推出、是否开启 flash 支持等等，你可以在终端直接输入 nativefier 或 nativefier -h 来查看，或者是阅读官方的 API 文档来学习。
哦对了， nativefier 制作的 app ，甚至还支持调用系统的推送。例如将微信网页版打包成 app 之后，有新消息来时，一样也能够收到新消息通知。
好了， nativefier 就给大家介绍到这里，我要用刚打包好的 app 去摸鱼了。