Right place for response parsing in PWA?

Question

I am building a magazine on top of a website. For this I am querying the public pages, and parsing the html content into JSON.

Now, the simplest thing is to parse the html on the webpage/client.

However with large payload my client will be busy for multiple frames, which is not desirable effect for a PWA.

I am also using service workers. Is service worker the right place to do the parsing instead or just a web worker?

If parsing is done by webpage, should the SW cache html texts?

Answer 1

I'm not sure if the service or web workers is the right place to do the parsing. What can I give you is the difference between the two:

Service workers

• is a background service that handles network requests. Ideal for dealing with offline situations and background syncs or push notifications. Cannot directly interact with the DOM. Communication must go through the Service Worker’s postMessage method.

It is also perfect for creating offline-first web apps. They let you interact with the server when you can (to fetch new data from the server, or push updated info back to the server), so your app can work regardless of your user’s connectivity.

Web workers

• mimics multithreading, allowing intensive scripts to be run in the background so they do not block other scripts from running. Ideal for keeping your UI responsive while also performing processor-intensive functions. Cannot directly interact with the DOM. Communication must go through the Web Worker’s postMessage method.

It is perfect for any web app that has intense functions to perform. They let you push the intense functions into a background thread so your main JS can keep on rocking, like maybe setting up event listeners and other UI interactions. Then, when the intense functions are done, they report back with their results, letting the main JS update the web app.

For more information, check these links:

• The difference between Service Workers, Web Workers and WebSockets

• What's the difference between "service workers" and "web workers" in JavaScript?

• Service Workers: an Introduction