Discussions

Expand all | Collapse all

Service Worker Travel Log - Day 4

  • 1.  Service Worker Travel Log - Day 4

    Top
    Contributor
    Posted 06-02-2017 03:00
    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


  • 2.  RE: Service Worker Travel Log - Day 4

    Posted 06-03-2017 10:31
    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>


  • 3.  RE: Service Worker Travel Log - Day 4

    Posted 06-03-2017 10:57
    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 ???


  • 4.  RE: Service Worker Travel Log - Day 4

    Top
    Contributor
    Posted 06-03-2017 11:25
    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?


  • 5.  RE: Service Worker Travel Log - Day 4

    Posted 06-03-2017 11:42
    Im using Chrome Dan


  • 6.  RE: Service Worker Travel Log - Day 4

    Top
    Contributor
    Posted 06-03-2017 11:45
    You can share the application with me (use dandiebolt@yahoo.com)  if you want and I will debug.


  • 7.  RE: Service Worker Travel Log - Day 4

    Posted 06-03-2017 11:51
    invite sent


  • 8.  RE: Service Worker Travel Log - Day 4

    Top
    Contributor
    Posted 06-03-2017 12:08
    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.


  • 9.  RE: Service Worker Travel Log - Day 4

    Posted 06-03-2017 12:12
    oh jeez, I even looked for that!
    Thanks Dan, thats great.
    Looking forward to Day 5 :)