Ionic 4 Downloadable project

I am facing a problem about ionic 4. It was working with ionic 3 after upgrading ionic 4 now its not working. Basicly, I have a project created with ionic3 (I call it native part ) and it just checks the service whether has a new version (content part). If there is a new version (this is also ionic 3 project zipped in server) downloads the zip to documents folder (ios) and unzip and change the location of app to documents. Here is code ionic 3 code

import { Component } from ‘@angular/core’;

import { Platform } from ‘ionic-angular’;
import { FileTransfer, FileTransferObject } from ‘@ionic-native/file-transfer’;
import { Network } from ‘@ionic-native/network’;
import { Global } from ‘…/…/providers/global/global’;
import { Service } from ‘…/…/providers/service/service’;
import { File } from ‘@ionic-native/file’;
import { window } from ‘rxjs/operator/window’;
import { normalizeURL } from ‘ionic-angular’;
import { Zip } from ‘@ionic-native/zip’;
@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {
connection: boolean = true;
nativeVersion = “2”;
currentValue: string = “0%”;
fileCount: number;
totalSize: number;
files: any;
curFileIndex: number;
curFileSize: number;
systemContentVersion: number;
dataDirectory: string;
os: string = “”;
constructor(public platform: Platform, public global: Global, public network: Network, public file: File, public transfer: FileTransfer, public service: Service, private zip: Zip) {
this.platform.ready().then(() => {
if (this.platform.is(‘ios’)) {
this.os = “ios”;
} else if (this.platform.is(‘android’)) {
this.os = “android”;
}
this.network.onDisconnect().subscribe(() => {
this.connection = false;
this.global.showMessage(“Hata”, “İnternet bağlantısı koptu !”);
});
this.network.onConnect().subscribe(() => {
this.connection = true;
this.startDownloading();
});
this.startDownloading();
});
}
startDownloading() {
if (this.os == “ios”) {
this.dataDirectory = this.file.documentsDirectory + “v” + this.nativeVersion + “/”;
}
else if (this.os == “android”) {
this.dataDirectory = this.file.dataDirectory + “v” + this.nativeVersion + “/”;
}
if (this.connection) {
let contentVersion = localStorage.getItem(“contentVersion”);
if (contentVersion == null)
contentVersion = “0”;
//todo
//contentVersion = “0”;
this.service.checkFiles(parseInt(contentVersion), this.nativeVersion, this.os).subscribe(result => {
if (result.data.fileCount == 0) {
//guncelleme yok
var contentVersion = localStorage.getItem(“contentVersion”);
console.log("contentVersion : " + contentVersion);
this.currentValue = “100%”;
this.gotoIndex();
}
else {
//guncelleme baslat
//this.service.showLoading(“Güncellemeler alınıyor…”);
this.downloadFiles(result);
}
});
} else {
this.global.showMessage(“Hata”, “Internet bağlantısı gerekiyor !”);
}
}
downloadFiles(result: any) {
console.log(result);
this.fileCount = result.data.fileCount;
this.totalSize = result.data.totalSize;
this.files = result.data.files;
this.curFileIndex = -1;
this.curFileSize = 0;
this.systemContentVersion = result.data.contentVersion;
this.checkCompleted();
}
checkCompleted() {
console.log(“checkCompleted :” + this.curFileIndex + " - " + this.fileCount);
if (this.curFileIndex < (this.fileCount - 1)) {
this.curFileIndex++;
this.downloadFile();
} else {
this.downloadFinished();
}
}
downloadFile() {
let fileTransfer: FileTransferObject = this.transfer.create();
let file = this.files[this.curFileIndex];
let fileLocation = file.path;

let fileName = file.name;
this.curFileSize += file.size;
let targetPath = this.dataDirectory + "package.zip";
if (!this.platform.is('cordova')) {
  return false;
}
console.log("fileName : " + fileName);
console.log("targetPath : " + targetPath);
let random = Math.random() * 1000000;
fileTransfer.download(fileLocation + "?v=" + random, targetPath).then(result => {
  //download completed
  this.currentValue = (this.curFileSize / this.totalSize) * 100 + "%";
  this.checkCompleted();
}).catch(error => {
  this.global.showMessage("Hata ! Dosya indirilemedi !, Dosya Adı : " + fileLocation, "Hata");
});
fileTransfer.onProgress((progressEvent) => {
  console.log(progressEvent);
  this.currentValue = Math.floor(progressEvent.loaded / progressEvent.total * 100) + "%";
});

}
downloadFinished() {
console.log(“download finished !”);
console.log(this.dataDirectory);
localStorage.setItem(“contentVersion”, this.systemContentVersion.toString());
//document.location.href = this.dataDirectory + “index.html”;
//paket indi paketi acalim.
this.unzip(this.dataDirectory + “package.zip”, this.dataDirectory);

}
gotoIndex() {
console.log(“url :” + document.location.href);
console.log("index : " + this.dataDirectory + “index.html”);
console.log(“indexe gidiliyor …”);
let path = this.dataDirectory + “index.html”;
if (this.os == “ios”) {
path = normalizeURL(this.dataDirectory + “index.html”);
} else if (this.os == “android”) {
path = this.dataDirectory + “index.html”;
}
console.log("normalized path : " + path);
document.location.href = path;
}
unzip(source: string, dest: string) {
console.log(“zipt source”, source);
this.zip.unzip(source, dest, (progress) => {
this.currentValue = Math.round((progress.loaded / progress.total) * 100) + ‘%’;
console.log('Unzipping, ’ + this.currentValue);
})
.then((result) => {
if (result === 0) {
console.log(‘SUCCESS’);
this.gotoIndex();
}
if (result === -1) console.log(‘FAILED’);
});
}
}

here is ionic 4 code

import { Component } from ‘@angular/core’;

import { Platform } from ‘@ionic/angular’;
import { SplashScreen } from ‘@ionic-native/splash-screen/ngx’;
import { StatusBar } from ‘@ionic-native/status-bar/ngx’;
import { Global } from ‘src/providers/global/global’;
import { Service } from ‘src/providers/service/service’;
import { Network } from ‘@ionic-native/network/ngx’;
import { Zip } from ‘@ionic-native/zip/ngx’;
import { FileTransfer, FileTransferObject } from ‘@ionic-native/file-transfer/ngx’;
import { File } from ‘@ionic-native/file/ngx’;
import { DomSanitizer } from ‘@angular/platform-browser’;
import { WebView } from ‘@ionic-native/ionic-webview/ngx’;

@Component({
selector: ‘app-root’,
templateUrl: ‘app.component.html’
})
export class AppComponent {
connection: boolean = true;
nativeVersion = “2”;
currentValue: string = “0%”;
fileCount: number;
totalSize: number;
files: any;
curFileIndex: number;
curFileSize: number;
systemContentVersion: number;
dataDirectory: string;
os: string = “”;
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar, public global: Global, public network: Network, public file: File, public transfer: FileTransfer, public service: Service, private zip: Zip, private webview: WebView, private domSanitizer: DomSanitizer
) {
this.initializeApp();
}

initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
this.platform.ready().then(() => {
if (this.platform.is(‘ios’)) {
this.os = “ios”;
} else if (this.platform.is(‘android’)) {
this.os = “android”;
}
this.network.onDisconnect().subscribe(() => {
this.connection = false;
this.global.showMessage(“Hata”, “İnternet bağlantısı koptu !”);
});
this.network.onConnect().subscribe(() => {
this.connection = true;
this.startDownloading();
});
this.startDownloading();
});
});
}

