I am trying to send data stored in local storage with Service Worker when I'm back online. If possible do not use IndexedDB.
I have read on several occasions that the local storage does not work with the Service Worker, therefore I cannot recover the data to send it once the internet recognition is done. Is this correct? How can I test my solution? I am a little lost (and new to React).
Thanks !
You're correct, the Service Worker context doesn't have access to localStorage. Therefore, if in your React code you save something into localStorage, the Service Worker cannot access it.
There are two different approaches to the question of "how to handle HTTP POSTs initiated when the user was offline":
Without Service Worker, in your application (React) code. In your code before doing the POST to the server, just check navigator.onLine. If it's true, then the user is online and you can make the POST. If it's false, then either hold on to the POST request (or the contents, the data, the body) in a variable and so or save it to localStorage; add an event listener for online event and make the POST when the event listener fires. This approach doesn't have anything to do with Service Workers. All the logic is in your application code.
With Service Workers. Write your application code without any checks for navigator.onLine, it doesn't need to care about that at all. Do your POSTs whenever they actually happen (when user submits a form etc.). Now, in a Service Worker, attach a listener for network events and save them in IndexedDB or Cache for later use if the connection is offline. When online again, fire the requests from the Service Worker.
The approaches implement the logic in different places. First has it all in the app logic. The second makes it transparent to the app and instead handles everything in the SW. There's really no right way to do this, it all depends on the needs of your application. In both cases you should probably show the user some sort of a notification in the UI telling what's happening.
For Service Worker approach there's Workbox Background Sync which you could use, more about it here: https://developers.google.com/web/tools/workbox/modules/workbox-background-sync
It's also worth noting that in the first approach the POST is not send to the server if the user closes the browser/leaves the application. In the SW approach, it is possible to use the SW and background sync to retry the request after the connection comes back online even if the user has closed the browser/application.
