如何利用HTML5打造桌面应用,介绍基于Nodejs实现搭建跨平台桌面应用的框架

更新日期: 2017-11-13阅读: 5.8k标签: 桌面

通常我们会感觉网上有很多有趣的html应用,但这些应用非要你打开浏览器,输入网址。其实我们更喜欢直接点击桌面的一个图标就启动一个程序的这种体验。用html5+javascirpt+css开发的本地桌面应用就是要提高给用户这种体验,这篇文章将介绍开发HTML5本地桌面应用的框架


Electron

Electron是这样一个框架,它可以帮助您使用JavaScript/Html/Css等网站相关技术,非常快速而容易地搭建一个原生应用。  

基于vue框架的实现:electron-vue 充分利用 vue-cli 作为脚手架工具,加上拥有 vue-loader 的 webpack、electron-packager 或是 electron-builder,以及一些最常用的插件,如vue-router、vuex 等等。

地址:https://electron.org.cn/



NW.js

NW.js 是基于 Chromium 和 Node.js 运行的, 以前也叫nodeWebkit。这就给了你使用HTML和JavaScript来制作桌面应用的可能。在应用里你可以直接调用Node.js的各种api以及现有的第三方包。因为Chromium和 Node.js 的跨平台,那么你的应用也是可以跨平台的。

地址:https://nwjs.io/


Electron与NW.js差异:

1. 应用的入口 

 在 NW.js 中,一个应用的主入口是一个页面。你在 package.json 中指定一个主页面,它会作为应用的主窗口被打开。 在 Electron 中,入口是一个 JavaScript 脚本。不同于直接提供一个URL,你需要手动创建一个浏览器窗口,然后通过 API 加载 HTML 文件。你还可以监听窗口事件,决定何时让应用退出。 Electron 的工作方式更像 Node.js 运行时。 Electron 的 APIs 更加底层,因此你可以用它替代 PhantomJS 做浏览器测试。

 2. 构建系统  

为了避免构建整个 Chromium 带来的复杂度,Electron 通过 libchromiumcontent 来访问 Chromium 的 Content API。libchromiumcontent 是一个独立的、引入了 Chromium Content 模块及其所有依赖的共享库。用户不需要一个强劲的机器来构建 Electron。

 3. Node 集成 

在 NW.js,网页中的 Node 集成需要通过给 Chromium 打补丁来实现。但在 Electron 中,我们选择了另一种方式:通过各个平台的消息循环与 libuv 的循环集成,避免了直接在 Chromium 上做改动。你可以看 node_bindings 来了解这是如何完成的。 

 4. 多上下文 

 如果你是有经验的 NW.js 用户,你应该会熟悉 Node 上下文和 web 上下文的概念。这些概念的产生源于 NW.js 的实现方式。 通过使用 Node 的多上下文特性,Electron不需要在网页中引入新的 JavaScript 上下文。

heX

heX 是网易有道团队的一个开源项目,允许你采用前端技术(HTML,CSS,JavaScript)开发桌面应用软件的跨平台解决方案。heX 是你开发桌面应用的一种新的选择,意在解决传统桌面应用开发中繁琐的UI和交互开发工作,使其变的简单而高效,特别适合于开发重UI,重交互的桌面应用软件。  

地址:http://hex.youdao.com/



链接: https://www.fly63.com/article/detial/96

nativefier_将web网页封装成可执行的桌面应用程序

给大家介绍一个工具快速将网站封装成可执行的桌面应用程序的工具:nativefier。nativefier是一个命令行实用工具,基于Node.js很容易的把Web站点创建成一个可执行桌面应用程序。

html5 桌面通知_如何使用 HTML5 的 Notification API

html5的Notification就可以很好的解决这些问题。Notification生成的消息是不依附于某个页面,仅仅依附于浏览器,所以无论你在看那个页面,浏览器是否最小化,只有有消息推送都能看到。

web端Notification桌面消息通知推送功能的实现

需要实时桌面推送的功能,就像平时QQ,微信消息推送那种,这个时候我们就可以用到HTML5 Web Notification 这个API了。如果之前没有为该域名请求权限,则不会有弹窗。选择【允许】,则可以进行桌面推送。

HTML5显示桌面通知Notification

Notification.permission一个用于表明当前通知显示授权状态的字符串。可能的值包括:denied (用户拒绝了通知的显示), granted (用户允许了通知的显示), 或 default (因为不知道用户的选择,所以浏览器的行为与 denied 时相同)。

5个开发桌面应用程序的JavaScript框架

很久以前,开发客户端桌面程序需要我们掌握各种复杂的技术,不过现在,我们只需要使用js就可以开发出桌面应用程序,下面我们盘点5个开发桌面应用程序的框架。

Notification桌面通知实践

Notifications API 的通知接口用于向用户配置和显示桌面通知。requestPermission()方法可以做此事情,返回值有三个 granted(允许), denied(拒绝) 或者 default(默认)。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!