开发工具 用 Node-webkit 来解决企业应用浏览器兼容问题

chunlea · 2013年11月29日 · 最后由 cooper 回复于 2014年05月14日 · 11533 次阅读

今天晚上突然间想到的解决方法,实验完成了。

项目背景: 一个网络版本的应用系统,类似企业内部使用,而非受众面广的互联网应用。使用用户基本可控。

问题: 项目中整合了 Bootstrap 3 和 Reveal.js 。结果,Reveal.js 不支持 IE 8 …… Bootstrap 3 的显示效果也是一团渣。 好吧,这个不是他们两个的错误。 但是,肯定,我们很难解决浏览器的这个问题,估计将来的用户群中可能还会有 IE 6 存在,强制用户升级这件事情估计不太靠谱。

另外,我知道可以要求用户安装 Chorme 或者 Chrome Frame,但是,有个非常郁闷的问题,这中国的网络环境,着实让人郁闷。反正,我安装 Chrome Frame 就没有顺畅的时候。

灵感: Node-Webkit。其实这个系统一开始的要求是写单机版,无奈真的不懂单机的开发技术栈,就想着用熟悉的技术来做。后来选型:Node-Webkit+AngularJs+Bootstrap 3+WebSQL。结果,后来写的我想吐,就转为写 Rails 了。 Node-Webkit 本身就是一个 Chrome 浏览器,目前来说,相对成熟。

最终,考虑到 IE 8 下效果基本成为废品,心力憔悴啊。就开始考虑有什么方法可以比较轻松的解决这个问题。

后来,想到 Node-Webkit 的 Package.json 应该可以指定URL而不是单纯的file://,就尝试了下。

Bang。可以实现,并且打包成 exe 安装包。

整个 Node-Webkit 项目目录就两个文件,Package.json 和图标文件。 使用 Inno Setup 打包成安装包之后,15MB,XP 安装无压力。安装之后的大小 50MB,并且可以占据用户的开始菜单和桌面图标。(要知道很多人从来不记 URL)。建议保留 Node-Webkit 的 Frame,隐藏 Toolbar。 同时,Inno Setup 还可以定制安装界面,更好的做宣传。要知道,Inno Setup 常用来打包游戏,界面可以华丽到爆。

这样,就可以将用户浏览器的升级转变为强制安装一个专用浏览器。想起了有道 hex 博客中有这样一句话

开发效率,如果你有过 web 前端开发经历,现在仅要求你支持最新版的 chrome 浏览器,你觉得如何?睡着了都能笑醒的事,heX 做到了;

顺道吐槽下,本来单机版想用有道的 heX 开发,结果,不仅文档欠缺,后期代码都从 Github 上面消失了……


相关链接: https://github.com/rogerwang/node-webkit https://github.com/rogerwang/node-webkit/wiki


再次声明,仅是给企业项目的浏览器兼容项目提供个思路,不适合互联网项目。


贴一下我的 Package.json

{
  "main": "http://10.211.55.2:3000",
  "name": "study",
  "description": "学习系统客户端",
  "version": "0.1.0",
  "keywords": [ "node-webkit" ],
  "window": {
    "title": "学习系统",
    "toolbar": false,
    "frame": true,
    "width": 960,
    "height": 600,
    "position": "mouse",
    "min_width": 780,
    "min_height": 480,
    "icon": "nsfc.png"
  },
  "webkit": {
    "plugin": true
  }
}

真的项目里面仅有两个文件,一个是这个代码,一个就是 nsfc.png


如果你仅仅是想解决 Chrome Frame 安装的网络问题,可以从 http://www.google.com/chromeframe/eula.html?msi=true 预先下载离线安装包。

单机版难道还要运行rails s?

企业内部应用不能规定只许用 chrome 吗

#1 楼 @40hood 肯定不是单机版 , 只是看起来像 ... #2 楼 @krazy 实施起来难度很大 ...

#1 楼 @40hood #3 楼 @song940 可能是我没有表述清除。一开始开发单机版是因为 Boss 认为单机版容易开发,而且需求就是展示一些文件供学员进行学习。 当然一开始是使用 HTML 5 开发的离线应用,就是个 AngularJS 的 Single Page Application。 但是,后来他们要求能进行后台管理,就转为开发网络版了。 #2 楼 @krazy 另外一个问题,这个项目类似企业内部应用,但是实际上还是给申请者使用的。由于,这个申请者每年都会有,而且,质量参差不齐,规定只用 Chrome 不如给他们客户端安装,而且也不用记网址了。

非常感谢,我也遇到这个问题。我也来试试

把 chrome-frame 打包了强制安装就好

#6 楼 @luikore 好方法。可以从 http://www.google.com/chromeframe/eula.html?msi=true 下载 Chrome Frame 的离线安装包

chrome-frame +1

chrome-frame 此项目将于 2014 年 1 月正式停止维护与更新 http://zh.wikipedia.org/wiki/Google_Chrome_Frame

有道词典就是用的 node-webkit

#10 楼 @search 可是他们自己宣称是用了什么 heX,当然,这个 heX 跟 Node-Webkit 的思路是一样的。

非常不错!适合做给企业用的 web app。

@chunlea 你例子中 package.json 文件里"title": "学习系统"后面少一个逗号

#13 楼 @qichunren 谢谢指正,已修改

企业都愿意装客户端的,装个 Chrome 就更容易了,告诉他们这就是应用需要的客户端。

#11 楼 @chunlea 我说错了,有道思路是一样的,用的东西不一样

#17 楼 @Rei 不忍再黑了 ...

有道也搞了个Hex

和 lz 类似,用过同样的方法给客户做了一个基于 B/S 的 C/S 项目...体验和开发都很省事 - -

Node-Webkit 右键功能怎么解决? 当时 也做过类似的,后来没有右键,复制、粘贴。直接打包 chrome 了。

#22 楼 @chunlea 这些文档我都看过,实现很复杂。 直接 打包 chrome 绿色版,加 app 参数,效果更好,毕竟就是纯生的浏览器。

#23 楼 @cooper 也对。我还没有仔细看,回头好好看看。说实话,看到 javascript 就头大。

Adobe's Air 早做了吧

对 Chrome 有恐惧的客户,我一般建议安装 360 360 SE 6.2 以上支持用 meta 标签指定 webkit 内核

node-webkit 的最优秀的地方就是 node 和 webkit 相结合,用 nw 只是访问一个网址。。真是。。

补充一下,我把 nw.exe 用 upx 压缩一下,大小变成了 13M,加上其他 dll,总共压缩成了 26M(安装后版本),开启速度延迟 1 秒多一些。

自动更新,怎么做?

#29 楼 @riancy 直接更新你的服务器端不久好了,这里我说的应用场景是通过提供一个封装好的软件来强制客户企业使用相同的浏览器环境。

直接 打包 chrome 绿色版,加 app 参数,效果更好,毕竟就是纯生的浏览器。 #23 楼 @cooper 有没有打包的教程?

#31 楼 @crazysperm 没有教程 自己琢磨的。 这个方案 我已经 部署 好几个项目了。

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册