Service Worker Travel Log - Day 6

Day 6 - Can You Sub For Me Tomorrow?

In today's example let's demonstrate how a Service Worker can substitute one network request for another. We again modified the code page reg.html to register a new Service Worker (sw5.js) with scope bmt6nbwiq (Table #5). 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 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});
    }
  </script>
</body>
</html>

Now have a visit to Table #5 and surprisingly you will see the home page of weather.com displayed although the address bar displays home page of Table #5!

Table #5 Home Page
https://haversineconsulting.quickbase.com/db/bmt6nbwiq?a=td

Go ahead poke around all you want - you won't find anything in the page's markup that indicates we are using an <iframe> or some script trick to achieve the switcheroo. Instead, the substitution is being performed completely outside the page's rendering within the Servcie Worker as part of servicing the network request for the Table #5 QuickBase page. In fact, Service Workers are designed so the browser does not even know that the page in question has substituted the QuickBase.com URL with weather.com URL.

Here is script for sw5.js:

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

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

self.addEventListener("fetch", event => {
  var dbidTable5 = "bmt6nbwiq";
  var re = new RegExp(dbidTable5);
  if (re.test(event.request.url)) {
    event.respondWith(
      fetch("https://weather.com/")
    )
  }
});

As you can see from the code above whenever a page from within Table #5 is requested the Service Worker responds with the response from the home page of weather.com.

This behavior should blow you mind if it is the first time you have seen it and you may question the practical utility or security of doing this. However, I assure you that this behavior of substituting the network response is both highly desirable in specific situations and 100% secure. And when Service Workers are used with QuickBase, you can accomplish some seemingly impossible tasks.

To give you a hint of what can be accomplished using Service Workers, here is an article and a screenshot of the guardian.com web site which we previously mentioned on Day 2 that serves up a crossword puzzle when there is no internet connectivity:

Building an offline page for theguardian.com
https://www.theguardian.com/info/developer-blog/2015/nov/04/building-an-offline-page-for-theguardian...

Now I know what you are thinking: "Can Service Workers enable QuickBase to display Sudoku puzzles when off-line?" Well the answer is YES and they can do a whole lot more ...

Next Up: Day 7 - Let Me Modify That For You

Testing

Forum Discussion

Service Worker Travel Log - Day 6