web app upgrade - with a progress bar is automatically updated App

　　App progress bar is updated automatically, results as shown below:

 　  Technology: vue, vant-ui, 5 +

　　Independent package assembly AppProgress.vue:

<Template> 
  <div> 
    <v-Van-Dialog Model = "Show" Confirm The-the Button-text = "background download" class = "App-Update"> 
      <img src = "../../ Assets / imgs / bar.png-Progress "/> 
      <Van-Progress: PERCENTAGE =" percentageVal "/> 
      <div class =" msg "> updated version Please wait ... </ div> 
    </ Van-Dialog> 
  </ div> 
</ Template> 

<Script> // App download progress assembly 
Export default { 
  The props: { // progress value     percentageVal: { 
      type: Number The, default : 0 
    }, // whether to display the pop     show:{
      type: Boolean,default: false
  },

    

      
    

      
    }
  data() {
    return {}
  }
}
</script>

<style lang="scss" scoped>
img {
  width: 270px;
  height: 163px;
  position: fixed;
  top: -35px;
  z-index: 2200;
}
</style>
<style lang="scss">
.app-update.van-dialog {
  overflow: visible;
  width: 270px;
  border-radius: 12px;
  .van-progress {
    margin-top: 124px;
    z-index: 2300;
  }
  .msg {
    font-size: 16px;
    font-weight: 600;
    color: white;
    position: absolute;
    top: 50px;
    z-index: 2300;
    width: 100%;
    text-align: center;
  }
  .van-dialog__footer {
    border-radius: 12px;
    .van-button--default {
      .van-button__text {
        width: 105px;
        height: 26px;
        border-radius: 13px;
        background-color: #006eff;
        color: white;
        font-weight: 600;
        font-size: 12px;
        display: inline-block;
        margin-top: 10px;
        line-height: 26px;
      }
    }
  }
}
</style>

app upgrade code package separate js file: appUpdateOptions.js

/ * * 
 * Release the IOS packet ID to be updated here after market applications, replace the test ID: 1,053,012,308 
 * / 
