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 ?