Service Worker to the Rescue

  • 1
  • 1
  • Question
  • Updated 10 months ago
  • Doesn't Need an Answer
  • (Edited)
There has been a lot of traffic opining about the new release that changed various aspects of the GUI. To be honest I didn't read most of the posts in detail nor do I have any problem overcoming any of the undesirable changes. That is because I can modify any aspect of QuickBase using Service Workers. You can to.

As an example, here is a grid edit viewof an application that shows the current green New Record button which I want to remove using a Service Worker:



Here is a screenshot of the same page where a Service Worker has removed the green button:



Now you may be wondering what the left hand panel is and why the URL is showing the domain https://cloudflareworkers.com/. In a nutshell, cloudflare has implemented a jsfiddle like service where you can demonstrate and share the implementation of a Service Worker as applied to any URL. It just turns out that this is an easier way for me to publiclly share a Service Worker demo rather than implement it wholly within QuickBase.

Here is full source of the Service Worker used above:

addEventListener("fetch", event => {
  event.respondWith(fetchAndModify(event.request));
});
async function fetchAndModify(request) {
  console.log("got a request:", request);
  // Send the request on to the origin server.
  const response = await fetch(request);
  // Read response body.
  const text = await response.text();
  // Modify it.
  const modified = text.replace(
  '<a onclick="GE_embMenu_newRec(this)" id="GE_NewRecordPick">New Record</a>',
  "");
  // Return modified response.
  return new Response(modified, {
    status: response.status,
    statusText: response.statusText,
    headers: response.headers
  });
}

Basically the Service Worker looks for the <a> element associated with the New Record button and removes it - BEFORE THE BROWSER EVEN STARTS TO RENDER THE PAGE.

Now the important thing to notice is that this very same Service Worker implemented as a part of the CloudFlareWorker demo can be used as a client side Service Worker. (wholly within QuickBase)

Now I could write a hundred pages extolling the virtues of using Service Workers with QuickBase but the bottom line is there is nothing Service Workers can't do. Service Workers is god mode for QuickBase.

UPDATE: I forgot to post the link:

https://cloudflareworkers.com/#28a28d6d0a693d85a38d856f44a8de37:https://haversineconsulting.quickbas...~

Similar to a jsfiddle, you can modify the Service Worker code in the left panel and create your own version for experimentation before porting the code to your own application.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,262 Points 20k badge 2x thumb

Posted 10 months ago

  • 1
  • 1
Photo of Michael Curtis

Michael Curtis

  • 524 Points 500 badge 2x thumb
Interesting stuff I think I am so used to iol its hard for me to wrap my head around using anything else. I am currently trying to make a button that gets the value from a QuickBase input without having to save first, then sends a post to google calendar and saves after. Currently, it is a two-step process.
The user has to save then they can send the POST to google calendar API.
Photo of Systems BVI

Systems BVI

  • 530 Points 500 badge 2x thumb
Hi Dan,

So, we can take this javascript as is and add it just like the IOL technique or is there a different way to ingest this javascript into quickbase ?

Thx!
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,262 Points 20k badge 2x thumb
Also there are four demos I created for a local meetup that demonstrate some basic operation of Service Workers for caching (off line), modify network response and substitute network response. They might not be too useful without the video (it was not recorded) but you might be of some help for your learning.

https://dandiebolt.com/sw/demo1.html
https://dandiebolt.com/sw/demo2.html
https://dandiebolt.com/sw/demo3.html
https://dandiebolt.com/sw/demo4.html

Hint: you have to expose the console and play around with the Service Worker tab in Chrome.

(Edited)
Photo of Systems BVI

Systems BVI

  • 530 Points 500 badge 2x thumb
Is there an example on how exactly we could bootstrap this within quickbase ? I am trying to go through the series you wrote but am having a difficult time finding the bootstrapping code for this. Anyway you could point me where to see how to bootstrap this in quickbase and then i am sure i can take it forward. Thanks!
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,262 Points 20k badge 2x thumb
On the dashboard there is a web widget that does the registration of several Service Workers which are individually scoped to a particular table:

view-source:https://haversineconsulting.quickbase.com/db/bmtpmup9q?a=dbpage&pagename=reg.html
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,262 Points 20k badge 2x thumb
I just noticed there is some code in the registration page that attempts to register a periodic sync domain event. This is one feature that I do not think is implemented by any browser yet and I probably should remove the code. the sync event (one off) is implemented but periodic sync is not. I think you can just ignore that code.

ServiceWorkerRegistration.periodicSync
https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/periodicSync

Background synchronization explained
https://github.com/WICG/BackgroundSync/blob/master/explainer.md
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,262 Points 20k badge 2x thumb
BTW here is a presentation I gave two years ago:

QuickBase Service Worker
https://www.dropbox.com/s/j9uum5x66hoef11/QBSW.pdf?dl=0

Some of the information may be stale as there have been a lot of changes since I wrote it.
Photo of Systems BVI

Systems BVI

  • 530 Points 500 badge 2x thumb
Awesome! That is great. I think i can get started with this now...fun fun!!!
Thanks much Dan!!
Photo of Systems BVI

Systems BVI

  • 530 Points 500 badge 2x thumb
So, ideally if i have service worker script for each table, we dont really need the old style IOL technique anymore. right ? All that could be done via IOL can be done from within the service worker scripts ?
Photo of Systems BVI

Systems BVI

  • 530 Points 500 badge 2x thumb
But Dan, if we have the need to do DOM based adjustments (such as adding a new div element etc), for that we have to wait for the DOM to fully load and only then we can perform the necessary javascript based alterations. how will we do all that with a service worker ? 
In the service worker, we are intercepting fetch requests which is way before the DOM is even loaded in the browser. right ? 
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,262 Points 20k badge 2x thumb
Service Workers do not have access to the DOM so you have to perform text level manipulation on the response. Perhaps the simpliest way of meeting your needs is to just appending a <script> tag to the end of the document:

UPDATED:
https://haversineconsulting.quickbase.com/db/bmtpmup9q?a=dbpage&pagename=sw6.js

Note the above code adds the <script> tag after the <body> - I know this might look malformed but the browser will figure it out. In a nutshell your Service Worker is just adding a custom <script> to the bottom over every page in scope.

If you really think you need DOM access you can import the library cherioe.js which is used in sw8.js:

https://haversineconsulting.quickbase.com/db/bmtpmup9q?a=dbpage&pagename=sw8.js

cheerio.js is a jQuery equivalent sometimes used with node.

Ask away - I doubt you could come up with a issue I have not already explored as I spent a ton of time on this two years ago and things have only gotten better in terms of browser support.
(Edited)
Photo of Systems BVI

Systems BVI

  • 530 Points 500 badge 2x thumb
Dan, it appears both the links above are to the same page. Could you send me the one where you are adding the script tag ?
Photo of Systems BVI

Systems BVI

  • 530 Points 500 badge 2x thumb
ok. no worries, looks like you updated it. 
Photo of Samwise the Brave

Samwise the Brave

  • 132 Points 100 badge 2x thumb
Great post, thanks for the info!