如何在 Ionic Hybrid App 的通知中显示下载进度？

Question

我想在我的 Ionic Hybrid App.like native app 的通知栏中显示下载进度。我正在使用cordova file transfer 插件下载文件。

这对 Ionic App 可行吗？我该怎么做？

像这样：

Answer 1

以下解决方案采用 Ionic-Angular - 它展示了如何使用文件传输将数据下载到 dataDirectory 并显示下载进度通知。

数据目录管理器.service.ts：

import { FileTransfer, FileTransferObject } from '@ionic-native/file-transfer/ngx';
import { File } from '@ionic-native/file/ngx';
import { NotificationService } from './notification.service';

@Injectable({
 providedIn: 'root'
})
export class DataDirectoryManagerService {
    constructor(
        private file:File, 
        private transfer:FileTransfer,
        private notificationService :NotificationService
        ){}

    fileTransferProgressBar()
    {
        this.fileTransfer.onProgress((progressEvent) => {
        var perc = Math.floor(progressEvent.loaded / progressEvent.total * 100);
        this.notificationService.updateNotificationProgress(1,perc,"downloaded "+ perc + " %");
        console.log(" Downloaded File progress = "+ perc + " %");
        if(perc==100)
        {
            //remove notification after download completed
            this.notificationService.cancelNotification(1);
        }
        });
    }

   downloader(url, fileName)
   {
    this.notificationService.sendNotification(1,"downloading "+ fileName, "some text", 0);
    this.fileTransfer.download(url, this.file.dataDirectory + fileName).then((entry) => {
        console.log('download complete: ' + entry.toURL());
        console.log("Completed download for => " + fileName);
      }, (error) => {
        // handle error
        console.log(error);
      });
   }
}

我的通知服务： notification.service.ts

import { LocalNotifications} from '@ionic-native/local-notifications/ngx';
@Injectable({
  providedIn: 'root'
})
export class NotificationService {

  constructor(private localNotifications:LocalNotifications) { }

  async sendNotification(id, title, text, value) {
    await this.localNotifications.schedule({
      id: id,
      title: title,
      text: text,
      progressBar: { 
        value: value,
      },
      sticky: true,
    });
   
  }

  async updateNotificationProgress(id:number, progressValue:number, text:string)
  {
    await this.localNotifications.update({
      id:id,
      progressBar:{value:progressValue},
      text:text
    });
  }

  async cancelNotification(id:number)
  {
    await this.localNotifications.cancel(id);
  }
}

详细解释请参考以下链接：

• https://enappd.com/blog/local-notifications-in-ionic-4/69/
• https://github.com/katzer/cordova-plugin-local-notifications
• https://ionicframework.com/docs/v3/native/local-notifications/

Answer 2

此功能使用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);
        });
}

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