Service Worker Travel Log - Day 13
Day 13 - Hip Hip Cheerio!
Let's continue our previous post which dealt with our new Service Worker buddy sw8.js.
Code Page sw8.js
https://haversineconsulting.quickbase.com/db/bmtpmup9q?a=dbpage&pagename=sw8.js
You will notice that our new Service Worker had a line at the top that imported the cheerio.js library:
The reason that we are including this library is because we need to parse the XML response from API_DoQuery and convert it to a JSON response without having access to the DOM or jQuery. Cheerio.js is just a light weight jQuery replacement library that is often used server side (typically with Node) but equally useful within a Service Worker.
Here are some docs about Cheerio.js:
Cheerio.js
https://cheerio.js.org/
Cheerio.js Github Page
https://github.com/cheeriojs/cheerio
The usage of Cheerio.js within our Service Worker is pretty straightforward and basically is exactly the same as the jQuery solution that used the helper function XMLFlatToObj .
$ = cheerio.load(body);
var data = [];
var record = {};
$("record").each(function() {
record = {};
$(this).children().each(function () {
record[$(this).prop("tagName")] = $(this).text();
});
data.push(record);
})
The first statement loaded the XML response into the Cheerio object and the rest of the code is exactly the same as the orignal jQuery solution.
The only other thing worth remarking on is how we package up the JSON response. In a nutshell we take the data array obtained from the above script format it as JSON and set the headers of the new Response to indicate we are sending back JSON instead of XML and to not cache the new response:
It is really that simple! In summary, we created a new parameter value &fmt=json for API_DoQuery and included the conversion code within our Service Worker which will convert the XML response to JSON whenever this API method is used in Table #8.
Next Up: Day 14 - Where No API Has Gone Before
Let's continue our previous post which dealt with our new Service Worker buddy sw8.js.
Code Page sw8.js
https://haversineconsulting.quickbase.com/db/bmtpmup9q?a=dbpage&pagename=sw8.js
You will notice that our new Service Worker had a line at the top that imported the cheerio.js library:
importScripts("https://haversineconsulting.quickbase.com/db/bmss68i2j?a=dbpage&pagename=cheerio.js");
The reason that we are including this library is because we need to parse the XML response from API_DoQuery and convert it to a JSON response without having access to the DOM or jQuery. Cheerio.js is just a light weight jQuery replacement library that is often used server side (typically with Node) but equally useful within a Service Worker.
Here are some docs about Cheerio.js:
Cheerio.js
https://cheerio.js.org/
Cheerio.js Github Page
https://github.com/cheeriojs/cheerio
The usage of Cheerio.js within our Service Worker is pretty straightforward and basically is exactly the same as the jQuery solution that used the helper function XMLFlatToObj .
$ = cheerio.load(body);
var data = [];
var record = {};
$("record").each(function() {
record = {};
$(this).children().each(function () {
record[$(this).prop("tagName")] = $(this).text();
});
data.push(record);
})
The first statement loaded the XML response into the Cheerio object and the rest of the code is exactly the same as the orignal jQuery solution.
The only other thing worth remarking on is how we package up the JSON response. In a nutshell we take the data array obtained from the above script format it as JSON and set the headers of the new Response to indicate we are sending back JSON instead of XML and to not cache the new response:
var newBody = JSON.stringify({records: data}, null, " ");
return new Response(newBody, {
headers: {
'Content-Type': 'application/json',
'Cache-Control': 'max-age=0'
}
});It is really that simple! In summary, we created a new parameter value &fmt=json for API_DoQuery and included the conversion code within our Service Worker which will convert the XML response to JSON whenever this API method is used in Table #8.
Your are really going to like our next post as we are going to create a new API from scratch! To make it even more exciting I will take suggestions for what this new API will be named and what it will do. I am going to be out of the office for a few days so if there is some API you want let me know and if it is simple enough I that can make a demo out of it I will.
Next Up: Day 14 - Where No API Has Gone Before
