如何在离子混合应用程序中显示通知下载进度？

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。