Service Worker Travel Log - Day 13

  • 1
  • 2
  • Question
  • Updated 6 months ago
  • Doesn't Need an Answer
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:

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
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,532 Points 20k badge 2x thumb

Posted 1 year ago

  • 1
  • 2
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,532 Points 20k badge 2x thumb
 

I hate to mention this but please refrain from commenting or liking my posts in this series for a few hours as I can no longer edit my post if you do this. The hardest part about these posts is getting them formatted in the forum correctly with spelling and grammar checks and sometimes there is a small typo I have to correct or a needed clarification. I wish there was a way to edit your posts but that is the way the admin set things up.
(Edited)
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,532 Points 20k badge 2x thumb
You may have noticed we had a lapse in our postings to the Service Worker Travel Log. It is definitely not for lack of content - I am simply very busy with other work. I will probably resume posting early next week.

But I would like to update you on some other Service Worker information. I have been waiting over a year for Microsoft to support Service Workers in their Edge browser. Well it looks like that will happen with the Windows 10 Update in the Fall and code named the Creators Update (v1703). The announcement will probably come on September 13 at Microsoft’s Edge Web Summit in Seattle. Along with greater support for the Fetch API Microsoft is indicating the Creaters Update will include support for the following features:

  • Enable service workers
  • Enable push notifications
  • Enable background sync
  • Enable service worker cache storage
Also, I have just given my second Meetup presentation on Service Workers in my home community and this weekend I will be participating in a healthcare hackathon were my team's submission will be using Service Workers with QuickBase to create an off-line first Progressive Web Application using Google's new Workbox framework:

https://developers.google.com/web/tools/workbox/
(Edited)
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,532 Points 20k badge 2x thumb
The Service Worker Travel Log has been on a bit of a hiatus during the summer as I am super busy but I wanted to pass on the latest good news.

As previously mentioned we are waiting for Service Workers to land in Edge in September. Meanwhile, the last browser holdout - Safari - has now committed to adding Service Workers to their browser:

Apple signals it's willing to let next-gen web apps compete with iOS apps
Service Workers land in WebKit, clearing way for better in-browser applications
https://www.theregister.co.uk/2017/08/04/service_workers_land_in_webkit_heralding_apple_acceptance/
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,532 Points 20k badge 2x thumb
Apparently Apple has released a version of Safari (Safari Tech Preview 38) which includes support for Service Workers behind a flag. This is hot off the press so I can't find much additional information at this time but it is great news:



https://twitter.com/fr3ino/status/900485318738149377

 This is from a credible source PWA (Progressive Web Applications) Tips newsletter:

https://pwa.tips/2017/08/24/Issue-7.html
(Edited)
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,532 Points 20k badge 2x thumb
This is so exciting Service Workers coming to Edge in September. QuickBase will never be the same again.

Microsoft Adding Support for Progressive Web Apps in Windows 10
By the time the Fall Creators Update is released in September, Edge should have all the service workers required for PWAs turned on out-of-the-box.
https://www.petri.com/microsoft-adding-support-progressive-web-apps-windows-10

Also, Microsoft's Patrick Kettner (Product Manager for Edge at Microsoft) "not" talking about Integrating service workers into the browser:

Top 5 Browser APIs You’re Not Using with with Patrick Kettner
http://shoptalkshow.com/episodes/278-top-5-browser-apis-youre-not-using-patrick-kettner/#t=4:40
(Edited)
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,532 Points 20k badge 2x thumb
Okay here is the new update on the release of the Windows 10 Fall Creators Update (which I think will include Service Worker support in Edge):

Create and play this holiday with the Windows 10 Fall Creators Update coming Oct. 17
https://blogs.windows.com/windowsexperience/2017/09/01/create-and-play-this-holiday-with-the-windows...
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,532 Points 20k badge 2x thumb
Today is the day Microsoft reveals their upcoming Service Worker offering in Edge:

Microsoft Edge Web Summit 2017
Service Worker: Going beyond the page
Sep 13, 2017 11:15AM–11:45AM  PST by Ali Alabbas
https://channel9.msdn.com/Events/WebPlatformSummit/Microsoft-Edge-Web-Summit-2017/ES05


This event will be live streamed.

We are near the inflection point, the convergence, the singularity - god mode is coming to QuickBase. All Your Base Are Belong To Us.

Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,532 Points 20k badge 2x thumb
Service Workers are in Edge Fall Creators Update To Be Released October 17!

I have been waiting almost two years for this. QuickBase will never be the same!

Install Windows 10 Insider Preview
https://insider.windows.com/en-us/welcome-insider/

These screenshots are from the Preview Build 16296.0

https://i.imgur.com/wdv2ZPi.jpg



https://i.imgur.com/p6jCEG5.jpg




All my examples appear to work in this Preview version of Edge. Here is an offline demo that works in Chrome, FireFox, Opera and now Edge:

Proof: https://dandiebolt.com/sw/demo2.html

It will take me some time to run through all my accumulated QuickBase examples but I don't think there are going to be any major problems.
(Edited)
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,532 Points 20k badge 2x thumb
If you think this Service Worker thingy is some type of wacky idea think again. Cloud providers are now adopting Service Workers so they will operate server-side (as opposed to client-side or in your browsr):

Introducing Cloudflare Workers: Run JavaScript Service Workers at the Edge
https://blog.cloudflare.com/introducing-cloudflare-workers/

Utilizing this capability would require QuickBase to host on Cloudflare (they don't) but Cloudflare provides a nice service to demonstrate how a Service Workers operate that is equally informative to demonstrate how the client-side (ie browser) based Service Workers that I am using operate because they use the same Service Worker API.

Here is a screenshot AND sharable Service Worker built in Cloudflare's Playgound (similar in concept to jsfiddle to some extent) that modifies QuickBase Support Center page by transforming the text "KnowledgeBase" into "The Big Knowledge Base":



https://cloudflareworkers.com/#6bbc95d6cd59903bf178eb8e791fb97b:https://login.quickbase.com/db/9kaw8...

Go ahead and change the replacement text in the code and click the blue Update button:
let modified = text.replace(
/KnowledgeBase/g, "Does this Service Worker Thingy Really Work?")
Don't be shy about chaining anything. Even the most novice QuickBase user should be able to change the text, press the button and stand in awe at the results.

Again you will not be able to use Cloudflare's Service Worker technology with QuickBase because QuickBase does not their host the domain there. However, the changes you just saw can be achieve with the client-side Service Worker technology built into your browser and hosted in a QuickBase code page.

We have reached singularity and are now converged - anything is now possible with QuickBase using Service Workers.
(Edited)
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,532 Points 20k badge 2x thumb
I should add that if you navigate around in the right hand panel the QuickBase page will update to whatever link you click on and the Service Worker on the left hand side stays active and continues to perform the substitution for the word "KnowledgeBase". So you will continuously see the table name "KnowledgeBase" change "The Big Knowledge Base" as you navigate because the Serrvice Worker continues to remain in scope.



Now if the Service Worker were coded to add a <script> tag to every page you would see the effect of that script tag execute on every QuickBase page within the domain.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,532 Points 20k badge 2x thumb
UPDATE:

>Utilizing this capability would require QuickBase to host on Cloudflare (they don't) ...

There is a bit of a misstatement here and some interesting news. First Cloudflare isn't really a hosting company. Rather they offer more of a unique combination of a CDN and Anycast Service (one IP address, Multiple Servers) in that their primary goal it to accelerate access to a domain and enhance security by connecting to the geographically closest servers among their worldwide network of servers (~100 worldwide).  Read their description here:

Cloudflare Anycast Explainer
https://blog.cloudflare.com/a-brief-anycast-primer/

But the interesting part of this is that apparently QuickBase will be using Clourflare in the near future. I have no further information about this but it does significantly raise the prospect that QuickBase users could gain access to Clourflare Service Workers if QuickBase allowed it at some time in the future.

In any case you can still use browser bassed Service Workers today in Chrome, FireFox, Opera and shortly in Edge (10/17/17) and the same Service Worker could be used server side via Cloudflare if QuickBase allowed it. This is very speculative but it could certainly play out in the long run.

Irrespective of all of this, the Clourflare Service Worker playground (cloudflareworkers.com) can be used today to safely experiment with using QuickBase with Service Workers without altering your QuickBase application.

These are extremely interesting developments and I think the long term benefits are enormous for QuickBase despite what appears to be a lot of legacy issues they are working out in their present product development plans.
(Edited)
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,532 Points 20k badge 2x thumb
Safari Adds Service Workers!

Safari is the last of the five six major browsers to add Service Workers.



All Your Base Are Belong To Us.

Release Notes for Safari Technology Preview 46
https://webkit.org/blog/8042/release-notes-for-safari-technology-preview-46/
Photo of Dan

Dan

  • 140 Points 100 badge 2x thumb
Service Workers also work in the UC Browser from Alibaba which is quite popular in the China market.



http://www.ucweb.com/

If you are no using Service Workers with QuckBase you are missing out on a whole ton of functionality. There is no preventing this trend - you will be assimilated.

Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,532 Points 20k badge 2x thumb
Can't stop this train ...

Apple goes back to the future with web apps
Apple's about to introduce Service Worker support in Safari. So, what are Service Workers, and why might they matter to you or your enterprise?
https://www.computerworld.com/article/3251173/apple-mac/apple-goes-back-to-the-future-with-web-apps....
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,532 Points 20k badge 2x thumb
With QuickBase ending support for IE9 and IE10 the only gap in using Service Workers with QuickBase will soon be IE11 as Apple (the last holdout) will soon deploy Safari 48 and all other major browsers have implemented it.

An unprecedented blockbuster scenario for QuickBase customization for Earth based QuickBase users.

Ending Support for Internet Explorer 9 and 10 Browser
https://community.quickbase.com/quickbase/topics/ending-support-for-internet-explorer-9-and-10-brows...

Apple Releases Safari Technology Preview 48 With Bug Fixes and Feature Improvements
Safari Technology Preview release 48 includes bug fixes and feature improvements for Storage Access API, SVG, Service Workers, CSS, Web API, Rendering, Web Inspector, Web Driver, WebRTC, JavaScript, and WebAssembly. 
https://www.macrumors.com/2018/01/24/apple-releases-safari-technology-preview-48/
(Edited)
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,532 Points 20k badge 2x thumb
The day has come:

Service Workers Now Supported across All Major Browsers

"Service workers is probably the single most powerful API added to the web platform recently. It gives you access to a programmable proxy in JavaScript land. You can do anything you want with each request made and the response received by the browser - cancel the request, re-route it, modify the response(in some cases), cache it, etc."
https://www.infoq.com/news/2018/05/service-workers-supported-across
Photo of Charlie

Charlie

  • 294 Points 250 badge 2x thumb
Wow Dan this is some great info. My head is spinning with the possibilities :)
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,262 Points 20k badge 2x thumb
It is revolutionary and now in all modern browsers. I have been piecemeal using Service Workers in select applications but over the next month I plan on converting every application in my account to using them.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,262 Points 20k badge 2x thumb
>spinning with the possibilities :)

QuickBase should be spinning with the possibilities as by employing CloudFlare for their DDOS protection they are now in a position employ CloudFlare Workers which use the same API as Service Workers!

(Edited)