Cordova热更新插件

原创 controlling 随笔 cordova热更新 49阅读 2018-11-15 15:56:12 举报

本文主要介绍以下两个cordova热更新插件:

  • cordova-hot-code-push-plugin插件(2018-09-30起插件不再更新)
  • cordova-plugin-code-push插件(Microsoft的)

两者的差别:
使用cordova-hot-code-push-plugin资源文件可以存放在自己的服务器上,而使用cordova-plugin-code-push则是存放于code-push服务器上。

本文以Ionic3项目为例,介绍两个插件的使用。

cordova-hot-code-push-plugin插件

  • 安装及配置cordova-hot-code-push-plugin
  • 搭建Apache服务器模拟测试(推荐)
  • 使用cordova-hot-code-push-local-dev-addon插件模拟测试

安装及配置cordova-hot-code-push-plugin

(1) 添加插件

$ cordova plugin add cordova-hot-code-push-plugin

(2) 安装cli

$ npm install -g cordova-hot-code-push-cli

(3) 运行$ cordova-hcp init,生成cordova-hcp.json文件

D:\workspaces\hot-code-push-demo>cordova-hcp init
Running init
Please provide: Enter project name (required): hot-code-push-demo
Please provide: Amazon S3 Bucket name (required for cordova-hcp deploy):
Please provide: Path in S3 bucket (optional for cordova-hcp deploy):
Please provide: Amazon S3 region (required for cordova-hcp deploy): (us-east-1)
Please provide: IOS app identifier:
Please provide: Android app identifier:
Please provide: Update method (required): (resume)
Please provide: Enter full URL to directory where cordova-hcp build result will be uploaded: 服务器地址/chcp.json
Project initialized and cordova-hcp.json file created.
If you wish to exclude files from being published, specify them in .chcpignore
Before you can push updates you need to run "cordova-hcp login" in project directory

含required的是必填项,其他的可以跳过或使用默认。IOS app ID和Android app ID是app上传到应用商店的对应ID,用于当无法热更新需跳转应用商店下载时使用,测试Demo可以跳过。

(4) 运行$ cordova-hcp build,在根目录的www文件夹中生成chcp.json和chcp.mainfest文件

D:\workspaces\hot-code-push-demo>cordova-hcp build
Running build
Config { name: 'hot-code-push-demo',
ios_identifier: '',
android_identifier: '',
update: 'resume',
content_url: '服务器地址/chcp.json',
release: '2018.11.15-11.32.25' }
Build 2018.11.15-11.32.25 created in D:\workspaces\hot-code-push-demo\www

(5) 配置config.xml文件

每次需要热更新前必须执行$ cordova-hcp build,主要目的是更新chcp.json里的release值和chcp.mainfest里相关变动的文件的hash值。

搭建Apache服务器模拟测试

(1)下载并安装Apache服务器https://www.apachelounge.com/download/

(2)非默认安装路径,需修改httpd.conf配置文件,如果是默认安装路径(c:/)则无需修改配置。
修改Apache安装目录/conf下的httpd.conf文件SRVROOT的值,Line37:

Define SRVROOT "c:/Apache24"

(3)启动:依次双击执行httpd.exe和ApacheMonitor.exe

(4)浏览器地址栏输入本机ip(查看Wifi-属性-IPv4地址),回车,可以打开网页,显示“It works!”,说明服务器搭建成功。

(5)修改项目的config.xml中config-file的url值,改为服务器上chcp.json的地址。

(6)测试:
先连接真机调试模式或打开模拟器,运行项目ionic cordova run android(注意命令不要加-l或-livereload),完成后app会安装到真机或模拟器上;
然后拷贝项目platforms/android/assets/www文件夹到Apache24/htdocs目录下;
再修改某个项目文件,这里为了测试方便可以直接运行ionic serve,然后运行$ cordova-hcp build,拷贝根目录下新的www,覆盖服务器上的www,重新启动app,过一会就可以看到app页面刷新成了最新的。

使用cordova-hot-code-push-local-dev-addon插件模拟测试

(1)添加本地服务插件

$ cordova plugin add cordova-hot-code-push-local-dev-addon

(2)运行$ cordova-hcp server,启动本地服务,注意每次启动,都会生成一个随机的服务器地址,需要更新config.xml中config-file的url值。

D:\workspaces\hot-code-push-demo>cordova-hcp server
Running server
Checking: D:\workspaces\hot-code-push-demo\www
local_url http://localhost:31284
Warning: .chcpignore does not exist.
Build 2018.11.15-11.53.39 created in D:\workspaces\hot-code-push-demo\www
cordova-hcp local server available at: http://localhost:31284
cordova-hcp public server available at: https://33960159.ngrok.io

