How to cache HTML page in React SSR with Workbox

Question

I am trying to use Workbox to integrate service workers in my web app. However, i am not really sure as to how to cache the index.html file which is right now dynamically generated at the server end. I am using workbox-webpack-plugin with the below configuration.

const {GenerateSW, InjectManifest} = require('workbox-webpack-plugin')
plugins: [
    new GenerateSW(),
    new InjectManifest({
            swSrc: './public/service-worker.js',
            include: [/\.html$/, /\.js$/, /\.svg$/, /\.css$/, /\.png$/, /\.ico$/]
        })
  ]

I am able to successfully register the service worker and cache my JS bundles. However, i am not sure whats the best practice to cache the index.html which is generated at the server end.

Answer 1

Twitter Lite is one famous example of building PWA (and also using React). You can read this article on "How we built Twitter Lite" "Progressive loading" section of this article is the solution to your problem.

Application caching can be done for both static and dynamic content based on PWA recommendation by Google. Read on Cache API and IndexDB here. Workbox is just a helper built on top of these APIs and so the principle is same.

Dynamic content types for caching - Said that we can cache dynamic/Server generated data in PWA, it can be of two types. JSON/XML content which you get from web service calls and cache in IndexDB or cache it as a HTML file which is server generated(server side rendering).

Your use case is caching server side rendered page -index.html. While you can keep it simple by pre-caching it as a one single file using workbox and then show the same as soon as the user opens the application and then have your service worker re-pull the new HTML, it may not give great user experience when the page fully reloads.. think if user have scrolled down and reading the pre loaded content. It might be suddenly gone when the new index.html is reloaded and causes confusion to the user.

Twitter Lite Use case - As explained in the linked article, they have broken the landing page(which you can compare to your index.html) into multiple modules. Keep the shell separate. Like Notification, title bar, Menu , side nav etc. Content block in the page should further broken down as stream of Tweets. So when the user opens the app, it just loads the pre-cached landing page modules including cached tweets and then gets new tweets for the user as pre-rendered html pages and inject in to the DOM. So if the user is reading on some old tweet, which is pre-cached, that experience is not disturbed.

Your use case? If you think your index.html is significantly different from the above use case, will be happy to break it down for PWA cache, if you list down the index.html components you have.