Service Worker Travel Log - Day 4

Day 4 - Just Give Me Some of the Things

Perhaps logging ALL the URLs QuickBase loads was not such a great idea as this included every file used to build the page a user visited. How about we just log the URLs of the pages a user visits? In other words, let's just log the URLs that show up in the address bar of the browser. This sounds a bit more practical as there will be a lot less data generated.

To this end please visit the application dashboard of our Service Worker Travel Log application to force the registration of a new Service Worker:

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

Next visit any page within Table #3 and interact with a few records:

Table #3
https://haversineconsulting.quickbase.com/db/bmtuavia8?a=td

If you now jump over to Table #4 you will see that your activity in Table #3 has been automatically recorded in Table #4 which is serving as a simple log table.

Table #4
https://haversineconsulting.quickbase.com/db/bmtua29u4?a=td

To see how this was accomplished let's take a look at the JavaScript in our updated registration page:

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

    var dbid = "bmtpmup9q";
    var dbidTable1 = "bmtpmuqap";
    var dbidTable2 = "bmtpm79wg";
    var dbidTable3 = "bmtuavia8";
    var dbidTable4 = "bmtua29u4";
    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});
    }

Notice that we are now using some variables to represent the various dbid's and the application token. We are also registering two Service Workers (one for Table #1 and one for Table #3).

Here is the relevant code in our new Service Worker:

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

self.addEventListener("fetch", event => {
  var dbidTable4 = "bmtua29u4";
  var apptoken = "bpn2piidu367nrbfezws9dmz6qc6";
  if (event.request.mode === "navigate") {
    var urlVisited = event.request.url;
    var formData = new FormData();
    formData.append("_fid_6", urlVisited );
    formData.append("apptoken", apptoken);
    fetch(dbidTable4 + "?act=API_AddRecord", {  
      credentials: "include",
      method: "POST",
      body: formData
    });
  }
});

In contrast to our previous example that logged every URL fetched by a page, in this case we are only logging URLs that are top-level navigation URLs. In other words we are only logging those URLs that appear in the address bar and are within the scope of this Service Worker (Table #3).

Tomorrow we will explain the code that actually logs a URL to Table #4 but you can probably figure it out yourself. What will note now is that we can't use jQuery's AJAX methods in a Service Worker because jQuery assumes you have access to the DOM and the DOM in not accessible within a Service Woker. Also note that there are two uses of "fetch" in our code. A "fetch event" (detected by the addEventListener method) is simply triggered when a Service Worker detects the browser is making a network request for an asset. This event is a Domain Event not a DOM event. The "Fetch API" is used within the fetch event listener to make an supplemental network request using the API method API_AddRecord to log the URL to Table #4 which is our log table.

Next Up: Day 5 - She's so Fetching