如何在離子混合應用程序中顯示通知下載進度？

Question

我想在我的離子混合應用程序的通知欄中顯示下載進度，如native app。我正在使用cordova file transfer插件下載文件。

這是可能的離子應用程序？我怎樣才能做到這一點？

像這樣：

Answer 1

使用cordovaToast插件這個feature.Here是用於顯示PDF下載進度

HTML

<ion-view > 
    <div class="bar bar-subheader bar-positive" style="padding:0px;height: 8px;" > 
     <progress id="progressbar" max="100" value="{{ downloadProgress }}" class="progress"> </progress> 
    </div> 
    <ion-content> 
    </ion-content> 
</ion-view> 

CSS

的例子

.progress { 
    margin: 0 px; 
    height: 8 px; 
    background - color: #F1292B!important; 
    border - radius: 2 px; 
    box - shadow: 0 2 px 5 px rgba(0, 0, 0, 0.25) inset; 
} 

JS

if (window.cordova) { 
    var url = '{{base_url}}/pdf_download/' + id; 
    // Android 
    var targetPath = 'file:///storage/sdcard0/' + 'fpl_' + id + '.pdf'; 
    var trustHosts = true; 
    var options = {}; 
    $cordovaFileTransfer.download(url, targetPath, options, trustHosts) 
     .then(function(result) { 
      $cordovaToast 
       .show('File downloaded successfully..', 'short', 'center') 
       .then(function() { 
        // success 
       }, function() { 
        // error 
       }); 

      console.log(result); 
     }, function() { 
      var alertPopup = $ionicPopup.alert({ 
       title: 'No internet access', 
       buttons: [{ 
        text: 'OK', 
        type: 'button-assertive' 
       }] 
      }); 
      alertPopup.then(function() {}); 

     }, function(progress) { 
      var dnldpgs = progress.loaded.toString().substring(0, 2); 
      $scope.downloadProgress = parseInt(dnldpgs); 
     }); 
} 

如果您有任何doubt.Please讓我know.Thanks。