In my Ionic 2 app, I use this function to download a video file and track its download progress:
download()
{
this.progressbar=true;
this.downloadbutton=false;
this.fileTransfer.download('https://...videoURL....mp4', this.file.dataDirectory + 'path/to/downloads/test.mp4').then((entry) => {
console.log('download complete: ' + entry.toURL());
this.progressbar=false;
this.startbutton=true;
}, (error) => {
console.log('error');
console.log(error);
});
this.fileTransfer.onProgress(progressEvent => {
if (progressEvent.lengthComputable) {
console.log("### Download percentage ###: "+Math.round((progressEvent.loaded / progressEvent.total)*100));
this.setpercentage((progressEvent.loaded / progressEvent.total) * 100);
} else {
}
});
}
Using setpercentage, I update a progressbar on the page
setpercentage(perc) {
this.loadProgress = Math.round(perc);
this.ref.detectChanges();
}
This all works fine. When the user navigates away (back), the view is destroyed. The video keeps downloading (as it should), but when I navigate back to the page (while the video is still downloading), the progressbar isn’t updated: the value stays at 0%.
How could I keep the progressbar updating, even when the view is destroyed?
Basically, I want to have this page to have the same functionality as a tab. When users navigate between different tabs, everything of the previous tab is remembered.
Any help is much appreciated!