此命令会检测本地配置,如果项目没有运行cordova-hcp init,生成cordova-hcp.json文件,运行此命令会提示Warning: .chcpignore does not exist.,并在www中生成chcp.json和chcp.mainfest文件,如果已经生成了cordova-hcp.json文件,则提示Config {cordova-hcp.json文件的内容}

(3)运行项目$ cordova run,修改项目文件,重新启动app,过一会就可以看到app页面刷新成了最新的。

cordova-plugin-code-push插件

(1)下载cli

$ npm install -g code-push-cli

(2)登录code-push服务器,运行$ code-push login

D:\workspaces\code-push-demo>code-push login
Please login to Mobile Center in the browser window we've just opened.

Enter your token from the browser:

浏览器会自动打开服务器登录界面,可以选择的登录方式有:Github、Microsoft、Facebook、Google、注册新账户,登录成功页面会返回Authentication token,复制到命令行中:

D:\workspaces\code-push-demo>code-push login
Please login to Mobile Center in the browser window we've just opened.

Enter your token from the browser: c59a6xxxxxxxxxxxxxxxxxxxxxxx

Successfully logged-in. Your session file was written to C:\Users\xxx\AppData\Local.code-push.config. You can run the code-push logout command at any time to delete this file and terminate your se
ssion.

退出登录:运行$ code-push logout

D:\workspaces\code-push-demo>code-push logout
Successfully logged-out. The session file located at C:\Users\xxx\AppData\Local.code-push.config has been deleted.

(3)创建应用到服务器,运行$ code-push app add code-push-demo-android android cordova

此时打开应用中心https://appcenter.ms/apps,可以查看app相关信息

更多code-push命令:

Usage: code-push app <command>

Commands:
add Add a new app to your account
remove Remove an app from your account
rm Remove an app from your account
rename Rename an existing app
list Lists the apps associated with your account
ls Lists the apps associated with your account

Options:
-v, --version Show version number [boolean]

(4)添加插件

$ ionic cordova plugin add cordova-plugin-code-push
$ npm install --save @ionic-native/code-push

(5)运行$ cordova plugin list检查项目是否安装白名单插件cordova-plugin-whitelist,没有安装则需要添加cordova plugin add cordova-plugin-whitelist

D:\workspaces\code-push-demo>cordova plugin list
code-push 2.0.6 "CodePushAcquisition"
cordova-plugin-code-push 1.11.13 "CodePush"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-dialogs 2.0.1 "Notification"
cordova-plugin-file 4.3.3 "File"
cordova-plugin-file-transfer 1.6.3 "File Transfer"
cordova-plugin-ionic-webview 1.2.1 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-whitelist 1.3.1 "Whitelist"
cordova-plugin-zip 3.1.0 "cordova-plugin-zip"
ionic-plugin-keyboard 2.2.1 "Keyboard"

(6)检查config.xml中是否配置,若没有,则加上

或者配置为:

(7)配置public key,即服务器端创建应用时生成的key,默认是Staging

不配置key会报错:

[CodePush] Deployment key not found.. StackTrace: Error: Deployment key not found.
at deploymentError (file:///android_asset/www/plugins/cordova-plugin-code-push/bin/www/nativeAppInfo.js:38:67)
at Object.callbackFromNative (file:///android_asset/www/cordova.js:293:52)
at processMessage (file:///android_asset/www/cordova.js:1114:17)
at processMessages (file:///android_asset/www/cordova.js:1137:9)
at t.invoke (file:///android_asset/www/build/polyfills.js:3:14976)
at Object.onInvoke (file:///android_asset/www/build/vendor.js:4930:33)
at t.invoke (file:///android_asset/www/build/polyfills.js:3:14916)
at r.run (file:///android_asset/www/build/polyfills.js:3:10143)
at file:///android_asset/www/build/polyfills.js:3:20242
at t.invokeTask (file:///android_asset/www/build/polyfills.js:3:15660)

(8)在app.module.ts中声明CodePush,

在app.component.ts中调用同步方法codePush.sync():

安装app,修改项目文件,运行ionic serve更新www,运行$ code-push release-cordova code-push-demo-android android --des "修改Page文字"发布更新。

(9)查看更新信息:$ code-push deployment list code-push-demo-android

相关文档:
https://github.com/nordnet/cordova-hot-code-push
https://github.com/nordnet/cordova-hot-code-push-cli

https://github.com/Microsoft/cordova-plugin-code-push

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复