/ * eslint-NO-disable undef * / 
Import getVersion} from { '@ / Services / Login' ; 
Import from Request '../../api/ajax.js' ; 
Import Dialog {} from 'Vant' ; 
Import expiredStorage from '@ / utils / expiredStorage.js' ; 

function SLEEP (numberMillis) {
   var now = new new a Date ( );
   var exitTime of that now.getTime = () + numberMillis;
   the while ( to true ) { 
    now = new newDATE ();
     IF (now.getTime ()> exitTime of that) return ; 
  } 
} 

// Vue inherited base object 
Export default { 
  Data () { 
    return { 
      Show: to false , 
      percentageVal: 0 
    }; 
  }, 
  Methods: { 
    , for the appUpdate ( ismanual) { 
      const that = the this ; 
      the console.log ( ', for the appUpdate' );
       // get the version number of the operating environment 5+ 
      the console.log ( '5+ the runtime version:' + plus.runtime.innerVersion);
      plus.runtime.getProperty (plus.runtime.appid, function (INF) { 
        const Ver = inf.version; 
        the console.log ( 'Ver:' + Ver);
         var UA = navigator.userAgent.toLowerCase ();
         // Apple phone 
        IF (/ the iPhone | ipad | iPod / .test (UA)) {
           // get the current version Added APPStore information 
          Request 
            .get ( 'https://itunes.apple.com/lookup?id=1053012308' , { 
              the above mentioned id: 1,053,012,308 // the APP unique identification ID 
            }) 
            .then (Data => { 
              the console.log ( 'Data:' + the JSON.stringify (Data));
              var resultCount = data.resultCount;
               for ( var I = 0; I <resultCount; I ++ ) {
                 var normItem = data.results [I] .version; 
                the console.log ( 'normItem:' + normItem);
                 IF (normItem> Ver ) {
                   var the _msg = 'discovery of new version: V' + normItem;
                   // plus.nativeUI.alert ( "new version found: V" + normItem); 
                  Dialog.confirm ({ 
                    title: 'upgrade confirmation' , 
                    Message: the _msg 
                  } ) 
                    .Then (() => {
                       // ON Confirm 
                      // perform upgrade 
                      the document.location.href = 
                        'https://itunes.apple.com/cn/app/id1053012308?mt=8'; // new Download APPStore 
                    }) 
                    . the catch (() => {
                       // ON Cancel 
                      expiredStorage.setItem ( '$ upgradeTip', to false ,. 1/12 is); // no longer displayed within the upgrade prompt 1/12 
                    });
                   return ; 
                }
              } 
              IF (ismanual) { 
                plus.nativeUI.toast ( 'current version is up to date' ); 
              } 
            }); 
        } the else  IF (/ Android / .test (UA)) { 
          . GetVersion () the then (RES => { 
            the console.log ( 'Data:' + the JSON.stringify (RES));
             IF ((res.code = 200 is && res.data.version> Ver)) {
               var the _msg = 'discovery of new version: V' + res.data .version; 
              const apkUrl = res.data.redirectUrl; 
              Dialog.confirm ({ 
                title:'Upgrade confirmation' , 
                Message: the _msg 
              }) 
                .then (() => {
                   // ON Confirm 
                  // perform upgrade 
                  the console.log ( 'apkUrl:' , apkUrl);
                   // plus.nativeUI.toast ( 'being prepared environment, please wait ');! 
                  that.show = to true ;
                   var dtask = plus.downloader.createDownload ( 
                    apkUrl, 
                    {}, 
                    function (D, Status) {
                       IF (Status == 200 is ) {
                         //SLEEP (1000);
                        var path = d.filename; // download apk 
                        plus.runtime.install (path); // automatic installation apk file 
                        that.show = to false ; 
                      } the else { 
                        plus.nativeUI.alert ( 'version update fails:' + Status) ; 
                        that.show = to false ; 
                      } 
                    } 
                  ); 
                  the try { 
                    dtask.start (); // open the download task 
                    var PRG = 0 ;
                     //plus.nativeUI.showWaiting showLoading = var ( 
                    //    'version of the update, Please Wait!' 
                    // ); // create a showWaiting objects 
                    dtask.addEventListener ( 'stateChanged', function ( 
                      Task, 
                      Status 
                    ) { 
                      // to download and make a listener task settings based on the status 
                      Switch (of task.state are shown) {
                         Case . 1 :
                           // showLoading.setTitle ( "downloading"); 
                          BREAK ;
                         Case 2 :
                           // showLoading.setTitle ( 'connected to the server'); 
                          break;
                        case 3:
                          prg = parseInt(
                            (parseFloat(task.downloadedSize) /
                              parseFloat(task.totalSize)) *
                              100
                          );
                          that.percentageVal = prg;
                          break;
                        case 4:
                          that.show = false;
                          break;
                      }
                    });
                  }the catch (ERR) { 
                    that.show = to false ;
                     IF (ismanual) { 
                      plus.nativeUI.toast ( 'network anomalies, please try again later' + ERR); 
                    } 
                  } 
                }) 
                . the catch (error => {
                   // ON Cancel 
                  the console.log ( 'error:' , error); 
                  that.show = to false ; 
                  expiredStorage.setItem ( '$ upgradeTip', to false ,. 1/12 is); // 1/12 days no longer display the upgrade prompt 
                }); 
            } the else { 
              console.log ( 'the current version is up to date' );
               IF (ismanual) { 
                plus.nativeUI.toast ( 'the current version is up to date' ); 
              } 
            } 
          }); 
        } 
      }); 
    } 
  } 
};

Calling code:

import appUpdateOptions from '@/utils/mixins/appUpdateOptions.js'
import AppProgress from '@/components/common/AppProgress.vue';
export default {
  components: { AppProgress },
  props: {},
  mixins: [appUpdateOptions],
  methods: {
    // app更新
    appUpdateFuc() {
      const that = this;
      that.$mui.plusReady(function() {
        that.appUpdate(true);
      });
    },

End.......