使用 PhoneGap 进行渐进式增强？答案

【问题标题】：Progressive Enhancement with PhoneGap?使用 PhoneGap 进行渐进式增强？
【发布时间】：2013-12-13 19:59:35
【问题描述】：

我正在开发 PhoneGapping 一个我从头开始编写的移动网络应用程序，我想知道每个人对渐进增强的想法是什么？

现在，PhoneGap 应用程序只是指向我们的域，所以服务器上的任何代码都是正在运行的。我想尽可能地保持这种方式，但我想知道是否有某种方法可以检测查看者是否通过 PhoneGap 来，然后基于此启用其他功能（例如本地联系人、推送通知） .

我知道 PhoneGap 需要 phonegap.js 文件存在，而且似乎全面包含该文件会给非Phonegap用户带来一些麻烦，所以这里的任何想法都会非常好。谢谢！

【问题讨论】：

您可以修改应用的用户代理。
到什么，但是？我没有深入研究它，但看起来 PG 并没有一个非常独特的用户代理，所以我不知道我是否能够使用类似的东西。似乎在我们的服务器上拥有 phonegap.js 文件也没有帮助 - deviceready 正在触发，但没有任何 API 可用：/
是的，phonegap 与内置浏览器具有相同的用户代理，但在 Android 中很容易修改。没有研究过iOS。您可以在末尾添加一些唯一的字符串（应用程序名称或包或其他内容），然后让您的服务器查找该字符串。如果它在那里，则提供 phonegap 代码，否则提供常规代码。关于API不触发，你用的是什么版本的PG？
嗯，很有趣。我们只是为 Android 构建这个（我们有一个原生的 iOS 应用程序），但这不是一个坏主意。我正在使用最新版本的 PG - 3.2.0-0.17.1
String ua = this.appView.getSettings().getUserAgentString(); this.appView.getSettings().setUserAgentString(ua + " my-custom-whatever"); 至于 API 不可用，您确定插件已安装且 js 加载正确？请记住，在 3.0+ 中，即使是标准 API 也需要显式安装。

标签： javascript cordova progressive-enhancement

【解决方案1】：

我将发布一个指向有关此问题的博客文章的链接，其中包含更多详细信息/示例，但基本上这归结为三件事：

修改来自 PhoneGap 的请求，然后在您的服务器上检测到该请求
确保正确的 Javascript API 位于正确的位置
检测何时显示/启用 PhoneGap 特定功能

我目前的实现方式如下：

1) 修改来自PhoneGap的请求

您可以从 PhoneGap 应用程序向用户代理添加自定义字符串，然后在服务器上搜索该自定义字符串。最简单的方法（在 Android 上）是在您的 platforms/android/src/path/to/your/app/[app_name].java 中。在onCreate 方法中，在super.loadUrl(Config.getStartUrl()); 行之后，添加：

String ua = this.appView.getSettings().getUserAgentString();
this.appView.getSettings().setUserAgentString(ua + " your_custom_string");

2) 确保正确的 Javascript API 位于正确的位置

当您构建 PhoneGap 应用并使用本地源运行它时，PhoneGap 使用的实际 Javascript API 有一个备用方案。如果在本地运行，则根本不需要项目目录中的cordova.js 或phonegap.js 文件。您可以在platforms/android/assets/www 中找到您需要的文件。您正在寻找cordova.js、cordova_plugins.js 和整个plugins/ 目录。然后，在您的 Web 应用程序中，您需要确保您为 cordova.js 指向的文件夹也具有 plugins/ 目录。例如：

<script type="text/javascript" src="/js/cordova.js"></script>

表示所有内容都应该在您的webroot/js/ 文件夹中。

3) 检测何时显示/启用 PhoneGap 特定功能

这就像从早期读取 your_custom_string 的用户代理并启用/禁用功能一样简单。你不会想要加载cordova.js 脚本，除非查看器来自PhoneGap（否则事情会变得很奇怪），并确保你在deviceready 事件上设置了一个事件侦听器，并执行任何特定于PhoneGap 的事件之后的代码被解雇。

即将发布的博文将有一个使用 Ionic 和 PhoneGap 的联系人 API 的简单示例。

就是这样！我对这为渐进增强打开的潜力感到非常兴奋。这让我能够以大约 99% 的相同代码库同时支持移动 Web 和原生（Android 和可能的 iOS），并允许我仅在知道用户拥有这些功能时才启用它们。这就像类固醇上的 hacky 特征检测。

【讨论】：