ionic应用热更新(亲测手写)

作者: 小胖子嘿嘿嘿 | 来源:发表于2017-07-19 15:37 被阅读0次

    原理

    当应用发布应用市场后更新代码超级麻烦,因此绕开应用市场在应用内进行更新则方便多了,其主要原理如下:

    • 生成发布代码到www目录
    • 生成每个文件的hash值到manifest文件,更新最新时间戳
    • 应用启动/恢复/下载完成时,下载manifest文件,并对比时间戳的差异,如果时间戳不同,则下载manifest文件来对比和更新发生变化的文件。

    插件

    安装cli:

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

    安装插件:

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

    如果多搜几篇文档,一定还有人推荐你安装Cordova Hot Code Push Local Development Add-on,这个是用于本地开发用的,千万别安装,我就因为多安装了这个插件,半天都没调试成功!!还有很多人到处抄抄,东一下西一下的,文档还得看英文的!

    更新代码

    当有文件更新时,需要同步更新到www目录,可以通过

    ionic serve
    

    命令来监听,也可以手动执行

    npm run build --prod
    

    来发布文件到www目录。

    配置文件

    配置文件名字叫chcp.json,主要是记录发布时间戳和更新时机。通过

    cordova-hcp init
    

    会在项目根目录下生成chcp.json,生成以后也可以来手动修改这个文件,这个文件是实际www/chcp.json的模版文件,主要差异是release成员,这个字段是当前最新时间,app打包时也含有这个文件,插件会比较这二者的release是否一致。

    cordova-hcp build
    

    通过这条命令,可以会在www目录下生成chcp.json和chcp.manifest,manifest文件记录了www下各文件的hash值,当chcp.json与客户端时间戳不一致时,客户端会进一步获取chcp.manifest来对比哪些文件发生了变化。这里chcp.json中的content_url需配置www目录下的文件发布到服务器上的文件夹地址.

    此外,检查config.xml下是否有chcp标签,如果没有,则需要手动添加一个(如果有,也需要手动配置其config-file位置),config-file的url指向服务器上的配置文件的路径。

    发布服务器

    通过ftp/scp等将www目录下所有文件发布至服务器,并确认服务器已给响应文件夹配置文件服务,在浏览器下能正常访问到这些文件,并确认config.xml和chcp.json中对应的配置地址和项目地址是否正确。

    安装app到手机

    通过数据线连接手机(打开开发者选项),执行

    ionic cordova run android
    

    将本地app发布到手机,安装完成后会自动打开。

    验证更新

    修改app内容,查看chcp.json中update的配置。如果是start表示在app启动时更新,resume则app进入后台后恢复时更新,now是指下载完成即更新。触发对应的操作,这时候应该会观察到app重新启动,并完成了热更新~!

    手动模式

    以上的方法是完全依赖组件的,如果想更进一步DIY则需要手动下载和更新。

    更改config.xml

    这时需要更改config.xml下的chcp标签,关闭自动下载和安装:

    <chcp>
       <auto-download enabled="false" />
       <auto-install enabled="false" />
    </chcp>
    

    另外,需添加控制逻辑和代码,具体请参考附件的参考文献。

    参考文档

    1. Hot deploy updates with the cordova-hot-code-push plugin

    相关文章

      网友评论

        本文标题:ionic应用热更新(亲测手写)

        本文链接:https://www.haomeiwen.com/subject/uwplkxtx.html