web应用打包成桌面可执行程序

本教程旨在帮助开发人员把web应用程序打包成一个可执行的桌面应用程序，并生成一个安装包setup.exe，直接安装到本地电脑，方便用户使用。

1、背景

开发web项目时，大多数选择主流的chrome等浏览器作为开发调试工具，但最终用户可能要求兼容IE等不常用的浏览器，此时如果重新开发需要耗费很大的人力、物力。针对此种情况，可以考虑把web应用程序打包成一个桌面应用程序，既方便用户使用，又不用考虑浏览器的兼容问题。

2、名词解释

本文中所用到的名词术语和名词缩写的解释如表1-1所示。

                                                                                               表1-1 名词解释

术语/缩写	定义
nw	node-webkit

3、nw打包web应用

把web应用程序打包成桌面应用程序并最终生成一个安装包exe基本流程为：【使用node-webkit把web应用打包成桌面可执行应用exe】—>【使用reshacker修改exe的版本信息、logo等内容】—>【使用inno把可执行的桌面应用exe程序打包成安装包exe】。

开发人员可以到nw官网下载nw程序，考虑到最终打包的桌面应用程序可能运行在32位机器或者64位机器上，下载nw的32位和64位程序，分别打包32位桌面应用程序和64位桌面应用程序。

下载后解压，其目录结构如下图所示。

nw是作者编译好的nw.exe来启动的，nw根据程序描述文件package.json来启动主页面加载到webkit内核中，默认的解压后没有package.json文件。因此，我们需要创建配置文件package.json来设置我们web应用程序，如下图所示。

其基本内容如下：

{
  "main": "http://www.abc.com",
  "name": "测试",
  "description": "测试",
  "version": "1.0",
  "keywords": [ "abc", "abc" ],
  "window": {
    "title": "测试",
	  "icon": "abc.png",
    "toolbar": true,
    "frame": true, 
    "width": 1300,
    "height": 768,
    "position": "center",
    "min_width": 1200,
    "min_height": 600
  },
  "webkit": {
    "plugin": true
  },
  "chromium-args":"--incognito"
}

其中几个比较重要的属性：
 main: web应用程序的主页面，这里我们配置的是web应用部署服务器的地址，当部署服务器改变时，可以修改此地址。
 name: 应用程序的名称
 window: 主要描述桌面应用程序的窗口信息，title属性描述窗口的名称，nw.exe启动后，右键任务栏中的桌面应用程序可以看到修改后的名称。icon修改桌面应用程序的图标，修改后可以在任务栏中看到修改后的图标。

4、使用reshacker修改nw.exe信息

虽然nw.exe根据配置文件package.json以桌面应用形式来运行web程序，但是程序在任务管理器中的进程名、进程icon、版本信息等都还是nw.exe信息。可以使用reshacker把nw.exe相应的信息修改为web应用程序的信息，例如进程名、进程icon等等，使得生成的桌面应用程序更加专业，其具体操作流程如下。

1、使用reshacker打开nw.exe

2、在图标组中替换exe运行时进程的icon

3、在版本信息中修改exe的版本信息

4、修改完毕点击【另存为】，命名exe应用程序为系统名，例如：test.exe,删除nw.exe。再次运行时任务管理器中的信息、exe属性信息等就都改变了。

3、使用inno打包成安装包exe

完成上面的操作之后，虽然可以以桌面应用程序的方式运行web程序，但是对于用户来说体验还是不好，必须拷贝整个解压后的nw文件夹，然后点击运行新生产的test.exe才能使用。为了方便用户使用，使用inno把修改配置后的test.exe打包成一个安装程序setup.exe，用户直接下载安装包安装到本地电脑上使用。

4、注意事项

使用inno打包生成安装后安装到本地运行，由于登陆页面的密码输入框类型为password，每次登陆之后，webkit内核默认的都会记住用户名、密码。再次打开运行时会自动填充登陆历史记录的用户名及密码，显然这导致用户密码不安全。

解决办法：

修改密码输入框type为text，通过js编程实现对密码输入密文显示。