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

Question

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

Ionic 应用程序可以这样做吗？我怎样才能做到这一点？

像这样:

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);
      });
   }
}

我的通知服务:
通知.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/