教程

更新体验配置

CodePush 为 Cordova 和 React Native开发人员提供了多个选项来配置最终用户更新体验。

本教程介绍适用于 CodePush 更新的三种潜在"更新模式"或部署策略:无提示、活动和自定义。 使用这些选项,开发人员可以控制何时 (检查更新) 以及如何向最终用户显示任何更新通知。

备注

本教程未介绍如何在应用上启用 CodePush。 如果在设置 CodePush 时需要帮助,请访问Cordova 或 React Native"入门"部分。

1.无提示模式

无提示模式更新是更新应用的最简单方法,也是最终用户的入侵性最低体验。

codePush.sync();

如果更新可用,它将以无提示方式下载,在下次重启应用时安装 (最终用户或 OS) 。 但是,开发人员可以使用 参数修改安装 installMode 行为:

  • IMMEDIATE: 更新将立即应用于正在运行的应用程序。 应用程序将立即重新加载新内容。
  • ON_NEXT_RESTART: 已下载更新,但不立即安装。 下次启动应用程序时,新内容将可用。
  • ON_NEXT_RESUME: 已下载更新,但不立即安装。 下次恢复或重启应用程序时(无论首先发生哪种事件)都会提供新内容。

例如,若要立即下载并安装更新,开发人员可以使用 installMode 参数,如下所示:

codePush.sync({installMode: InstallMode.IMMEDIATE});

建议

根据应用的复杂性,立即推送更新对于最终用户来说可能是一种令人困惑的体验 (例如,更改 UI 或丢失当前状态可能会令人困惑) 。 因此,建议仅在达到应用非活动状态一段时间后安装更新。 为实现此体验,开发人员可以使用 InstallMode.ON_NEXT_RESUME和 minimumBackgroundDuration 参数,如下所示:

// Download the update silently, but install on next
// app resume and after 10 minutes of app inactivity
// We recommend doing this call on app start (e.g. `componentDidMount` event on React Native or `deviceready` on Cordova)
codePush.sync({ installMode: InstallMode.ON_NEXT_RESUME, minimumBackgroundDuration: 60 * 10 });

备注

如果未在应用启动时调用 (例如 React Native 或 Cordova) 上的事件,开发人员将需要通过调用 方法通知更新已成功 codePush.sync() componentDidMount deviceready codePush.notifyApplicationReady() 安装。 否则,CodePush 运行时将假定已安装的更新失败并回滚到以前的版本。

备注

对于 Cordova,需要的第一个参数是 ,因此,若要执行相同的操作,应插入 作为调用的第一个参数, codePush.sync() syncStatusCallback null 即:

codePush.sync(null, { installMode: InstallMode.ON_NEXT_RESUME, minimumBackgroundDuration: 60 * 10 });

2.活动模式

与无提示模式更新相比,主动模式更新会提示最终用户可用更新,因此需要用户交互。

此差异是由 参数的用法 updateDialog 引入的。

    codePush.sync({ updateDialog: true });

如果更新可用,应用会自动启动本机提示,要求最终用户获得下载和安装更新的权限。 用户接受更新后,会以无提示方式下载并立即应用更新,并且将在下次应用重启时安装 (最终用户或 OS) 。

更新对话框自定义项

若要自定义更新对话框,开发人员可以创建 updateDialogOption 对象,并按如下所示将该对象传递给 codePush.sync() 调用:


    var updateDialogOptions = {
        updateTitle: "You have an update",
        optionalUpdateMessage: "Update available. Install?",
        optionalIgnoreButtonLabel: "Nop",
        optionalInstallButtonLabel: "Yep",
    };

    codePush.sync({ updateDialog: updateDialogOptions});

请访问Cordova 或 React Native API 参考页,全面说明所有可用的 UpdateDialogOptions 选项。

重要

虽然 Apple 开发人员协议完全允许对 JavaScript 和资产 ((即 CodePush!) 启用的)进行空空更新,但应用显示更新提示的策略是违反其策略的。 因此,我们建议 App Store 分布式应用在调用同步时不要启用 updateDialog 选项,而 Google Play 和内部分布式应用 (例如 Enterprise、Fabric、HockeyApp) 可以选择启用/自定义它。

3.自定义模式

自定义模式可灵活地自定义更新体验的任何阶段,例如提供自定义的"检查更新"或"下载"通知。

更新周期通知

方法允许使用回调挂接到整个更新过程,从而在更新过程的 codePush.sync() 每个阶段提供自定义体验,如下所示。

