Fully Offline Feature in Progressive Web App (PWA)

Suriya G
Suriya G
Sep 1, 2018 · 2 min read

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.

Work flow of Offline feature

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.

Example URL switch before and after Service-Worker registration

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. :)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade