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.1 Preparing the Application

Although it's not yet standard, we can use the Background Sync API to sync changes when we go from offline to online. We'll make the necessary preparations in this lesson.

Related Links

4.1 Preparing the Application

Before we start talking about background sync, I need to first of all warn you that this is not a standard API. It has been in working draft for several years, and it will eventually become standard. It's just a matter of when, and what will change since then. So you might be thinking if it's not standard, why should we be using it, or learning about it? Well, because it's cool, and it will be standard. Now, unfortunately, support for background sync is limited to chromium based things. Although Opera is, for whatever reason, not part of that list, and I don't know why. But everything else that's based on chromium should support background sync, so that's a ton of devices right there. Now, you might be thinking, what exactly is background sync? Well, here's how we can use it. All right, so what I want to do is change our application. So that when we are online, whenever we click on our items, it's going to toggle the value of the complete flag there. So it's going to be the naive way of how we would either say that something is complete, or not complete. And then of course, behind the scenes in a real application, it would be sending requests to the server to update those values. Now, if we are offline, of course, that's not going to work. But with background sync, we can queue up those changes. So we can still click on these items, and mark them that they are changed. And so whenever we go back online, then the requests will be sent to the server to update those items. So it allows us to make changes offline, and then syncs that information however we need it to. So that is what background sync is for. Now, because we are essentially going to be marking items as changed, that means that we need to keep track of that state, and we need storage to do that. Now of course, we have local storage available to us, but local storage is not asynchronous, so there is the possibility of locking up threads if we use local storage. But IndexedDB is not, it is asynchronous, and it's perfect for our needs. And we can use it however we need to. I mean, if we needed to use it like a full blown database, we could. Of course, we would be limited, as far as storage is concerned. But using this little library here, it's called idb-keyval, we can essentially use indexDB as if it were something like local storage. So it's just a key value storage, except that it's a little more robust. We don't have to store everything as a string here, so this makes life for us a little bit easier. So we will be using this library. And there are many distributions. So if we were going to use this in an application and use it as part of our build process, we would want to install it through NPM, or something like that. However, since we are doing primarily everything to the browser, we are going to be using this distribution right here, this immediately invoked function distribution. And so we will need to take the contents of this file, and then add that to our project, which I have already done. So just copy that, create a new file in vendor.js, and then paste that in, and then you'll be good to go. So for the remainder of this lesson, let's get our application working, so that whenever we click on the items, we are going to change the value of complete. And we will also have the beginnings of our offline experience as well. So the first thing we need to do though is add that IndexedDB to our HTML. So let's just go ahead and do that. And we will also need to cash it as well, so we can go ahead and add that to our ServiceWorker. Now, for the remainder of this lesson, we aren't going to really spend any time in our ServiceWorker. So all we will do here is just add it to our cache. So let's open up the ServiceWorker, and after our alpine, we will add /assets/vendor/js/, and then the keyval file. So there we go, we're done with this ServiceWorker for now. Okay, so let's open up index.html once again, and let's open up our app.js file. And we are going to add a method after init, and we're gonna call this toggleComplete. And we will get the task that we are going to be working with. So the first thing that we should do is get the new value for complete. So let's just call this newVal, and we will reverse the value of the tasks complete property there. And let's do a check to see if we are not offline. And if not, then we will simply set the complete to the newVal, so that should work. So now we just need to add this toggle complete to the click event whenever we click on the div that is our card, essentially. So let's put the class on a new line. And we will add a click event handler to where we call toggle complete, and we pass in the task. So let's go to the browser. Let's do a hard refresh here. And whenever we click, there we go. We are toggling complete. There's nothing hard there. So now let's try to keep track of what items we want to change when we are offline. And what I want to do if we are offline, then we won't change complete. We'll just keep track of the tasks that will be updated, but we will change the background to something, other than complete. So something like warning, or something. So let's go back to our app.js, and we're going to add an array called marked. So we are marking these things for update, so that if we are offline, then we want to either add the task to mark, or we want to remove it, based upon if we are not marking it. So let's first of all get the index of the task. So we'll use indexOf, we'll pass in task. And if the index > -1, then that means we want to remove it from marked, because we had previously added it. So we will just simply use the splice method, pass in index. We went to take out just that one item, and we're good to go. Otherwise, if we are adding it to our marked, then we will just push it in, and that should work. So now we can go back to our HTML, and we can modify our class binding here, so that we will add the bg-warning class if the task is in a marked. So if marked.indexOf(task) > -1, then apply the bg-warning. That ought to work. So let's do another hard refresh. Okay, we didn't break anything. And let's go offline. So if we click on any one of these, that's great. We just marked that first item. And if we click it again, we unmarked it. So good, we have our offline, and our online experience ready to go. So that in the next lesson, we can store that information in IndexedDB, and send the request if there are changes to be made.

Back to the top