PWA Tutorial for Beginners #26 - Offline Data

Key Takeaways

so now we have a real time listener set up to listen for database changes whether those be added types or removed types now to begin with when the app first loads in the page or is reloaded and when the listener is first set up on every page load the existing Doc's in the collection are sent to us as doc changes and we take the data from those changes and we output them to the DOM and thereafter any new document added is going to send us a change to the app our callback function is gonna fire and it's going to call this function right here render recipe and output that document to the Dom so far though there's no off wire behavior if we were to take the app offline then we cannot access the data so how do we tackle this well we don't want to cache the responses in our cache using the service worker this is not the best way to deal with offline data because if we do it this way we might constantly be serving old data from our cache so if we don't cache the data this way then how do we show it when we're offline so modern browsers also come with another inbuilt tool called indexed DB which is basically a database within a browser and when we initially online and we get data from a database we can actually store that data if we want to in this indexed DB so that then if we go offline in the future it doesn't matter that we can't reach the data from the database because we stored it locally in the browser and we can still get it and show it on the page and that's pretty cool right that's allowing goes offline data now what if we try to add some new data for example in our case if we wanted to add a new recipe while we're offline well we could create that new recipe and then when we make the request to save it to the database it would pass through into index DB and be stored there first of all obviously it can't go any further because there's no internet connection but when the internet connection does come back we could take that data and push it back up to the database so that we're keeping it in sync with what we have over here and likewise if anything over here was added while we were offline it be synched back to indexdb and the application so that's what we're gonna do but firestore is going to make this very very simple forest if we used a different technology or a different database then we would probably have to manually implement this and communicate with indexdb directly however by using firestore it all comes built into the library they take care of all the heavy lifting forests so firestore in the background hooks up with indexed DB and it syncs all of our data in this with the firestore database so that when were offline we can still access all of that data and then when we come back online it automatically syncs in the background for us so this is really cool now all we have to do is one little bit of code to enable this functionality using the firebase firestore database so we'll jump back to the code now and do that alright then so let's implement this offline data behavior so I've gone to DB j s this is where we're going to do it and I'll put a little comment at the top to say offline data and then we're going to take our database reference right there DB and we'll use a method on this called enable persistence and persistence just stands for data persistence we're persisting the data offline so that method enable persistence I always spell this incorrectly ok that looks good now this is an asynchronous task and we can catch any errors if they occur right because there might be a couple of cases where an error occurs the first case is if we have multiple tabs open now this is only going to work in one tab that's open so we're going to catch any error first of all I'll say catch like so and then inside we'll do a function with that error object a callback function and inside that function I'm going to do a little live check to see what the error code is and we'll say if the error code because we get a code property on this error object from firebase and if that is equal to failed - precondition and that precondition is that multiple tab are open then we'll just console dot log will say persistence failed so / can I spell this nope persistence failed like so and I'll just do a little comment here to see what's going on it's probably multiple tabs open at once ok now also there could be another error code so I'll do else if and inside here we're going to say error code again is equal to 1 implements it and that means basically the browser is not going to support it then what we want to do is console log again and we'll say persistence is not available ok then and we'll do a little comment here as well to say lack of browser support ok so then now we have this method in place and what this is going to do is say ok fire store I want you to handle all of this offline behavior now it's over to you and I want you to sync on my data with this indexed DB and keep it in sync with my actual database so that we can view the data offline but also if we change the data from the app while we're offline when we come back online I want you to sync it back up to the database so push up any new data and bring down any new data that's been added or removed from the database while we've been offline that's what this is doing for us now so then before we test this and in fact I'm gonna save it first but then I'm gonna go over here back to the Service Worker because remember we commented out all of this stuff over here now I'm gonna allow that's a run again so let's comment or rather uncommon all of this but what I'm gonna do is delete that and I'm gonna do a check to make sure that we're not going to run this code if the requests that we're making is to the Google API to get some data because I don't want to cache any kind of data response so I'm going to make sure that the request right here doesn't include a certain API URL okay so let's do that I'm going to say if and then inside brackets I'll say EVT dot request and then we want the URL and dot index off now what we're looking for is any part of the URL that says firestore google api's com so let's write that in here fire store google api is calm because anything with this in it is basically making a request to the firestore database and we don't want to cache any response from this so we're only going to run this code if this is equal to -1 meaning this is not in the request URL does that make sense okay so if that is triple equal to -1 then we can run this code because we can be safe then that this is not inside or rather this is not inside the request and it's not data so let me now close off that if bracket and save it okay cool so then now let's go over here and it says DB enable okay we've spent persistence wrong I told you I could never spell that it's a persistent it's not persistent or however I spelt it save it and come over to the application because we need to skip waiting over here so the new serviceworker becomes active first of all then i'm going to refresh and first of all you're going to see that we don't see any recipes so what's going on there's no error here so let me go to the cache I'm going to go to the application and okay we can see all of these real-time listeners right here this is what I didn't want to happen I didn't want to cache these things but obviously before we activated the serviceworker they were cached so let me go through these and just delete them all so let me select this one delete delete' again all these firestore ones right here we don't need to delete these because these are just references to the libraries themselves so now if we refresh over here we shouldn't now be cashing those responses so let me she have to refresh okay cool and now we see these things right here so this is working and if we also look inside indexdb we can see this thing right here now and we can see inside that that we have all of this other stuff inside so this is basically keeping our data available inside this indexeddb database the browser database so that if we go offline we can still access it so let me demo that now I'm going to go to service workers and then press offline and I'm going to refresh over here now you'll notice that we don't actually see the data and we get some errors so let's have a look at those I think what's happening is because we've updated one of these files we need to recut it and for that to happen we need to go to our service worker and we need to update the cache over here psych dynamic 2v2 to catch that update and then let's also say site static v3 just to catch any static asset updates as well in case we made any I don't think we did but either way let's do this and then let's go back online and refresh and now if we go to the application over here skip waiting and refresh again well let's make sure we have those new caches down here ok v2 and v3 so now if we go offline so network offline I'm going to refresh again and now we get it ok so now we can see this data right here ok so that's really nice and we're still able to get this data right here even though we're offline now you'll be noticing all of these different requests are failing that's because in the background fire store is still trying to get the data from the actual database right now it's obviously not going to work because we're offline but these are normal errors so don't worry too much about those now either way now we have offline data or right here