startDownloading() {
if (this.os == “ios”) {
this.dataDirectory = this.file.documentsDirectory + “www/v” + this.nativeVersion + “/”;
}
else if (this.os == “android”) {
this.dataDirectory = this.file.dataDirectory + “v” + this.nativeVersion + “/”;
}
if (this.connection) {
let contentVersion = localStorage.getItem(“contentVersion”);
if (contentVersion == null)
contentVersion = “0”;
//todo: kaldirilacak
//contentVersion = “0”;

  this.service.checkFiles(parseInt(contentVersion), this.nativeVersion, this.os).subscribe(result => {
    if (result.resultCode == 0) {
      if (result.data.fileCount == 0) {
        //guncelleme yok
        var contentVersion = localStorage.getItem("contentVersion");
        console.log("contentVersion : " + contentVersion);
        this.currentValue = "100%";
        this.gotoIndex();
      }
      else {
        //guncelleme baslat
        //this.service.showLoading("Güncellemeler alınıyor...");
        this.downloadFiles(result);
      }
    }
  });
} else {
  this.global.showMessage("Hata", "Internet bağlantısı gerekiyor !");
}

}
downloadFiles(result: any) {
console.log(result);
this.fileCount = result.data.fileCount;
this.totalSize = result.data.totalSize;
this.files = result.data.files;
this.curFileIndex = -1;
this.curFileSize = 0;
this.systemContentVersion = result.data.contentVersion;
this.checkCompleted();
}
checkCompleted() {
console.log(“checkCompleted :” + this.curFileIndex + " - " + this.fileCount);
if (this.curFileIndex < (this.fileCount - 1)) {
this.curFileIndex++;
this.downloadFile();
} else {
this.downloadFinished();
}
}
downloadFile() {
let fileTransfer: FileTransferObject = this.transfer.create();
let file = this.files[this.curFileIndex];
let fileLocation = file.path;

let fileName = file.name;
this.curFileSize += file.size;
let targetPath = this.dataDirectory + "package.zip";
if (!this.platform.is('cordova')) {
  return false;
}
console.log("fileName : " + fileName);
/* if (this.os == "ios") {
  targetPath = this.file.documentsDirectory + fileName;
}
else if (this.os == "android") {
  targetPath = this.file.dataDirectory + fileName;
}
else {
  // do nothing, but you could add further types here e.g. windows/blackberry
  return false;
} */

console.log("targetPath : " + targetPath);
let random = Math.random() * 1000000;
fileTransfer.download(fileLocation + "?v=" + random, targetPath).then(result => {
  //download completed
  this.currentValue = (this.curFileSize / this.totalSize) * 100 + "%";
  this.checkCompleted();
}).catch(error => {
  this.global.showMessage("Hata ! Dosya indirilemedi !, Dosya Adı : " + fileLocation, "Hata");
});
fileTransfer.onProgress((progressEvent) => {
  console.log(progressEvent);
  this.currentValue = Math.floor(progressEvent.loaded / progressEvent.total * 100) + "%";
});

}
downloadFinished() {
console.log(“download finished !”);
console.log(this.dataDirectory);
localStorage.setItem(“contentVersion”, this.systemContentVersion.toString());
//document.location.href = this.dataDirectory + “index.html”;
//paket indi paketi acalim.
this.unzip(this.dataDirectory + “package.zip”, this.dataDirectory);

}
gotoIndex() {
console.log(“url :” + document.location.href);
let rootUrl = document.location.href;
console.log("index : " + this.dataDirectory + “index.html”);
console.log(“indexe gidiliyor …”);
let path = this.dataDirectory + “index.html”;
if (this.os == “ios”) {
path = this.dataDirectory + “index.html”;

} else if (this.os == "android") {
  path = this.dataDirectory + "android/" + "index.html";
}
console.log("org path : ", path);
path = this.normalizePath(path);
console.log("normalized path : " + path);
document.location.href = path;
//window.open(path);

}
normalizePath(path: string) {
return this.webview.convertFileSrc(path)
}
unzip(source: string, dest: string) {
console.log(“zipt source”, source);
this.zip.unzip(source, dest, (progress) => {
this.currentValue = Math.round((progress.loaded / progress.total) * 100) + ‘%’;
console.log('Unzipping, ’ + this.currentValue);
})
.then((result) => {
if (result === 0) {
console.log(‘SUCCESS’);
this.gotoIndex();
}
if (result === -1) console.log(‘FAILED’);
});
}
}
after updating ionic 4 I noticed that something changed. there is no normalizeURL() method. I changed it webview.convertFileSrc(path) instead of normalizeURL but this time I can not open downloaded content. Always shows white screen. I am really stuck and searhing one week with no luck. How can I do that in ionic 4 ?

I find this extremely hard to read. Bracket code with triple backticks (```):

code goes here

Sorry. I fixed code part.

you just need to share error have you faced.

after document.location.href = path or window.open(path); url changes and screen returns to white. A blank white screen. If I change downloaded index.html to simple html (adding h1 hello message and remove all js) then its working. The problem is downloaded ionic project does not start.

Problem is solved as you say your downloaded project does not work properly so you just need to create a new project and add in the new project your needed classes from downloaded project and add plugins which one necessary for your build.

Yes, as you said first I checked downloaded project for errors. But its working. For double check I create a new empty project with all plugins. (whatever inside www after build) but no luck. Same white screen and no chance to debug :frowning: