App热更新

问题描述

使用微软的code-push部署app热更新时，遇到了这样一个问题，由于需要在热更新时，做一个进度条来提示用户更新进度，所以需要拿到下载时的成功回调，这个回调会有以下两个值。

1
2
3

export interface DownloadProgress {
    totalBytes: number;
    receivedBytes: number;

两个值相除即为下载进度，但是问题出现了！在演练环境一切正常，在生产环境时totalBytes=0，导致没有进度条的变化。

解决办法

排查了一天，没有发现原因，只能推测是生产环境与演练环境的版本不一致的原因，但是马上就要发版了，只能采用随机数来模拟进度条的方法。

关键代码

  // 生成随机数
private random(min: number, max: number): number {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

// 网页访问进度
private onprogress() {
  // 随机时间
  let timeout = this.random(10, 30);

  let timer = setTimeout(() => {
    if (this.browser.isLoaded) {
      this.browser.proObj.style.width = '100%';
      clearTimeout(timer);
      return;
    }

    // 随机进度
    this.browser.progress += this.random(1, 5);

    // 随机进度不能超过 90%，以免页面还没加载完毕，进度已经 100% 了
    if (this.browser.progress > 90) {
      this.browser.progress = 90;
    }

    this.browser.proObj.style.width = this.browser.progress + '%';
    this.onprogress();
  }, timeout);
}