Storing Form Data in IndexDB

[00:00:00]
>> Kyle Simpson: There's one last thing I wanna walk you through doing, and that is just one little final piece of polish on the user experience. If I come to slash login, and I log into this
>> Kyle Simpson: Application, if I have been typing out a really awesome blog post,
>> Kyle Simpson: And I've written out this whole long blog post, and then something happens and I go offline.

[00:00:42]
And I go to click this Add Post button, and all I get is an error like you're down. Well then, I'm like shoot, I gotta save this somewhere because I'm worried if I go away I'm gonna lose all this. So I'm copying this into my own text editor to try to save it, and then I'm gonna try to remember to come back later and post this or whatever.

[00:01:03]
This is a perfect opportunity where, again, I'm doing it for blog posting, but this would be more like for a comment section on a blog, for example. It's a perfect opportunity where what we could be doing is trying to help out the user. So what I have in this final revision, and this is the version of the code you have in your solution file.

[00:01:22]
What I have in this final revision is that under the covers, as I change the input box and the blog post text, I'm saving that data to IndexedDB. So it's being saved in an offline safe way in the background of this website. And I can access IndexedDB from both places.

[00:01:42]
I can access it from the page, which is what I'm doing here, and I can also access it in the service worker. So what I'm doing is that if I have saved this information and I click Add Post, I can now tell hey, you're not online. So I'm gonna give you a friendlier message that says you seem to be offline, currently.

[00:02:01]
Please try posting once you come back online. But even if I go away, I go away from the page or I close the tab entirely, if I come back to that page, guess what's still there?
>> Kyle Simpson: My content was saved in an offline form, and then restored because this hasn't been posted yet.

[00:02:24]
Now, let's say later I get off the airplane and I'm back online, and now I can see I'm online, and I'm like click Add Post. Well now, I want for that IndexedDB to get cleared out. So when I click the Add Post, once the service worker detects that it was successfully sent to the server, the service worker clears out the IndexedDB because now we're done with that content.

[00:02:49]
So I click Add Post. And now, if I come back to Add Post it's been cleared out.
>> Kyle Simpson: So just real quickly, we'll take a look at how that code is working in our service worker. Let's look at that side first. In our service worker, in our router,

[00:03:12]
>> Kyle Simpson: Down here at the bottom. Specifically here, I have some handling to clear the offline backup of a successful post. So if the request URL was API Add Post, and I know that it was successful, then I'm gonna call this library which I've loaded in, gives you a promise interface for IndexedDB, and I'm gonna delete the post backup that was created.

[00:03:42]
>> Kyle Simpson: I mean, I meant to say there's other reasons for you to wanna access your IndexDB. You might wanna actually get that content and send it. So we talked about, remember, background sync. If that API was running here in the background, and then at some point it detected that we were online, it could grab it out of IndexDBand send it off to the server for me without me even having to reload the page to put it back in.

[00:04:08]
And then, of course, we would wanna delete it. All right, so let's look at the Add Post page.
>> Kyle Simpson: Basically, all I really need to do is listen for the change event on those input in text area boxes. And when I get called, I'm just gonna set an object in memory that holds the current value of those things.

[00:04:31]
So every time those are changed, I'm gonna save that data into there. You could actually do it on every key stroke if you really wanted to be aggressive about the saving of it. But here, I'm just doing it whenever you unfocus from it and it's been changed. By the way, I exposed the function in my blog that let's me know from the Add Post whether I'm online.

[00:04:52]
It just exposes that Boolean variable, and that's when I give you this special message that says you seem to be offline currently.