i implemented the deploy service to my ionic app (i am using ionic 1) and it is working fine, now i want to show the users the time remaining for the download or maybe a progress bar so they do not think that the app is freezing.
below is the function of the deploy
var deployFunction = function() {
$ionicDeploy.check().then(function(snapshotAvailable){
if (snapshotAvailable) {
// When snapshotAvailable is true, you can apply the snapshot
MainService.startSpinner("Downloading Updates");//this shows a loading image indicating that the download started
//applying the snapshot
$ionicDeploy.download()
.then(
function() {
MainService.stopSpinner();
MainService.startSpinner("Extracting");
$ionicDeploy.extract()
.then(
function(){
MainService.stopSpinner();
$ionicDeploy.load();
}, function(error) {
console.log("ERROR EXTRACT "+error);
// Error extracting
}, function(progress) {
// progress of extracting
console.log('extraction progress '+progress);
}
);
}, function(error){
//download error
console.log("ERROR Downloading "+error);
}, function(progress) {
//download progress
console.log('download progress '+progress);
}
);
}
});
}
i've read somewhere that the progress function should return an integer...
but it is not and i have no idea how to get information about the download beside that it is started or it is finished.
any help would be appreciated
for future references this was solved based on this documentation, the code will be
$ionicDeploy.download({
onProgress: function(p) {
console.log(p);
}
})
.then(
function() {...
i tried it and the console logged numbers from 1 to 100 indicating the download progress.
Related
Im just wondering how to handle this. I want to have my whole app cached.
Im have tried something like this which doesnt seem to work
self.addEventListener('install',(e)=>{
console.log('installed');
})
self.addEventListener('activate',(e)=>{
console.log('activated');
self.skipWaiting();
})
self.addEventListener('fetch',(e)=>{
e.respondWith(
fetch(e.request)
.then(res=>{
const resClone = res.clone();
caches.open(cacheName).then(cache=>{
cache.put(e.request, resClone);
})
return res;
}).catch(err => {
console.log('no connection');
caches.match(e.request).then(res => { return res })
})
)
})
Does anyone know how to approach this?
Like one childish way would be to view the page source and check what js, css files are being used by react and cache them manually.
This will not work in production, you will have to manually check the files in the build directory and update the service-worker
Or a better and sensible way of doing it would be to use workbox (a npm package from google) which is going to handle all this clutter
This works for me,
self.addEventListener("fetch", function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
if (response) {
return response;
} else {
return fetch(event.request)
.then(function(res) {
return caches.open(CACHE_NAME).then(function(cache) {
cache.put(event.request.url, res.clone());
return res;
});
})
}
})
);
});
This tells the service worker to read from cache first and then network if there is no response from cache.
One thing to keep in mind, this will not check for any updates made to the files. If you change your react code, the service worker will load the previous files it has in cache.
To solve this you can use workbox's staleWhileRevalidate which updates the cache whenever there is network connection.
A less convenient solution would be to delete the cache on service worker activation:
self.addEventListener('activate', function(event) {
event.waitUntil(
caches.keys()
.then(function(keyList) {
return Promise.all(keyList.map(function(key) {
return caches.delete(key);
}));
})
);
return self.clients.claim();
});
Whenever a new service worker is installed the cache is removed and a new one is created.
I am using cordova barcodescanner for my hybrid app development and i am very concern about the default message of the barcode scanner which says: "Place a barcode inside the viewfinder rectangle to scan it."
How could i change the default message? I am expecting similar to this:
NgCordova:
$cordovaBarcodeScanner
.scan()
.title('Please scan here') //something like this
.then(function(barcodeData) {
// Success! Barcode data is here
}, function(error) {
// An error occurred
});
From cordova plugins: But i dunno how to use it in cordovaBarcodeScanner
cordova.plugins.barcodeScanner.scan(
function (result) {
},
function (error) {
alert("Scanning failed: " + error);
},
{
// how can i use this in above?
"prompt" : "Place a barcode inside the scan area",
}
);
To implement barcode-scanner follow this steps.
step 1: install this cordova plugin add https://github.com/phonegap/phonegap-plugin-barcodescanner.git into your project.
step 2: Implement this code in you js file
$cordovaBarcodeScanner
.scan()
.then(function(barcodeData) {
// Success! Barcode data is here
}, function(error) {
// An error occurred
});
// NOTE: encoding not functioning yet
$cordovaBarcodeScanner
.encode(BarcodeScanner.Encode.TEXT_TYPE, "http://www.nytimes.com")
.then(function(success) {
// Success!
}, function(error) {
// An error occurred
});
},
To know more about ngCordova barcodescanner look this website.
Here is a tutorial for more information nicrobay barcode scanner.
and the message you revive as alert is what are receiving from the back end.
I am using Ionic and making http request like this:
$http.get('//GLOBAL.IP/?username=' + username + '&content_type=json')
.then(function (result) {
$scope.days = [];
alert(JSON.stringify(result));
for (first in result.data.weeks) break;
var currentWeek = result.data.weeks[first];
var time = currentWeek.overall.as_time;
$scope.week = currentWeek;
for (day in currentWeek.days.sort().reverse()) {
if (day < 2) {
continue;
}
var currentDay = currentWeek.days[day];
$scope.days.push(currentDay);
if (currentDay.present) {
console.log(parseInt(currentDay.work_time_balance) + parseInt(currentWeek.overall.seconds));
}
}
}, function (result) {
alert(JSON.stringify(result));
$ionicPopup.alert({
title: 'Error',
template: 'Connection failed, try again later!'
});
})
.finally(function () {
// Stop the ion-refresher from spinning
$scope.$broadcast('scroll.refreshComplete');
});
While I am opening app in browser with command ionic serve, everything seems working okay, I've already fixed CORS and other stuff.
But when In mobile app, I am getting this (sorry for not providing plaintext)
UPDATE
$http.get('//GLOBAL.IP/?username=' + username + '&content_type=json')
.then(function (result) {
alert('Good');
}, function (result) {
alert('Bad');
})
This code returns me GOOD, but result.data is still with script tags.
When you are testing this app in working mode what is localhost, Its a local server running on same machine, right.
When you install or run app in your mobile device where it is pointing to? Do you know that, If code is okay then replacing localhost with IP of your machine should resolve this issue.
Many script tags with addRow in ionic http request response, was because of // in the beginning of uri, protocol was selecting successfully in browser, but not in compiled app.
I am making an app using Ionic framework. I have used ngcordova angular library.
I have a zip folder which we are unzipping and then reading / writing the file.
When I am updating (write operation) on any file in "non rooted" phones, we are getting NO_MODIFICATION_ALLOWED_ERR. But this works fine in a "rooted" phone.
This issue is with write operation only. It is working fine while reading any file.
Please have a look at the code.
UpdateConfiguration: function (appconfig) {
var defer = $q.defer();
$cordovaFile.checkFile(cordova.file.dataDirectory, "Stock/database/appconfig.json").then(function (success) {
$cordovaFile.writeFile(cordova.file.dataDirectory, 'Stock/database/appconfig.json', JSON.stringify(appconfig), true)
.then(function (success) {
defer.resolve(true);
}, function (err) {
alert(JSON.stringify(err));
defer.reject(false);
});
}, function (error) {
alert('Error finding app config file');
});
return defer.promise;
}
Please help.
Thanks in advance.
What is the way to save a canvas to your phone album (camera roll, etc.) using Phonegap?
And when saved, how do I get the image URL using Cordova? Which plugins should I consider for this?
Method 1: Canvas2Image Plugin
With this plugin, you can save a canvas to your phone library using:
<canvas id="myCanvas" width="165px" height="145px"></canvas>
function onDeviceReady()
{
window.canvas2ImagePlugin.saveImageDataToLibrary(
function(msg){
console.log(msg);
},
function(err){
console.log(err);
},
document.getElementById('myCanvas')
);
}
However, it is not clear how the imageURI is passed or returned after saving?
UPDATE 23/02. I tried the following, but it never reaches my successcallback:
$scope.done = function() {
// todo: iterate over cloaks
$ionicLoading.show({
template: 'Saving images...'
});
// #issue: callback is not called
saveCanvasToPhone().then(successCallback, errorCallback);
var successCallback = function(output) {
$ionicLoading.hide();
window.alert("success call back: " + output) // never reached
$scope.addNewImage(output);
$state.go('tab.dash', {}, {reload: true}); // does not work
$state.go('tab.dash') // does not work
$scope.refreshLocalstorage();
}
// #issue4-nl: not working
var errorCallback = function(error) {
$ionicLoading.hide();
console.log("error cb: "+ error)
window.alert("error cb: " + error)
}
function saveCanvasToPhone() {
var defer = $q.defer();
try {
window.canvas2ImagePlugin.saveImageDataToLibrary(
function(output){
$scope.addNewImage(output); // does not work to save imagepath on localstorage
$scope.debugEntryOther = output // works fine
defer.resolve(output)
$ionicLoading.hide()
},
function(error){
defer.reject(error)
$ionicLoading.hide()
window.alert(error)
},
document.getElementById('canvas')
);
} catch(error) {
defer.reject(error)
$ionicLoading.hide()
console.log("saveCanvasToPhone: trycatch: error: " + error)
}
return defer.promise;
} // save canvas to phone
} // done
Unfortunatly Canvas2Image plugin was originally designed to save the canvas to the gallery, not to save to a file and deal with the file later on.
I have not found alternatives to this plugin (nor have I really searched), but you can manage to get the file path where the file was saved.
It depends on wich platform you are targeting :
For android, the path to the file is passed in the parameter 'msg' of the success function
For Windows Phone, the 'msg' parameter returns the string 'Image saved :' followed with the path of the file. So you have to split the string.
For IOS, it is actually not possible with the original plugin, but there are several forks allowing to do it.
I was informed that the author will soon take some time to improve his plugin so I'm sure it will soon be possible to get the file path with the 'official' plugin even for IOS.
In the meantime, you could use my fork. In that case, for IOS the path is returned in the 'msg' parameter, just like for android.