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

  • 30,224 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>
When I go to my home page I can see this in the console.
Uncaught SyntaxError: Invalid or unexpected token
bjgfg9j2v?a=dbpage&pagename=reg.html:10 

I have Application Tokens ON and even created a new one, but still the same ???
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,204 Points 20k badge 2x thumb
This is a JavaScript syntax error. The use of the word token is not referring to your application token - it is referring to JavaScript's attempt to parse some expression it does not understand.

Service Workers are supported by evergreen Chrome, FireFox and Opera not IE or Edge. Microsoft made an announcement they are developing Service Workers for Edge but they are just tardy:

https://blogs.windows.com/msedgedev/2016/05/24/fetch-and-xhr-limitations/

https://developer.microsoft.com/en-us/microsoft-edge/platform/status/serviceworker/

What browser are you using?
(Edited)
Im using Chrome Dan
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,204 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

  • 30,204 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 :)