使用离子作为桌面Web应用程序

时间:2014-10-25 07:23:41

标签: html5 responsive-design ionic-framework

Ionic是使用html5开发移动应用程序的绝佳框架。我们也希望在桌面浏览器上使用相同的应用程序。制作一个在桌面浏览器和移动浏览器上都能发挥最佳效果并制作应用程序的响应式用户界面是否是个好主意。或者我们应该为浏览器和移动应用程序进行不同的开发。

6 个答案:

答案 0 :(得分:27)

为了扩展已经说过的内容,Ionic是专为移动设备而构建和测试的。例如,Internet Explorer未经过测试,无法正确处理Ionic中的许多功能。桌面浏览器确实具有与移动浏览器对应的不同功能。您会严重限制可以在桌面上使用您的应用程序的浏览器。

最有可能的是,您应该为桌面和移动设备提供两种不同的应用程序。除非你有胆量或能力告诉用户他们必须使用Chrome(或Opera)来运行你的网站,否则你需要两个独立的应用程序。您仍然可以将Ionic用于移动网站,但无法使用Cordova的完整平台集成(您将仅限于浏览器提供的本机HTML API)。您当然可以将大部分业务逻辑保留在两个应用程序之间共享的公共核心中。这将需要创建一个共享的角度模块。我在一个带有Ionic应用程序和普通Angular桌面应用程序(使用Bootstrap)的项目中完成了这项工作。

有多种方法可以检测访问者是来自桌面设备还是移动设备。我不知道100%完美的方法,因为它们通常依赖于浏览器的用户代理字符串(并且可以被欺骗,更改等)。有关如何在服务器或编程语言中实现移动检测的一些常见脚本或示例,请参阅http://detectmobilebrowsers.com/

答案 1 :(得分:26)

本周早些时候在ng-europe问过这个问题。离子家伙的答案是分享您的服务和控制器,但对桌面使用不同的视图。 Ionic完全专注于移动设备。

答案 2 :(得分:13)

有趣的是,似乎可以使用名为“Electron”的工具包生成Ionic应用程序的桌面版本,该工具包类似于Cordova / Phonegap的桌面版本,如本文所述:

http://alexbergin.com/2015/streamlining-desktop-and-mobile-app-development

Electron(以前称为Atom Shell)打包嵌入式Chromium webview以生成“真正的”应用程序。这也意味着跨浏览器问题不是问题。

上述文章的作者成功地使用了Ionic app。

如果你走这条路,那么你可能需要使用一些响应技术来优化桌面上的用户体验。

我没有试过这个,所以我不知道这种方法的优点和缺点,但我可以想象有些情况下,你只想快速将一个已经拥有的应用程序的桌面版本放在一起。

答案 3 :(得分:4)

我的评论变得太大了。这是为了阐述并添加Jeremy Wilken的优秀答案。

它不仅限制了桌面上的浏览器,而且在屏幕上显示部分屏幕的移动屏幕看起来非常荒谬(重新思考移动设备首先意味着什么:))。对于适当的API的需求不能更加强调,因为流动(导航)很可能在移动格式中比在PC格式中的更多屏幕上变化,尽管功能可能相同。

我同意Jeremy的观察,即业务逻辑应该保持独立,并作为细粒度的REST APIS公开,例如使用基于Express.js框架的服务器与MySQL / MongoDB / Redis或任何其他商业数据存储。因此,REST API可用于Mobile / Phablet / Mini Tablet UI(带Ionic)和Desktop / Laptop UI(带Bootstrap + AngularJS)。当然我是JS的粉丝,OP可以使用服务器的任何选择语言。

答案 4 :(得分:0)

该框架仅适用于移动混合应用,尽管它可以作为普通的HTML应用。

答案 5 :(得分:0)

我建议使用离子移动设备,特别是如果你使用ionic2,在angular2中使用相同的代码只需稍微改动