My PWA has a large data payload. I want to display a 'Please wait...' load page and wait until all caching is complete before launching the full app. Therefore, I need to detect when all caching has completed. The snippet of my service worker is:
let appCaches = [{
name: 'pageload-core-2018-02-14.002',
urls: [
'./',
'./index.html',
'./manifest.json',
'./sw.js',
'./sw-register.js'
]
},
{
name: 'pageload-icon-2018-02-14.002',
urls: [
'./icon-32.png',
'./icon-192.png',
'./icon-512.png'
]
},
{
name: 'pageload-data-2019-02-14.002',
urls: [
'./kjv.js'
]
}
];
let cacheNames = appCaches.map((cache) => cache.name);
self.addEventListener('install', function (event) {
console.log('install');
event.waitUntil(caches.keys().then(function (keys) {
return Promise.all(appCaches.map(function (appCache) {
if (keys.indexOf(appCache.name) === -1) {
caches.open(appCache.name).then(function (cache) {
return cache.addAll(appCache.urls).then(function () {
console.log(`Cached: ${appCache.name} # ${Math.floor(Date.now() / 1000)}`);
});
});
} else {
console.log(`Found: ${appCache.name}`);
return Promise.resolve(true);
}
})).then(function () {
// Happens first; expected last.
console.log(`Cache Complete # ${Math.floor(Date.now() / 1000)}`);
});
}));
self.skipWaiting();
});
When I test this with a simulated 3G network, the trace is:
I do not understand why the 'Cache Complete' message is logged before any of the individual 'Cached' messages are logged; I would expect it to be last. Is there something different about the way Promise.all behaves compared to other promises?
Oy! What a silly oversight. After breaking the promise chains into individual promises and stepping through the code, the problem became obvious.
self.addEventListener('install', function (event) {
console.log('install');
event.waitUntil(caches.keys().then(function (keys) {
return Promise.all(appCaches.map(function (appCache) {
if (keys.indexOf(appCache.name) === -1) {
// Never returned the promise chain to map!!!
return caches.open(appCache.name).then(function (cache) {
return cache.addAll(appCache.urls).then(function () {
console.log(`Cached: ${appCache.name} # ${Math.floor(Date.now() / 1000)}`);
});
});
} else {
console.log(`Found: ${appCache.name}`);
return Promise.resolve(true);
}
})).then(function () {
console.log(`Cache Complete # ${Math.floor(Date.now() / 1000)}`);
});
}));
self.skipWaiting();
});
I never returned the promise chain to the map function (no explicit return always returns undefined). So the array passed to Promise.all contained only undefined values. Therefore, it resolved immediately and hence logged its message before the others.
Live and learn...
#claytoncarney Do you know how to pass a callback.. or any way to listen to this event from my app?
I try to send a toast message to my user telling them that the data has been cached...
In this case, I send an alert (it's do not work)...
Related
I have been trying to load several CSV files before running the code on my page as it uses the data from the CSV files. I have used PAPAPARSE.js as a library to help me with this and I have come up with the following solution.
function loadData(){
console.log("Loading Data!")
loadNodeData();
loadEdgeData();
loadHeadendData();
setup();
}
function loadNodeData(){
Papa.parse("Data/CSV1.csv", {
download: true,
step: function(row) {
NodeData.push(row.data)
},
complete: function() {
console.log("Loaded Node Data!");
load1 = true;
}
});
}
function loadEdgeData(){
Papa.parse("Data/CSV2.csv", {
download: true,
step: function(row) {
EdgeData.push(row.data)
},
complete: function() {
console.log("Loaded Edge Data!");
load2 = true;
}
});
}
function loadHeadendData(){
Papa.parse("Data/CSV3.csv", {
download: true,
step: function(row) {
HeadendArr.push(row.data)
},
complete: function() {
console.log("Loaded Headend Data!");
load3=true;
}
});
}
function setup() {
intervalID = setInterval(isDataLoaded,100)
}
function isDataLoaded(){
//Attempt to setup the page, this will only work if the data iss loaded.
if(load1 && load2 && load3){
console.log("LOADED");
_setupSearchOptions();
}
}
I have this following setup, however i don't know if this is the best way to go about doing something like this. the loadData triggers on page load
<head onload="loadData()">
Is this the correct way to make the program flow?
A more modern approach is to use promises.
You can cut down the code repetition by creating one function that passes in the url and step array to push to and wrap the Papa.parse() call in a promise that gets resolved in the complete callback.
Then use Promise.all() to call _setupSearchOptions() after all three promises resolve
Something like:
function parseCsv(url, stepArr){
return new Promise(function(resolve, reject){
Papa.parse(url, {
download:true,
step: function(row){
stepArr.push(row.data)
},
complete: resolve
});
});
}
function loadData(){
const nodeReq = parseCsv("Data/CSV1.csv", NodeData);
const edgeReq = parseCsv("Data/CSV2.csv", EdgeData);
const headReq = parseCsv("Data/CSV3.csv", HeadendArr);
Promise.all([ nodeReq, edgeReq, headReq]).then(_setupSearchOptions);
}
Note that no error handling has been considered here. Presumably the Papa.parse api also has some fail or error callback that you would use to call the reject() and use a catch() with Promise.all() to handle that failure
I need to call an API recursively using request promise after getting result from API need to write in an excel file , API sample response given below
{
"totalRecords": 9524,
"size": 20,
"currentPage": 1,
"totalPages": 477,
"result": [{
"name": "john doe",
"dob": "1999-11-11"
},
{
"name": "john1 doe1",
"dob": "1989-12-12"
}
]
}
Now I want to call this API n times, here n is equal to totalPages, after calling each API I want to write response result to the excel files.
First write page 1 response result to excel then append page 2 response result to excel file and so on..
I have written some sample code given below
function callAPI(pageNo) {
var options = {
url: "http://example.com/getData?pageNo="+pageNo,
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
json: true
}
return request(options)
}
callAPI(1).then(function (res) {
// Write res.result to excel file
}).catch(function (err) {
// Handle error here
})
But facing problem calling recursively API and maintaining sequentially like write page 1 result first to excel file then page 2 result append to excel and so on..
Any code sample how to achieve in nodejs
You want to do something like this:
function getAllPages() {
function getNextPage(pageNo) {
return callAPI(pageNo).then(response => {
let needNextPage = true;
if (pageNo === 1) {
// write to file
} else {
// append to file
}
if (needNextPage) {
return getNextPage(pageNo+1);
} else {
return undefined;
}
});
}
return getNextPage(1);
}
Obviously change that 'needNextPage' to false to stop the recursion when you're done
So you want to do 477 requests in sequence? How long do you wanna wait for this to finish? Even in paralell, this would be still too long for me.
Best: write an API that can return you a batch of pages at once. Reducing the number of requests to the backend. Maybe something like http://example.com/getData?pages=1-100 and let it return an Array; maybe like
[
{
"totalRecords": 9524,
"currentPage": 1,
"totalPages": 477,
"result": [...]
},
{
"totalRecords": 9524,
"currentPage": 2,
"totalPages": 477,
"result": [...]
},
...
]
or more compact
{
"totalRecords": 9524,
"totalPages": 477,
"pages": [
{
"currentPage": 1,
"result": [...]
},
{
"currentPage": 2,
"result": [...]
},
...
]
}
Sidenote: writing the size of the results array into the json is unnecessary. This value can easily be determined from data.result.length
But back to your question
Imo. all you want to run in sequence is adding the pages to the sheet. The requests can be done in paralell. That already saves you a lot of overall runtime for the whole task.
callApi(1).then(firstPage => {
let {currentPage, totalPages} = firstPage;
//`previous` ensures that the Promises resolve in sequence,
//even if some later request finish sooner that earlier ones.
let previous = Promise.resolve(firstPage).then(writePageToExcel);
while(++currentPage <= totalPages){
//make the next request in paralell
let p = callApi(currentPage);
//execute `writePageToExcel` in sequence
//as soon as all previous ones have finished
previous = previous.then(() => p.then(writePageToExcel));
}
return previous;
})
.then(() => console.log("work done"));
or you wait for all pages to be loaded, before you write them to excel
callApi(1).then(firstPage => {
let {currentPage, totalPages} = firstPage;
let promises = [firstPage];
while(++currentPage < totalPages)
promises.push(callApi(currentPage));
//wait for all requests to finish
return Promise.all(promises);
})
//write all pages to excel
.then(writePagesToExcel)
.then(() => console.log("work done"));
or you could batch the requests
callApi(1).then(firstPage => {
const batchSize = 16;
let {currentPage, totalPages} = firstPage;
return Promise.resolve([ firstPage ])
.then(writePagesToExcel)
.then(function nextBatch(){
if(currentPage > totalPages) return;
//load a batch of pages in paralell
let batch = [];
for(let i=0; i<batchSize && ++currentPage <= totalPages; ++i){
batch[i] = callApi(currentPage);
}
//when the batch is done ...
return Promise.all(batch)
//... write it to the excel sheet ...
.then(writePagesToExcel)
//... and process the next batch
.then(nextBatch);
});
})
.then(() => console.log("work done"));
But don't forget to add the error handling. Since I'm not sure how you'd want to handle errors with the approaches I've posted, I didn't include the error-handling here.
Edit:
can u pls modify batch requests, getting some error, where you are assigning toalPages it's not right why the totalPages should equal to firstPage
let {currentPage, totalPages} = firstPage;
//is just a shorthand for
let currentPage = firstPage.currentPage, totalPages = firstPage.totalPages;
//what JS version are you targeting?
This first request, callApi(1).then(firstPage => ...) is primarily to determine currentIndex and totalLength, as you provide these properties in the returned JSON. Now that I know these two, I can initiate as many requests in paralell, as I'd want to. And I don't have to wait for any one of them to finish to determine at what index I am, and wether there are more pages to load.
and why you are writing return Promise.resolve([ firstPage ])
To save me some trouble and checking, as I don't know anything about how you'd implement writePagesToExcel.
I return Promise.resolve(...) so I can do .then(writePagesToExcel). This solves me two problems:
I don't have to care wether writePagesToExcel returns sync or a promise and I can always follow up with another .then(...)
I don't need to care wether writePagesToExcel may throw. In case of any Error, it all ends up in the Promise chain, and can be taken care of there.
So ultimately I safe myself a few checks, by simply wrapping firstPage back up in a Promise and continue with .then(...). Considering the amounts of data you're processing here, imo. this ain't too much of an overhead to get rid of some potential pitfalls.
why you are passing array like in resolve
To stay consistent in each example. In this example, I named the function that processes the data writePagesToExcel (plural) wich should indicate that it deals with multiple pages (an array of them); I thought that this would be clear in that context.
Since I still need this seperate call at the beginning to get firstPage, and I didn't want to complicate the logic in nextBatch just to concat this first page with the first batch, I treat [firstPage] as a seperate "batch", write it to excel and continue with nextBatch
function callAPI(pageNo) {
var options = {
url: "http://example.com/getData?pageNo="+pageNo,
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
json: true
}
return request(options)
}
function writeToExcel(res){console.log(res)} //returns promise.
callAPI(1).then(function (res) {
if(res){
writeToExcel(res).then(() => {
var emptyPromise = new Promise(res => setTimeout(res, 0));
while(res && res.currentPage < res.totalPages){
emptyPromise = emptyPromise.then(() => {
return callAPI(res.currentPage).then(function (res){
if(res){
writeToExcel(res)
}
});
}
}
return emptyPromise;
});
}
}).catch(function (err) {
// Handle error here
})
I would like to launch a new request if this function in relation with my services works, how to proceed? Thank you
test.component.ts
destroyUnicorn(item){
this.itemService.updateUnicorn( {
statut: "destroyed",
id: item.id
});
}
item.service.ts
updateUnicorn(item) {
this.itemDoc = this.afs.doc("unicorns/${item.id}");
this.itemDoc.update(item) <------ FireStore request
.then(function() {})
.catch(function() {});
}
Global idea :
-- 1 ° In my template, I click on a button who execute the function deleteUnicorn of my component.
--- 2 ° The deleteUnicorn function sends the parameters to the updateUnicorn function in my services, which sends a request to Firestore to modify the content in the database.
-- 3 ° I would like, when the function is finished and works, to be able to execute a new function which will modify the user's money in another table of the database.
You can chain promises. Change updateUnicorn() method in order to return a resolved promise and then add your desired functionality:
destroyUnicorn(item){
this.itemService.updateUnicorn( {
statut: "destroyed",
id: item.id
})
.then(function(something) {
// This will execute if updateUnicorn resolves.
});
}
And in your updateUnicorn method:
updateUnicorn(item) {
this.itemDoc = this.afs.doc("unicorns/${item.id}");
this.itemDoc.update(item) <------ FireStore request
.then(function(something) {
return Promise.resolve(something);
})
.catch(function() {});
}
Also, if you don't need to use the response of the itemDoc.update() method, you could simply update the function like this:
updateUnicorn(item) {
this.itemDoc = this.afs.doc("unicorns/${item.id}");
return this.itemDoc.update(item);
}
And the destroyUnicorn() will remain the same.
There are numerous examples out there for initializing a service worker with a single cache similar to the following:
let cacheName = 'myCacheName-v1';
let urlsToCache = ['url1', 'url2', url3'];
self.addEventListener('install', function (event) {
event.waitUntil(
caches.open(cacheName).then(function (cache) {
return cache.addAll(urlsToCache);
}).then(function () {
return this.skipWaiting();
})
);
});
I wish to initialize multiple caches on my service worker. The motivation is to group assets by their tendency for change (e.g., static app data vs. css, javascript, etc.). With multiple caches, I can update individual caches (via versioned cache names) as files within that cache change. Ideally, I wish to setup a structure similar to the following:
let appCaches = [{
name: 'core-00001',
urls: [
'./',
'./index.html', etc...
]
},
{
name: 'data-00001',
urls: [
'./data1.json',
'./data2.json', etc...
]
},
etc...
];
My best attempt so far is something similar to:
self.addEventListener('install', function (event) {
appCaches.forEach(function (appCache) {
event.waitUntil(
caches.open(appCache.name).then(function (cache) {
return cache.addAll(appCache.urls);
}));
});
self.skipWaiting();
});
This approach seems to work. However, I'm still a newbie to service workers and promises. Something tells me that this approach has a pitfall that I'm too inexperienced to recognize. Is there a better way to implement this?
It's better to call event.waitUntil only once in a handler, but the good thing is it's relatively easy to get a single Promise to wait for.
Something like that should work:
event.waitUntil(Promise.all(
myCaches.map(function (myCache) {
return caches.open(myCache.name).then(function (cache) {
return cache.addAll(myCache.urls);
})
)
));
Promise.all takes an Array of Promises and resolves only after all the promises in the Array resolve, which means that install handler will wait till all the caches are initialized.
Thanks pirxpilot! Your answer, combined with JavaScript Promises: an Introduction, and a lot of trial and error figuring out how to chain all these Promises together resulted in a nice little implementation.
I added a requirement to only cache changes. Per best practices, the old cache is deleted during the 'activate' event. The end product is:
let cacheNames = appCaches.map((cache) => cache.name);
self.addEventListener('install', function (event) {
event.waitUntil(caches.keys().then(function (keys) {
return Promise.all(appCaches.map(function (appCache) {
if (keys.indexOf(appCache.name) === -1) {
return caches.open(appCache.name).then(function (cache) {
console.log(`caching ${appCache.name}`);
return cache.addAll(appCache.urls);
})
} else {
console.log(`found ${appCache.name}`);
return Promise.resolve(true);
}
})).then(function () {
return this.skipWaiting();
});
}));
});
self.addEventListener('activate', function (event) {
event.waitUntil(
caches.keys().then(function (keys) {
return Promise.all(keys.map(function (key) {
if (cacheNames.indexOf(key) === -1) {
console.log(`deleting ${key}`);
return caches.delete(key);
}
}));
})
);
});
I'm writing tests with mocha that check that a changing state polled from a rest api is rendered correctly. Is it possible to change what the mocked endpoint returns in the middle of the test? I've tried overriding the mocked endpoint and using var as the data and changing it but neither works.
With override:
it("should render correctly") {
loadPage(done, {init: function() {
testUtils.mockjax("/url", {"data": "data"})
}, onload: function() {
expect($$("#data")).to.be.visible()
testUtils.mockjax("/url", {"data": ""})
clock.tick(5000)
expect($$("#data")).not.to.be.visible() # does not work
...
done()
}
}
With variable:
it("should render correctly") {
var data = {"data": "data"}
loadPage(done, {init: function() {
testUtils.mockjax("/url", data)
}, onload: function() {
expect($$("#data")).to.be.visible()
data = {"data": ""}
clock.tick(5000)
expect($$("#data")).not.to.be.visible() # does not work
...
done()
}
}
I would do this by setting up a custom handler function versus the basic url and data matching. You would need to set up this mock before your test block, but then you could inspect the incoming request data and determine whether to match and what to return:
$.mockjax(function(requestSettings) {
if ( requestSettings.url === '...' ) {
return {
responseText: "foo" // you can change this based on the incoming request
};
}
// If you get here, there was no match
return;
});