---
title: '一条命令, 网页变原生应用'
tags:
  - Nativefier
  - 使用体验
  - Electron
  - WebApp
categories:
  - 使用体验
titlename: 847674ff
date: 2018-11-30 18:52:50
updated: 2019-07-19 21:09:45
keywords: [Nativefier, Electron, 网页转应用, 使用体验]
---
如果说本世纪初的互联网还属于起步发展的阶段，无论是网络速度还是连接质量还无法满足人们的需要，那么现在网络已经渗透到我们的生活当中，并且还在不断快速变化，越来越先进的网络技术也开始影响应用程序的编写开发，并引申出了新的应用形态：“网络应用”（Web App）。  

当然上面是从技术角度上讲，从用户角度上讲这样的网络应用技术能够解用户的“燃眉之急”，比如某些应用只有特定平台的版本，如果要在其它平台上运行，那怎么办？如果这个应用同时具有在线网页版本，那就好办了，直接将网页打包变为一个应用就能解决。移动设备上有 PhoneGap 和不少在线的网页转应用服务，**那 PC 上呢，这就要请出这个工具了——Nativefier**（这命名也是够直接，翻译过来就是“本地化”）  <!--more-->

![作者的演示动图](https://storage.live.com/items/5582C1D07E2893FB!133076?authkey=APiqr1tjl5KIc1Q)  

作者做这个应用的原因，是因为他厌倦了在使用 Facebook Messager 等应用聊天时再切换到开了无数标签的浏览器中搜索东西，于是便开发了这样一个项目，来把网页转化为原生网络应用。  

> 作者的原话：
>
> I did this because I was tired of having to `⌘-tab` or `alt-tab` to my browser and then search through the numerous open tabs when I was using [Facebook Messenger](http://messenger.com/) or [Whatsapp Web](http://web.whatsapp.com/) ([relevant Hacker News thread](https://news.ycombinator.com/item?id=10930718)).  

**目前整个项目已经获得了 10k 的 star**，可见这个项目本身还是值得信赖的。如果你仔细看了作者的介绍，**这里提到了 Electron**，Electron 可比 Nativefier 有名多了，作为目前最流行的前端框架，有不少项目都用到了它，比如 Atom 和 VS Code 这些代码编辑器，足见 Electron 地位的重要。  

![此项目获得10k的star](https://i.loli.net/2018/11/30/5c01332288c68.png "此项目获得了10k的star") 

要想使用 Nativefier，**电脑上必须已经配置好 npm**，然后键入以下命令来安装 Nativefier 的依赖包:<font style="color:red">（如果有必要，建议挂梯子下载）</font>   

```
npm install nativefier -g
```

如果要将一个网页转换为应用，命令格式为：

```
nativefier  "<要转换的网页地址>"
```

例如，如果要将 GitHub 转换为应用，以上的命令就应该改为：

```
nativefier  "https://github.com"
```

然后按下 <kbd>Enter</kbd>回车键确认，等待一小会儿，**就会在 Nativefier 所处的根目录生成一个文件夹，文件夹中的内容就是 Nativefier 生成的原生网络应用文件，执行其中的可执行文件即可**。**另外值得注意的是，Nativefier 是支持多平台的（Windows、Mac OS 和 Linux），也支持多架构（x86、x64 和 arm）**，可以说作者考虑得很周全，也确实在一定程度上方便了用户。  

但是，我们生成应用应该自己自定义一个应用的名称，这样才能让它更像一个应用，还需要一个图标（默认是 Electron 的图标），而 **Nativefier 也考虑到了这一点，因此其自身带了不少功能参数，通过指定这些功能参数，我们可以发挥无限可能性将网页变为原生应用**。  

例如，我要将自己的博客网站转换为一个原生应用，同时还要自定义这个应用的名字为“WzBlog”，图标要使用这个站点的图标，这里需要指定两个功能参数：`--name`和`--icon`。命令如下：  

```
nativefier  --name  "WzBlog"  --icon  "G:\HexoBlog\hexo-icon.ico"   "witherzuo.github.io"
```

{% note warning %}   

Windows 下指定的图标，**后缀名必须为 .ico 格式**  

{% endnote %}   

然后敲下回车，耐心等待 Nativefier 执行任务。  

![转换后的界面](https://i.loli.net/2018/11/30/5c013cfc28514.png "转换后的应用界面，已经无限逼近真正的原生应用了")  

除了能够指定图标和应用名称之外，**Nativefier 还提供了其它大量的参数供用户选择**，例如`--tray`可以给应用添加托盘图标，`--platform`可以指定要编译的目标平台，`--full-screen`可以使应用以全屏模式运行，`--flash`可以启用 flash 插件加载功能等等，也可以使用`--x`和`--y`来自定义应用的默认显示位置，如果能够善加利用，Nativefier 完全可以做到“以假乱真”的原生应用。  

总的来说，Nativefier 这一项目还是很实用的，凭借着一些应用程序所具有的网页版本，可以将它们转化为原生应用来弥补一些平台上缺乏应用的情况；另外，这样的转化方式，转换后的应用，其字体显示效果要好于浏览器中展示的效果，尤其是中文字体的衬线效果，看着舒服很多。如果一定要说缺点，除去“转换的应用实际上是 Electron 的套壳，没有网络就无法正常使用”这一情况外，就应该是每个转换的应用都包含了一个 Electron 的核心框架，这一框架大小大约为 50-60MB，还是有一点大的。  
