capacitor集成codepush热更新

Codepush是微软appcenter的一项服务，支持开发者将Cordova， React Native应用的更新直接推送到终端用户的设备上。Codepush相当于一个中心存储库，开发者可以将更新推送到codepush，从客户端发起查询是否有更新并进行安装，从而实现热更新。

关于Cordova或者React Native集成codepush的教程网上已经又很多了，但是从Capactior集成教程却寥寥无几。官方目前还没有实现对capactior的支持，但是又大佬从microsoft/cordova-plugin-code-push项目fork了一份：https://github.com/mapiacompa...，接下来我i将以这个项目为基础，记录下爬坑的全过程。

一、注册appcenter账号并安装appcenter-cli

1. 访问https://appcenter.ms，注册app center账号
2. 通过npm安装appcenter-cli
   npm install -g appcenter-cli

二、准备app并开始使用cli

1. 使用appcenter管理画面，或者cli创建app

   ※ 如果有安卓和IOS两个平台的话，需要分别创建

2. 使用cli

   ①登录，cli的login命令会打开浏览器，要求用户在浏览器上进行认证，认证完成后会生成一个access key，粘贴这个key到命令行，完成认证。
   appcenter login # 登录
   ②管理app

   appcenter apps list    # 列出app
   
   appcenter apps update -n <newName> -a <ownerName>/<appName>     # app重命名
   
   appcenter apps delete -a <ownerName>/<appName>     # 删除app

   ③ 获取deployment key

   appcenter codepush deployment list --displayKeys -a <ownerName>/<appName>   # 获取deployment key

---

三、安装插件

1. 插件git地址：https://github.com/mapiacompa...

2. Capactior环境：需要capactior3以上的环境，所以如果项目现在是2的版本需要升级到capactior3

   ※ 一件重要的事：capactior3相比于2来说有较大的变动，升级的时候需要rm -rf Platform，再重新npx cap add ，并升级gradle到4.1.2以上。

   官方升级指南指路：https://capacitorjs.com/docs/...

3. 安装codepush和必要的capactior插件

   npm i @capacitor-community/http @capacitor/deivce @capacitor/dialog @capacitor/filesystem 
   
   npm i https://github.com/mapiacompany/capacitor-codepush 
   
   npx cap sync

4. 在 capacitor.config.json 里配置deployment key

   ※如果只需要配置android或者ios其中一个平台的话，另一个的配置不需要写

   ※ 如果release的时候不需要使用公私钥认证的话，PUBLIC_KEY的配置就不要写了

   

5. 配置CSP，确保app能访问到codepush服务器

   在index.html中，添加Content-Security-Policy的meta标签

   <meta http-equiv="Content-Security-Policy" content="default-src https://codepush.appcenter.ms 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *" />

   因为我现在的项目用的是nuxt，此处附上nuxt里的写法，在nuxt.config.js文件中添加如下配置

   官方文档指路→https://nuxtjs.org/docs/2.x/c...
   

---

四、客户端代码实现

好了，到此为止，快乐的前期配置工作就结束了，接下来开始代码实现。
最简单的方法就是在app的deviceReady事件里，如下写

import { codePush } from'capacitor-codepush';

codePush.sync();

更多用法此处不再赘述，详情请参考→https://github.com/mapiacompa...

五、发布更新

1. 确认静态资源生成的路径在/www下

   nuxt的配置，在nuxt.config.js文件中：

   generate: {
    dir: 'www'
   }

2. 通过cli发布更新

   例子：

   # 发布更新到Staging环境，并指定受众版本不小于1.0
   
   appcenter codepush release -a  <ownerName>/<appName> -c www/ --target-binary-version "~1.0" -d Staging

   ※ 第一次集成的时候一定要注意一下--target-binary-version这个参数和你现在项目的版本号是否匹配，不然可能会报错：
   An update is available, but it is targeting a newer binary version than you are currently running

3. 参数详解

   appcenter codepush release -a <ownerName>/<appName> -c <updateContentsPath> -t <targetBinaryVersion> -d <deploymentName>
   
   [-t|--target-binary-version <version>]           # Semver表达式，指定此次release的受众版本，不在该版本范围内的用户将不能下载此次更新
   
   [-с|--update-contents-path <updateContentsPath>]        # 指定更新内容的路径
   
   [-r|--rollout <rolloutPercentage>]        # 例，--rollout 25：realse这次更新给25%的用户
   
   [--disable-duplicate-release-error]
   
   [-k|--private-key-path <privateKeyPath>]
   
   [-m|--mandatory]            # 布尔值，默认false，指定是否是强制更新
   
   [-x|--disabled]                 # 布尔值，默认false，指定该版本是否可下载
   
   [--description <description>]
   
   [-d|--deployment-name <deploymentName>]          # 指定是Staging或者Production
   
   [-a|--app <ownerName>/<appName>]        # app名称
   
   [--disable-telemetry]         # 布尔值，默认false，指定该版本是否可立即下载
   
   [-v|--version]

4. 清除release历史记录
   release不能逐条单独清除，只能clear整个环境的release，且clear之后不可撤销，不能恢复，请谨慎使用

   appcenter codepush deployment clear -a <ownerName>/<appName> Staging

好了，以上就是集成步骤的全部内容，后续如有问题欢迎大家留言交流。

※ 最后来一个小提示，如果在集成过程中遇到了怎么也解决不了的奇怪的问题，可以试试rm -rf android/ios，再重新add，可能会用奇效