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

Posted 2023-02-19

【中文标题】如何在 Ionic Hybrid App 的通知中显示下载进度？

【英文标题】：How to display Download Progress in a Notification in Ionic Hybrid App?

【发布时间】：2017-03-11 07:20:27

【问题描述】：

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

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

像这样：

【问题讨论】：

你有解决办法吗？

还没有，最好问问 ionic 社区他们是否提供任何解决方案。

寻找同样问题的答案。提供给cordova-plugin-background-mode 的configure 方法的text 属性的html 会起作用吗？

【参考方案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/

【参考方案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);
        );

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

【讨论】：

我试过你的解决方案，但它的工作方式不同，它只是在屏幕上显示一条短消息，如弹出窗口。我需要它像我的问题中的图像一样工作（更新）。该怎么做？

有没有办法在应用程序内显示通知栏？就像原生应用通知一样