Html 使用 ionic 作为桌面 Web 应用程序

Use of ionic as desktop web application

提问by Rohit Bansal

Ionic is a great framework to develop mobile apps using html5. We want same application to be used over desktop browser also. Will it be good idea to make a single responsive UI that works best on both desktop browser and mobile browser and make app. OR we should make different development for browser and mobile app.

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

回答by Jeremy Wilken

To expand a little bit on what has already been said, Ionic is is built and tested for mobile only. Internet Explorer for example is not tested and does not properly handle a number of the features in Ionic. Desktop browsers do have different features from their mobile browser counterparts. You would seriously limit the browsers that can use your application on a desktop.

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

Most likely, you should provide two different applications for desktop and mobile. Unless you have the guts or ability to tell your users that they must use Chrome (or Opera) to run your website, you'll want two separate applications. You could still use Ionic for a mobile website though, but without being able to use Cordova's full platform integration (you would be limited to the native HTML APIs provided by the browser). You could certainly retain much of your business logic in a common core that is shared between both applications. That would require creating a shared angular module(s). I have done this in a project with an Ionic app and a normal Angular desktop app (with Bootstrap).

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

There are a number of ways to detect if a visitor is coming from a desktop or mobile device. I don't know of a method that is 100% perfect, because they usually rely on the browser's user agent string (and can be spoofed, changed, etc). See http://detectmobilebrowsers.com/for some common scripts or examples how to implement mobile detection on a server or in a programming language.

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

回答by Nat Wallbank

This question was asked at ng-europe earlier this week. The answer from the ionic guys was to share your services and controllers, but use different views for desktop. Ionic is purely focused on mobile.

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

回答by leo

Interestingly, it seems to be possible to produce a desktop version of an Ionic app using a toolkit named 'Electron' which is sort of a desktop equivalent of Cordova/Phonegap, as explained in this article:

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

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

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

Electron (formerly named Atom Shell) packages an embedded Chromium webview to produce a 'real' app. This also means that cross-browser issues are not a concern.

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

The author of the above article used this successfully with an Ionic app.

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

If you would go down this road then you would probably need to use some responsive techiques to optimize the UX on desktop.

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

I haven't tried this so I don't know the pros and cons of this approach but I can imagine there are cases when you just want to quickly throw together a desktop version of an app that you already have.

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

回答by SheshPai

My comment became too large. This is to elaborate and add to Jeremy Wilken's excellent answer.

我的评论变得太大了。这是对 Jeremy Wilken 出色回答的详细阐述和补充。

It is not only limiting the browsers on a desktop, but showing the mobile-screen on part of the screen real estate looks downright ridiculous (time to rethink what mobile first means :)). The need for proper API cannot be stressed more because the flow (navigation) will most probably vary across more screens in a mobile format than in the PC format though functionality may be the same.

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

I agree with Jeremy's observation that Business logic should be kept separate and exposed as fine grained REST APIS e.g use a Express.js framework based server with MySQL/MongoDB/Redis or any other commercial data store. So, the REST API can be used across Mobile/Phablet/Mini Tablet UI (with Ionic) and Desktop/Laptop UIs (with Bootstrap + AngularJS.). Of course I am a fan of JS, OP can use any language of choice for the server.

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

回答by Geoff

I would recommend using ionic for mobile and especially if you are using ionic2 use same code for the desktop in angular2 with just minor alterations

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

回答by stevemao

The framework is for mobile hybrid app only although it would work as a normal HTML app.

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