Service Worker Travel Log - Day 4

  • 4
  • 2
  • Question
  • Updated 2 years ago
  • Doesn't Need an Answer
  • (Edited)
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
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 28,304 Points 20k badge 2x thumb

Posted 2 years ago

  • 4
  • 2
Hi Dan

This is my code for the reg.html but I cant get it to activate the service worker?
I installed the Service Worker Detector.

sw3.js and sw4.js are copies of your code with my dbids.
Can you think of what I may be missing?

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Service Worker Registration Page</title>
</head>
<body>
  <script>
var dbid = "bjgfg9j2v";
    var dbidTable1 = "bjgfg9j4u";
    var dbidTable2 = "bkw7ji6y9";
    var dbidTable3 = "bmegt73fb";
    var dbidTable4 = "bmtwwihdt";
    var apptoken = "bi3u4amckdsz9xcqe3ehdbcwxty";

    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});
    }
  </script>
</body>
</html>
Im using Chrome Dan
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 28,304 Points 20k badge 2x thumb
You can share the application with me (use dandiebolt@yahoo.com)  if you want and I will debug.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 28,304 Points 20k badge 2x thumb
Thanks for sharing. It is now working. I don't know how you did it but there were those dreaded "replacement characters" in your your files which I manually removed.
oh jeez, I even looked for that!
Thanks Dan, thats great.
Looking forward to Day 5 :)