Mastering the art of PWA + GraphQL with a simple Service Worker.

There was a time when the web era was just dependent on the continuous connectivity to Internet for the full fledged performance of web applications.

But change is the law of nature and so is the future. Therefore Web Applications has to evolve and is evolving by day and night.

So What are PWAs?

Progressive Web Apps are nothing, just websites that took all the right vitamins. It isn’t a new framework or technology. It is a set of best practices to make a web application function SMOOTHER AND TO WORK IN OFFLINE MODE.

OK let’s start with building a PWA-enabled web app.

Step 1 : Focusing on manifest.json file.

The web app manifest is a JSON file that tells the browser about your Progressive Web App and how it should behave when installed on the user’s device.It is always available in your project module(React/Angular). It must include your app’s name, url, icons, etc other, and bind it to index.html file. A basic example of such manifest file:

Step 2: Writing a custom service worker.

A service worker is a script that stands between your website and the network, giving you, among other things, the ability to intercept network requests and respond to them in different ways as well as cache them.

Why I have to write a custom sw.js?

Well service worker are pretty easy to write if you are fetching directly from REST APIs. But it starts to get a little complicated when GraphQL comes into the play. Since every GraphQL POST requests share the single API endpoint, Service Worker becomes unreliable as it won’t be able to tell which cached content to return purely based on the request URLs.

In my case, that was the whole scenario which motivated me to write a custom sw.js.

So I used IndexedDB as a integral part to store the requests and their respective responses by MD5 hashing and storing as key-val pair where key became the requested URL (which is unique for every GraphQL request query made if you’re on one particular route)and response become the value and cache storage to cache all the secondary assets.

Here’s the link to GitHub code : https://github.com/ashutosh2205x/pwa-sw-graphql

I will brief the code in 3 phases :

1. Installing and activating service worker.

The precache() is the function which returns the caching of pre-requisite array of assets.

2. Intercepting the network for caching responses.

This step is very critical. The query must be send to the server first, clone the graphql response asynchronously and then returned to the web app.

3. Adding a fallback method if network response not detected.

The Serivce worker automatically detects the network requirement and serves the purpose of returning the cached responses and assets via navigator.onLine method.

Bonus points:

1. self.skipWaiting():

Each time the app is refreshed, the new service worker broadcasts the message to skip the waiting phase and get installed in the device automatically, rather doing it manually.

2. Erasing the old version of cache by itself.

If you’re planning on updating the cache version of your web app, than this will help you out to erase the outdated cache and renew it.

I have developed a service worker for my organization called Twimbit.

And that’s all I had to share with the community.

Please feel free to ask any questions.

Github : https://github.com/ashutosh2205x/pwa-sw-graphql