7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.3 Syncing Data

We will finally sync our data in this lesson. The Background Sync API uses events... just like everything else.

4.3 Syncing Data

In the past couple of lessons, we've been setting our application up to use background sync, so that in this lesson we actually get to sync. And it's very easy. We just trigger the sync and then we sync, so it's straightforward. Now the first thing that we need to do is, pull in the idb-keyval file into our service worker. Now yes, we have listed it here as far as our cache, but that's our cache. We wants to actually use this inside of this file. So what we need to do is is call a method called importScripts. And then we specify the scripts that we want. It accepts an array of strings, and these are paths relative to the service worker. So it's basically the paths that we defined for our static resources. So here we just want to pull in that idb-keyval so that we can use that directly here, instead of a service worker so the we can interact with our index db. And with that we can scroll all the way down to the bottom. And let's get rid of this comment inside of the fetch event listener because we don't need that anymore. And we are going to add another event listener, and we will listen for the sync event. So that's basically it. We listen for this event, and when it occurs, then we do whatever work that we need to do. And we can issue any kind of sync events, because we're given this tag property. And this is what allows us to determine what type of sync is occurring. So in this particular case, we just want to sync our reports. So let's just call this sync-reports or report, rather. And of course, we need an if statement here. So if the tag is equal to our sync report, then, well we want to sync the report. And from here on out, it's just like any other event listener, to where we want to wait until we execute a function that we'll just call sync report. There we go. So let's write this function. Let's scroll up a little bit. This is going to be after the get response for function. So this is going to be asynchronous. And the first thing that we are going to do is get whatever we have in the database. So let's just call this object changed. And we will await Idb-keyval. We will call, the get method, in order to get, the changed value. Now it's entirely possible that, we don't have a value to work with. So the first thing we need to do is make sure that there is something in changed. But remember that changed is an array. And if there is nothing inside of that array, there's nothing to do. So as long as we have a value for changed, and it has a length greater than zero, then of course, we want to push all of that to the server. And of course, we don't have anything on the server to actually process this stuff. So we're just gonna write a message to the console, send report to server. In a real application, we would use fetch and issue a put request with that information, and then we would be good to go. But for our purposes, this is going to be fine. We can at least see that this code is working. So now all we need to do is trigger this sync event, and we do that inside of our app js. So, in the section where are offline, what we are going to do after we have added or removed things from our marked array, we are going to trigger that sync event. Except that in this particular case it's not really triggering it, it's going to queue it up, so that if we are offline, then it will queue up the event, so that when we are online, then that event will fire and our code in our service worker will execute. But we need to do some progressive enhancement, because not every browser supports background sync. So we're going to make sure, that SyncManager is in window, and most Chromium browser have this object. So that then, we will use the navigator object, we want the serviceworker and we want to do this when it's ready. Then we will use this registration object, to sync and register, the sync-report, event is not really any event but we are registering that tag. And there we go. That's going to, kick off the sync event which will get queued up if we are offline. And then it will actually fire when we are online. So all we have to do is just go to the browser and test. So let's go offline. Let's clear out the storage, let's do a hard refresh, and then let's go offline. And whenever we click on any one of these, we get an error. And I knew we would because, well, I've been testing with this. And I don't know why we are getting this Permission denied error. It appears to only happen in Brave, and I've tested it on multiple machines. So it's not just this machine, and it's not any settings that I have changed because I have done fresh installs of Brave on machines that didn't have Brave. So, I don't know. I've made inquiries, but we'll just have to wait and see what's going on there. So instead, what we can do is either fire up Google Chrome, or the Chromium version of Edge, or some other Chromium browser. Apparently, Opera doesn't according the MDM, but Opera might work. But we just need to go to local host 3000, let's pull up the developer tools, and we will go to the application which is already here. Although let's do this, let's clear out everything, let's do a hard refresh. And now if we go offline, let's clear out the console there. So if we click on any one of these things, notice we don't get an error, so it is something in Brave, I don't know what. And of course if we look at indexdb, we are going to see that we are indeed, storing data here. So we are offline, and just by clicking one of these things, I should have issued that backgrounds sync event, so that whenever we go online, we should see something in the console that says that it is sending the report. And there we go. Now of course, something else that we should have done inside of the service worker is actually clear out the data that we had inside of our index db, because of we're sending this stuff to the browser, then all of that stuff is updated, and we want to clear out idbKeyval set, and that's changed to an empty array, but you get the idea. We have now set up our application for background sync, so that if we are offline and we make changes to our report, those changes would be uploaded whenever we were back online, and that's a pretty awesome feature, if you ask me.

Back to the top