Expand all | Collapse all

Service Worker to the Rescue

Samwise Brave01-25-2018 20:30

  • 1.  Service Worker to the Rescue

    Posted 01-24-2018 17:40
    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 => {
    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:


    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.

  • 2.  RE: Service Worker to the Rescue

    Posted 01-25-2018 16:28
    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.

  • 3.  RE: Service Worker to the Rescue

    Posted 01-25-2018 17:14
    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 ?


  • 4.  RE: Service Worker to the Rescue

    Posted 01-25-2018 17:30
    Service Workers have to  be registered using code similar to this:


    Once registered a Service Worker sits between your browser and the QuickBase server and listens for domain events and  can replace or modify the request and response or processes other events such as going offline, caching, syncing, notifications etc. 


    The above graphic needs to be updated as Service Workers also work in Edge, UC Browser and are in development for Safari.

    Nothing like this has ever been possible before without installing a client side proxy. Service Workers is like god mode for QuickBase and it can modify any aspect of the application.

  • 5.  RE: Service Worker to the Rescue

    Posted 01-25-2018 17:33
    Thanks Dan! Do you have a full working demo somewhere on how this registration needs to be done etc ? I am confused on where exactly we would call the registration code?_

  • 6.  RE: Service Worker to the Rescue

    Posted 01-25-2018 17:39
    There is a series of posts I wrote called Service Worker Travel Log you can find in the forum. I sort of stopped midway posting to the series as these suckers are so powerful they are difficult to live demo without having an account dedicate to just to the Service Workers. But I assure you the are rightfully called god mode for QuickBase as there is nothing they can't do. But I get tired extolling their virtues as it takes years of promoting techniques such as IOL before it sinks in how powerful these scripting techniques are.

  • 7.  RE: Service Worker to the Rescue

    Posted 01-25-2018 17:51
    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.


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

  • 8.  RE: Service Worker to the Rescue

    Posted 01-25-2018 17:55
    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!

  • 9.  RE: Service Worker to the Rescue

    Posted 01-25-2018 18:03

  • 10.  RE: Service Worker to the Rescue

    Posted 01-25-2018 18:10
    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.


    Background synchronization explained

  • 11.  RE: Service Worker to the Rescue

    Posted 01-25-2018 18:20
    BTW here is a presentation I gave two years ago:

    QuickBase Service Worker

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

  • 12.  RE: Service Worker to the Rescue

    Posted 01-25-2018 18:09
    Awesome! That is great. I think i can get started with this now...fun fun!!!
    Thanks much Dan!!

  • 13.  RE: Service Worker to the Rescue

    Posted 01-25-2018 18:24
    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 ?

  • 14.  RE: Service Worker to the Rescue

    Posted 01-25-2018 18:32
    A Service Worker has the concept of a scope which restricts what URLs will execute the Service Worker. A Service Worker will only execute against URL paths that are at the same level or lower. Because of QuickBase's URL architecture you can register a Service Worker against the scope https://SUBDOMAIN.quickase.com/db (basically the entire account) or against the scope of a single dbid https://SUBDOMAIN.quickase.com/db/DBID.

    Once registered the Service Worker will execute against any page in the defined scope (not just add, view, edit, report or grid pages). Every page including charts and  administrative pages. So within your Service worker you have to put the appropriate logic to decode what particular code should be executed based on the current URL or query parameters or some other condition..

  • 15.  RE: Service Worker to the Rescue

    Posted 01-25-2018 19:16
    right. which would mean that we don't need to use the old style IOL technique (of embedding a field into each form). right ? 

  • 16.  RE: Service Worker to the Rescue

    Posted 01-25-2018 19:20

  • 17.  RE: Service Worker to the Rescue

    Posted 01-25-2018 20:14
    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 ? 

  • 18.  RE: Service Worker to the Rescue

    Posted 01-25-2018 20:26
    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:


    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:


    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.

  • 19.  RE: Service Worker to the Rescue

    Posted 01-25-2018 21:06
    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 ?

  • 20.  RE: Service Worker to the Rescue

    Posted 01-25-2018 21:07
    ok. no worries, looks like you updated it. 

  • 21.  RE: Service Worker to the Rescue

    Posted 01-25-2018 20:30
    Great post, thanks for the info!