Fully Offline Feature in Progressive Web App (PWA)
As we are in modern web world still the offline features are loved by many. Once if its available for your web app then surely it will be a uncontrollable one.
Pre-requisites: Service-Worker
Earlier, I had gone through few of the Service-Worker related articles here. I am hardly searching for an idea to obtain the complete offline features for one of my web app.
Here the requirements are quite complicated, The app is not like all other simple, single page app it will handle complex data which may be larger (in some cases) than the actual cache size during the progress.
Decided few things, the app having both the combination of static and dynamic data. So,for the static data it will be stored in local storage. But, for the dynamic data some small database is needed on the particular machine in which the user going to use.
At the quick sketch, had a layout for the flow. I had explained the idea to few of my colleagues. Some how I had a gut feeling that it will full fill my app’s requirements.

Look into the service-worker, I loved the way it handle the requests. Since, It used local storage for the POST request using the “message” concepts (in many examples available in github). I tweaked that area and bypassing a way for the POST (xhr) requests instead of using cache memory.
Before, that a small node server was created to handle the POST requests. It reads the data and stored it into the database tables (In my case i am using sqlite3). Here, there is no deal with local storage for the POST, the data also secured in case of browser crash.
For this, The web app also required some changes. Once after the registration of Service-Worker need to change the POST url from actual one to localhost (pointing to node server). Reverse the same once during the process of un-registering service-worker.

Finally, once if the app back to online then read the data from the local database using the same node server and push it into the cloud. :)
