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

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

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

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

问题: 项目中整合了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 预先下载离线安装包。

共收到 32 条回复

单机版难道还要运行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 没有教程 自己琢磨的。 这个方案 我已经 部署 好几个项目了。

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