Service Workers - Integrating a Database

This is the ninth video in the Understanding Service Worker series.
This video focuses on how you can integrated an indexed DB with your website and your Service Worker. This lets you read data from the web page and give control over saving, deleting and updating your database to your Service Worker.
Code from Video: gist.github.co...
Full Service Worker video playlist: • Service Workers - Regi...
Full IndexedDB video playlist: • Simple Introduction to...

[@blokche_dev]

IndexedDB and service worker altogether. The big picture. There's a lot to cover in the topic of PWA. Thanks a lot for this, Steve! 👍

[@wallurisatya6986]

awesome tutorial series and voice which helps us concentrate on the tutorial.
I have learnt a lot apart from service workers. I did not even know promise.resolve existed. Now i am digging the mdn docs, thanks to you.

[@justavian]

This was wonderful. Thank you so much for sharing this. This makes getting up and running so much easier, and i always understand better when i have a reasonable starting point. You have great content.

[@atulsinghrajput9932]

Salute to your dedication ❤️👏

[@senseicodes]

Thanks Steve. Great work and dedication as always. This videos will help someone in the near future 🔥🔥🔥🔥

[@sangramsingha11]

that was the best tutorial on indexdb.. all the best

[@vjself]

Thanks!

[@0xSxVKaJnwQ]

How did the author open the database from the service worker? Why am I encountering the error 'window is not defined'?
const request = indexedDB.open('todosDB');

[@SteveGriffith-Prof3ssorSt3v3]

In a service worker the parent object is self. In your web page scripts window is the parent object.
In service worker, window doesn't exist.
So window.indexedDB.open works in the page script.
But self.indexedDB.open works in the service worker.
In both cases you can omit the parent object.

[@m12652]

Excellent, thanks :) have you done something on syncing back to the server after being off line? Conflict checking and the like….

[@SteveGriffith-Prof3ssorSt3v3]

Nothing on syncing or background sync yet

[@m12652]

@@SteveGriffith-Prof3ssorSt3v3 no worries, from previous experience I’d say the easiest option is to check a ‘lastUpdate’ stamp from the last read to current value (I.e. getting back on line), if != then present the clashes to the user and let them sort it out… else, simply overwrite etc. Thanks again for the great videos

[@fsbgaming1588]

awesome content as always. quick question : is there benefit to pass from form to sw then to indexedb 1st instead just make it direct to indexedb?

[@SteveGriffith-Prof3ssorSt3v3]

Anything you do in the service worker can be shared with all connected tabs. Beyond that it's a design design.

[@user-ti6yk5hv7q]

@@SteveGriffith-Prof3ssorSt3v3 We do not get a separate thread in sw? I thought to use sw to separate operations with data from main thread to get perfomance on big amount of data. Can it be the case?

[@KingKzTuts2000]

hi Steve, I wanted to ask you how IDB works when you set network as offline. I had my IDB setup and stores data but when I set the network to offline in developer settings, the IDB is blank. When I set it back to online, the data is back. What is this issue, that I'm dealing with, can you please help?

[@SteveGriffith-Prof3ssorSt3v3]

indexedDB should work fine when online or offline. Since the data is local it can be retrieved in either case.
There are issues with a number of features that are connected to service workers when you are in private browsing mode (incognito) but online/ offline does not create these problems.
This is why IndexedDB works with Progressive Web Apps and Service workers, because they work when offline.
There is something else in your code happening when you switch to offline that is preventing your script from running.

[@KingKzTuts2000]

@@SteveGriffith-Prof3ssorSt3v3 I haven’t used service worker for IDB, is that needed for it to be shown offline. It’s just that when I turn it offline, the data doesn’t show in the developer tools but when I turn it back online it shows up again. My code just sets up IDB and then stores the OSM data and then reads the database to render the information on the html web page.

[@SteveGriffith-Prof3ssorSt3v3]

@KingKzTuts2000 idb works with or without service workers and online or offline.
It sounds like your other code is causing the problem

[@BeatBustersDance]

Hi Steve, I am working on a video call applicatiion where we record the screen and upload it to S3 whenever user stops sharing But I want to make that video to be uploaded after the call is end. So I am storing the blob data in Indexed DB. How could I upload them to server after usel close the tab. Is it possible to do so using service worker?

[@SteveGriffith-Prof3ssorSt3v3]

IndexedDB has limited storage capacity, especially if you are saving a video.
Uploading has to be started before you close the tab, regardless of whether the upload is started from the page or the service worker.
You can look at the Background Sync API to help you with that though - developer.mozilla.org/en-US/docs/Web/API/Background_Synchronization_API

[@MMH94MMH]

does this works offline too?,

[@SteveGriffith-Prof3ssorSt3v3]

Yes. As long as the browser is running a page from the correct origin.
Service workers are how PWAs are able to work offline.