将 ionic 用作桌面 Web 应用程序

Posted 2023-03-16

【中文标题】将 ionic 用作桌面 Web 应用程序

【英文标题】：Use of ionic as desktop web application

【发布时间】：2014-12-21 00:24:08

【问题描述】：

Ionic 是使用 html5 开发移动应用程序的绝佳框架。我们也希望在桌面浏览器上使用相同的应用程序。制作一个在桌面浏览器和移动浏览器上都运行得最好的单一响应式 UI 并制作应用程序是个好主意吗？或者我们应该为浏览器和移动应用做不同的开发。

【问题讨论】：

我认为只需要管理一个简单地适应屏幕宽度的客户端应用程序是未来，并且可以实现更快、更便宜的产品发展

【参考方案1】：

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

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

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

【讨论】：

优秀的答案。我同意业务逻辑可以保持独立并作为 REST APIS 公开，例如使用基于 Express.js 框架的服务器和 mysql/MongoDB/Redis 数据存储。

您说的是 Ionic 1 还是 Ionic 2？另外，问题只出在资源管理器上吗？

【参考方案2】：

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

【讨论】：

所以我们可以制作 /largeview 和 /shortview。如何根据设备宽度进行重定向？？

***.com/questions/16297238/…

【参考方案3】：

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

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

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

上述文章的作者在一个 Ionic 应用程序中成功使用了它。

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

我没有尝试过，所以我不知道这种方法的优缺点，但我可以想象在某些情况下，您只想快速将已有的应用程序的桌面版本组合在一起。

【参考方案4】：

我的评论太大了。这是为了详细说明并补充 Jeremy Wilken 的出色答案。

这不仅限制了桌面上的浏览器，而且在屏幕空间的一部分上显示移动屏幕看起来非常荒谬（是时候重新思考移动优先的含义了 :)）。对适当 API 的需求再怎么强调也不为过，因为移动格式的流程（导航）很可能在更多的屏幕上有所不同，尽管功能可能相同。

我同意 Jeremy 的观点，即业务逻辑应该保持独立并作为细粒度的 REST APIS 公开，例如使用基于 Express.js 框架的服务器和 MySQL/MongoDB/Redis 或任何其他商业数据存储。因此，REST API 可用于移动/Phablet/Mini Tablet UI（使用 Ionic）和桌面/笔记本电脑 UI（使用 Bootstrap + AngularJS。）。当然我是 JS 的粉丝，OP 可以为服务器选择任何语言。

【讨论】：

“在屏幕空间的一部分上显示移动屏幕” - 您是否建议有人通过实际使用嵌入应用程序的手机图像将 Ionic 应用程序部署为网站屏幕会是什么？如果不是，你能澄清一下你的意思吗？

【参考方案5】：

我建议将 ionic 用于移动设备，尤其是如果您使用 ionic2，则在 angular2 中使用与桌面相同的代码，只需稍作改动

【讨论】：

是的，我使用 angular2 开发了一个 Web 应用程序，只是对 ionic 组件进行了一些小改动，但 ionic2 大脑使用 angular2 代码：

Example Services/providers 代码与 angular2 语法类似，唯一的区别仅在于 ionic2 具有预定义组件代码的 html 部分，例如 .... 其他一切都类似结构和代码术语

谢谢 :) 也会尝试使用 Electron。

【参考方案6】：

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