Service Worker Travel Log - Day 7

Day 7 - Let Me Modify That For You

Following up on yesterdays's post let's demonstrate how a Service Worker can modify (not substitute) a network response. We again modified the code page reg.html to register a new Service Worker (sw6.js) with scope bmt6u8pgt (Table #6). Here is link to the registration page and the source:

https://haversineconsulting.quickbase.com/db/bmtpmup9q?a=dbpage&pagename=reg.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Service Worker Registration Page</title>
</head>
<body>
  <script>
    var dbid = "bmtpmup9q";
    var dbidTable1 = "bmtpmuqap";
    var dbidTable2 = "bmtpm79wg";
    var dbidTable3 = "bmtuavia8";
    var dbidTable4 = "bmtua29u4";
    var dbidTable5 = "bmt6nbwiq";
    var dbidTable6 = "bmt6u8pgt";
    var apptoken = "bpn2piidu367nrbfezws9dmz6qc6";
    if ("serviceWorker" in navigator) {
      navigator.serviceWorker.register(dbid + "?a=dbpage&pagename=sw3.js", {scope: dbidTable1});
      navigator.serviceWorker.register(dbid + "?a=dbpage&pagename=sw4.js", {scope: dbidTable3});
      navigator.serviceWorker.register(dbid + "?a=dbpage&pagename=sw5.js", {scope: dbidTable5});
      navigator.serviceWorker.register(dbid + "?a=dbpage&pagename=sw6.js", {scope: dbidTable6});
    }
  </script>
</body>
</html>

Again visit the application dashboard to register our new Service Worker:

Service Worker Travel Log Dashboard
https://haversineconsulting.quickbase.com/db/bmtpmup9q

Now visit any page within Table #6. Here a screenshot of visiting the homepage of Table #6:

Every page you visit within Table #6 will display an alert because we have arranged for the Service Worker sw6.js to inject the code page bmt6u8pgt.js. into every page within Table #6.

Note the injection of the code page bmt6u8pgt.js into Table #6 pages is not limited to {new, view, edit, report, grid edit} pages as it is for the IOL technique. Every page within Table #6 including charts and administrative pages will receive the injection of the code page bmt6u8pgt.js.

Go ahead and look at the source of any page within Table #6. At the bottom of the source listing you will see the code that loads our code page bmt6u8pgt.js:

You may be wondering shouldn't that injected <script> tag be within the <head> or <body> tag? My answer is don't worry about it - the browser will make sense of it as we intended. We have bigger fish to fry using Service Workers with QuickBase.

So how did we accomplish this feat? It is simple - we merely created a new response tacking on a short <script> tag at the bottom of the original page's markup and returned that modified response to the browser. Here is the code for sw6.js:

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

self.addEventListener("install", event => {
  event.waitUntil(self.skipWaiting());
});

self.addEventListener("activate", event => {
  event.waitUntil(self.clients.claim());
});

self.addEventListener("fetch", event => {
  var scriptFile = "bmtpmup9q?a=dbpage&pagename=bmt6u8pgt.js"
  if (event.request.mode === "navigate") {
    event.respondWith(
      fetch(event.request).then(response => {
        return response.text().then(body => {
          var markup = '<script src=${scriptFile}></script>';
          return new Response(body + markup, {headers: response.headers});
        });
      })
    );
  }
});

Now we have a way to customize any page within QuickBase using script before the browser even has a chance to start rendering the page. In future posts, we will explain in more detail what is going on but for now just get comfortable with the idea that you control your QuickBase application's behavior and you can make it do your bidding with Service Workers.

Next Up: Day 8 - Warning! Warning! Alien spacecraft approaching!

Testing

Forum Discussion

Service Worker Travel Log - Day 7