var onSyncStatusChange = function(SyncStatus) {
    switch (SyncStatus) {
        case SyncStatus.CHECKING_FOR_UPDATE:
            // Show "Checking for update" notification
            break;
        case SyncStatus.AWAITING_USER_ACTION:
            // Show "Checking for update" notification
            break;
        case SyncStatus.DOWNLOADING_PACKAGE:
            // Show "downloading" notification
            break;
        case SyncStatus.INSTALLING_UPDATE:
            // Show "installing" notification
            break;
    }
}

// Prompt the user when an update is available and display a "downloading" modal
codePush.sync({ updateDialog: true }, onSyncStatusChange);

有关所有可用枚举值的完整React Native,请访问Cordova或 SyncStatus 枚举。

添加"正在下载"进度指示器

为了提供增强的体验,开发人员可以选择提供下载进度指示器。 codePush.sync()方法提供了一个不同的回调,使这一点成为可能。


var onError = function (error) {
    console.log("An error occurred. " + error);
};

var onDownloadProgress = function (downloadProgress) {
    if (downloadProgress) {
        console.log("Downloading " + downloadProgress.receivedBytes + " of " + downloadProgress
    }
};

codePush.sync({ updateDialog: true }, onSyncStatusChange, onDownloadProgress, onError);

利用 Azure DevOps 实现部署自动化

持续集成 (CI) 和持续部署 (CD) 是 DEVOPS。 它要求团队具有将开发人员代码的所有工作副本与共享存储库合并的思维模式,从而在提交代码时生成新的生成。 反过来,他们有机会使用 CI 输出,将其部署到一个或多个环境,并最终通过应用更新为最终用户提供服务。

本教程介绍如何使用Azure DevOps (VSTS) ) 和 CodePush 的 Visual Studio Team Services (来创建 CD 环境,以自动执行现有 CI 环境中的应用更新。 即使"适当的"CI 生成不仅编译代码,而且理想情况下还会运行代码分析、单元 (,有时甚至集成) 测试,甚至可以打包代码,但不会讨论这些 CI 详细信息,而是了解 CI 集成的基础知识以及如何设置 CD 环境的详细信息。

概述

Azure DevOps是一系列服务,使团队可以共享代码、跟踪工作以及提供任何语言的软件。

从较高层面来说,它为开发人员提供了:

  • 无限制的免费专用代码存储库
  • 能够跟踪 bug、工作项、反馈等
  • 敏捷计划工具
  • 持续集成生成
  • Enterprise级服务可缩放到任何团队规模
  • 最多五个用户免费

此外,Azure DevOps开发人员可以通过创建有助于完成涵盖整个 CI 和 CD Azure DevOps的任务的扩展扩展来扩展服务。

CodePush 服务提供Azure DevOps扩展,包含一组部署任务,使发布自动化以及直接从 CI 环境推广应用更新。

使用下面讨论的工作流可以极大地减少使开发/alpha/beta 部署保持最新状态所需的工作量,因为可以将更改推送到配置的源代码管理分支,让自动生成处理剩余的工作。 无需手动发布、推广或推出 App Center CLI!

先决条件

完成本模块的要求:

  • Azure DevOps帐户 ([注册免费帐户Azure DevOps帐户 (https://www.visualstudio.com/products/free-developer-offers-vs))

  • App Center帐户 (请按照以下步骤 设置)

  • React Native"CodePush就绪"示例应用 (使用自己的应用或下载"裸机"示例应用,以加快)

    备注

    为简单起见,下面介绍的步骤是使用上述示例项目的 Android 平台React Native完成。 但是,大多数步骤也适用于 iOS React Native Cordova 项目。

1.创建应用程序

首先创建应用,并设置它以使用 CodePush 服务:

appcenter apps create -d VSTSCDSample-Android -o Android -p React-Native

然后使用以下命令创建 和 Staging Production 部署:

appcenter codepush deployment add -a <ownerName>/VSTSCDSample-Android Staging
appcenter codepush deployment add -a <ownerName>/VSTSCDSample-Android Production

若要查看部署密钥,请使用:

appcenter codepush deployment list -a <ownerName>/VSTSCDSample-Android -k

提供部署密钥的 CodePush CLI

保存 Staging 部署密钥,因为它将用于设置项目。

2.添加 CodePush 部署密钥

下载React Native项目,并打开strings.xml应用的 下的示例文件 android > app > src > main > res > values

导航到第 2 行并添加以前记录的 Staging 部署密钥:

添加新的部署密钥

3.将源代码推送到Azure DevOps团队项目

单击 ,在 Azure DevOps创建新项目 New

创建新的Azure DevOps项目

为它指定一个名称, Git 并确保为 选择了 Version control

“新建项目”对话框

创建项目后,复制远程字符串,因为它用于更新本地存储库的远程 URL,以指向新的Azure DevOps项目:

远程Azure DevOps

使用以下命令更新存储库的远程URL:

 git remote set-url origin replaceWithVSTSRepositoryURL

设置新的远程 URL 后,通过Git推送Azure DevOps存储库

 git push -u origin --all

几秒钟后,源将添加到Azure DevOps存储库:

DevOps存储库中的源

4.配置 CI 环境

安装 Azure DevOps 扩展

若要生成项目,需要从 Azure DevOps Marketplace 安装扩展。

对于React Native,执行以下步骤:

  1. 在右上角,单击"购物篮"图标,然后选择"浏览市场"。

    打开Azure DevOps市场

  2. 在搜索框中 react 输入术语,然后按 Enter。 打开并安装 React Native 团队创建的 Azure DevOps 扩展 Visual Studio Client Tools

    搜索 Azure DevOps marketplace 中的 React

创建新生成定义

  1. 在顶部菜单栏中,单击 "生成" 以打开生成中心。 在左侧菜单中,单击绿色的 "+" 按钮创建一个新的生成定义。

    正在创建新的 Azure DevOps 生成定义

  2. Empty从生成模板列表中进行选择,然后单击 "创建" Next

    选择空生成定义

  3. 请确保存储库设置正确 (应为 VSTSCDSample 存储库) 上的默认或主分支。 选中该 Continuous integration 复选框并确保将默认代理队列设置为 "已托管",并单击 "确定" Create

    配置空生成定义

备注

Continuous Integration触发器通知每次将代码推送到默认分支时,Azure DevOps 启动此生成的实例。

配置生成任务

作为 CI 生成配置过程的一部分,你将添加一系列步骤,这些步骤将生成项目并将项目发布 (Android 捆绑包) ,CD 环境将使用该项目更新应用。

生成步骤

按照以下步骤创建所述的生成定义:

  1. 通过单击 Add build step... 并添加类别中的来安装 npm 依赖项 npm Package 。 选择它并指定以下设置:

    • 使用 install 作为 Command
  2. 添加新的生成步骤,通过从类别添加来删除以前创建的任何 "项目" 文件夹 Command Line utility 。 选择它并指定以下设置:

    • 使用 rm 作为 Tool
    • 使用 -rf artifacts 作为 Arguments
  3. 添加新的生成步骤,通过从类别添加来创建新的 "项目" 文件夹 Command Line utility 。 选择它并指定以下设置:

    • 使用 mkdir 作为 Tool
    • 使用 artifacts 作为 Arguments
  4. 添加要从类别中添加的新的生成步骤 React Native Prepare Build 。 选择它并指定以下设置:

    • 选择 Android 作为 Platform
    • 使用 android/app/build.gradle 作为 react.gradle Path
  5. 添加要从类别中添加的新的生成步骤 React Native Bundle Build 。 选择它并指定以下设置:

    • 选择 Android 作为 Platform
    • 使用 index.android.js 作为 Entry File
    • 使用 ./artifacts/index.android.bundle 作为 Bundle Output
    • 使用 ./artifacts 作为 Asset Destination Path
  6. 添加新的生成步骤以发布在此上下文中创建的项目 (通过从类别中添加来运行) 创建的 Android 包 React Native Bundle Publish Build Artifacts utility 。 选择它并指定以下设置:

    • 使用 ./artifacts 作为 Path to Publish
    • 使用 Artifacts 作为 Artifact Name
    • 使用 Server 作为 Artifact Type
  7. 按工具栏按钮保存并命名生成定义 Save

您可以通过按工具栏按钮手动对新生成进行排队,以测试生成过程 Queue build...

生成队列

OK "队列生成" 对话框将启动生成过程:

生成正在运行

备注

之前设置的 Continuous Integration 触发器可确保在每次将代码推送到默认分支时,自动将新的生成排入队列。

5. 配置 CD 环境

作为最佳做法,我们建议创建三个发布环境: "过渡"、"推出" 和 "生产"。 此配置使你能够持续部署到 "过渡",并将其部署到少量的生产用户,并最终在置信度较高的情况下发布到所有生产用户。

安装 Azure DevOps 扩展

若要将 CodePush 服务用作 release 车辆,需要从 Azure DevOps Marketplace 安装其他扩展。

  1. 在右上角,单击 "购物篮" 图标并选择 "浏览 Marketplace"。

打开 Azure DevOps marketplace

  1. codepush在搜索框中输入术语,然后按 enter。 打开并安装 React Native 团队创建的 Azure DevOps 扩展 Visual Studio Client Tools

在 Azure DevOps marketplace 中搜索 CodePush

创建新的发布定义

  1. 在顶部菜单栏中,单击 "发布" 以打开 "发布" 中心。 在左侧菜单中,单击绿色的 "+" 按钮创建一个新的发布定义。

正在创建新 Azure DevOps 发布定义

  1. Empty从发布模板列表中进行选择,然后单击 Next

选择空发布定义

  1. 请确保项目设置正确 (源应指向先前创建的生成定义) 。 选中该 Continuous deployment 复选框并确保代理队列已设置为 Hosted ,然后单击 "确定" Create

配置空发布定义

备注

Continuous deployment触发器通知 Azure DevOps 在每次成功完成生成时启动发布。 此行为可以修改为自动发布,或在正式批准发布后发布。

配置部署任务

对于实际的 CD 任务,你将创建一个过渡环境,该环境将在每次成功生成后通过 CodePush 发布更新。 后跟两个生产环境,它们最初针对一小固定量的生产用户,最后是所有生产用户。

发布环境

按照以下步骤创建所述的发布定义:

  1. Staging通过单击 "环境 1" 标签,键入新名称并按 enter,将默认环境重命名为。

  2. 使用 CodePush CLI 通过键入创建 Azure DevOps 的访问密钥 appcenter codepush tokens create -d "VSTS integration" 。 保存密钥以供下一步操作。

  3. 返回 Azure DevOps, Staging 通过单击 Add tasks 并从类别中选择,将环境配置为向 "过渡圈" 中的用户发布 CodePush 更新 CodePush - Release Deploy 。 选择它并指定以下设置:

    • 使用 Access Key 作为 Authentication Method
    • 使用在上一步骤中创建的密钥作为 Access Key
    • 使用 VSTSCDSample-android CodePush 注册应用程序时使用 (或应用程序名称(如果不同) App Name
    • 使用 Staging 作为 Deployment
    • 使用 "浏览" 按钮设置 Update Contents Path 为指向在生成过程中创建的 "Artifacts" 文件夹。
  4. 添加第二个环境,然后 Rollout 单击 Add environment "创建新环境",将其命名为。 选择 Empty ,按, Next 然后指定以下设置:

    • Specific users在下设置 Pre-deployment approval 以控制用户决定向环境批准部署的用户 Rollout
    • 选择 trigger 以确保在发布完成后此步骤自动启动 Staging
  5. 通过单击 "添加任务" 并从类别中选择,将环境配置为仅面向固定数量的生产用户 CodePush - Promote Deploy 。 选择它并指定以下设置:

    • 使用 Access Key 作为 Authentication Method
    • 使用在上一步骤中创建的密钥作为 Access Key
    • 使用 VSTSCDSample-android CodePush 注册应用程序时使用 (或应用程序名称(如果不同) App Name
    • 使用 Staging 作为 Source Deployment
    • 使用 Production 作为 Destination Deployment
    • 使用 20%Rollout 仅部署到20% 的生产用户
  6. 按 "保存" 工具栏按钮保存并命名发布定义。

  7. 添加第三个环境,然后 Production 单击 Add environment "创建新环境",将其命名为。 选择 Empty ,按, Next 然后指定以下设置:

    • Specific users在下设置 Pre-deployment approval 以控制用户决定向环境批准部署的用户 Rollout
    • 选择 trigger 以确保在发布完成后此步骤自动启动 Rollout
  8. 通过单击 "添加任务" 并从类别中进行选择,将环境配置为面向所有剩余的生产用户 CodePush - Patch Deploy 。 选择它并指定以下设置:

    • 使用 Access Key 作为 Authentication Method
    • 使用在上一步骤中创建的密钥作为 Access Key
    • 使用 VSTSCDSample-android CodePush 注册应用程序时使用 (或应用程序名称(如果不同) App Name
    • 使用 Production 作为 Deployment
    • 使用 Latest 作为 Release Label
    • 使用 100%Rollout 部署到所有剩余的生产用户
  9. 按 "保存" 工具栏按钮保存并命名发布定义。

测试过渡部署

如果同时拥有 StagingProduction 用户,可以按配置测试完整的发布环境。 由于本教程不是这种情况,因此你可以专注于测试 Staging 环境。

若要测试自动工作流,需要部署 "发布" 版本的测试应用,并将更改推送到默认分支,以启动生成并最终发布。

可以通过生成已签名的 APK 并安装使用它创建的发布版本,来创建应用程序的 "发布" 版本。 可在React Native 文档中找到相关说明。

按照以上链接的说明部署应用,进行较小的代码更改,并将更改提交到默认分支。

Azure DevOps 允许在代码中心编辑源代码:

VSTS 代码更改

总结

本教程介绍 Azure DevOps 和 CodePush 如何提高开发人员的体验。 从较高的层次来,Azure DevOps 为团队提供了强大的工具,并使他们能够完全自动完成生成和发布过程,同时 CodePush 可以灵活地将自动更新从过渡环境部署到生产环境。