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

Question

我想在我的Ionic Hybrid App.like 本地应用程序的通知栏中显示下载进度.我正在使用cordova文件传输插件下载文件.

Ionic App有可能吗？我怎样才能做到这一点？

像这样:

Answer 1

使用cordovaToast 插件来实现此功能。这里是显示 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);
        });
}

如果您有任何疑问，请告诉我。谢谢。