Check out a free preview of the full Progressive Web Applications and Offline course:
The "Background Sync Demo" Lesson is part of the full, Progressive Web Applications and Offline course featured in this preview video. Here's what you'd learn in this lesson:

Using a simple To Do list application, Steve demonstrates how a service worker is used to implement background sync.

Get Unlimited Access Now

Transcript from the "Background Sync Demo" Lesson

[00:00:00]
>> Steve Kinney: So let's take a look, and we'll go first to a good friend, Chrome, and I have another glitch ready for us. And so this one is called dream catcher. I'm good at naming things, I don't know if you all noticed that today.
>> Steve Kinney: .me, cool, and this, when it loads, is an application for me to keep track of my dreams.

[00:01:01]
>> Steve Kinney: And what we'll do is we'll add a new dream.
>> Steve Kinney: And we'll submit that in there.
>> Steve Kinney: And you see that I've added there, and everything works great. Let's go ahead and let's just imagine that I don't have connectivity. Seems like a legitimate thing. I can go ahead and refresh this page.

[00:01:40] All right, everything works great, works offline, as we've come to expect after our long hard two days of learning how to build offline apps. All right, so let's say what should my dream be?
>> Speaker 1: [INAUDIBLE]
>> Steve Kinney: That dream is gone.
>> Speaker 1: [LAUGH]
>> Steve Kinney: That dream is over. Don't get eaten by a spaghetti monster.

[00:02:08] And the way we've handled this is we've said okay, added, neat. It hasn't, right, cuz I turned off Wi-fi, that's not a thing. Let's actually turn it back on, cuz it takes a second, and we'll reconnect.
>> Steve Kinney: I can go ahead and refresh the page, or if you don't believe me to see it's not on the DOM, I can open up a new page

[00:02:38]
>> Steve Kinney: And there it is, right? We had a sync event that happened. As soon as the browser reconnected, it sent my sync event, we have it on the server, right? Let's go take a look at what this code looks like.
>> Steve Kinney: So here's our service worker.
>> Steve Kinney: Let's get all the screen real estate we deserve here.

[00:03:02]
>> Steve Kinney: And we cache the assets, as we have come to expect, we cache the stylesheet. We have just an instance of IndexedDB here, and some database abstractions of putting stuff in the database and taking it back out again, right, that is all prior art that we have seen earlier today.

[00:03:20] We will clear out previous caches when that's happened. When we fetch, we will see if we can get it from network. If not, we'll pull it from the cache. And if this looks like a lot, keep in mind that there are a lot of console logs in here.

[00:03:35] When a sync event happens, we'll go ahead and we'll get all of the dreams from Indexed.DB, right? We're gonna filter out the ones that have an unsynced = true property on them. And we'll use promise.all, and in this case it's a very simple server, we'll send a bunch of POST requests which each one of those dreams that have been unsynced to the server.

[00:03:58] If that is successful, we will update them in the database as they are now synced. Whenever we do have network connection, we are getting this source of truth again. If we do have a network connection and we can hit that, we're gonna pull them all in, so this will be everything from the server.

[00:04:15] A more robust mechanism, we might go ahead and try to dif between ones that are there and ones from the server, this is a very simple one. We'll take the server for granted if we have it, but as soon as we connect we'll send everything we have off to it.

[00:04:29] Looking at the client,
>> Steve Kinney: What I really want you to take away here is this is the original implementation that was online only. They would click the button, we would send a post request, and everything would work out great. This didn't work online. If we were offline it would just go and everything would end.

[00:04:49] But in this case we're actually not even initially sending a fetch request. What we're going to do is we're immediately going to schedule a sync event. All right, we'll say if there's a service worker, we'll go ahead and we'll pull out everything we need. We're gonna add it to the page immediately, cuz the single event hasn't really occurred yet.

[00:05:10] We're gonna optimistically assume that everything went well and is displayed in the user interface. In the same way that if I'm in a Twitter app and I hit the like button, it's like yeah, you did it, you did the thing. Mark hasn't found out that I liked his tweet yet, but as far as I'm concerned in my interaction with the application, I have done my deed and it has promised me that it will do it.

[00:05:30] And this is useful for things that aren't detrimental. If my like to Mark's tweet doesn't go through, I mean, he might be a little sad, he might be like that was a pretty dank name. And I hope that he thought that I enjoyed it, but it's not the end of the world.

[00:05:46] Instead we're scheduling a sync, we're immediately gonna put it on the page, and then we'll handle everything through this sync event. We'll just go through the database, we'll filter out all the ones that haven't been synced as soon as we reconnect, and we'll send them out, right? How you do this in your application is gonna change, right?

[00:06:03] It depends on what you're trying to implement, right? This is just a very simple illustration of how this works and that the API is actually approachable, right? If I told you hey, implement background sync and you had not seen this info, you'd be like that is difficult, I have no intention of doing it, I will use Firebase, thank you very much.

[00:06:23] Totally do it, there's a great Frontend Master's course on it. But if you wanna do it from the service worker and you have your own server, all these APIs are very approachable once you understand that there are common patterns. Right, hopefully it almost seems repetitive when we show you some of the, there is this event, you break stuff out.

[00:06:39] There are these common patterns that once you've kind of grasped, how do you do is when your application changes?