caching app shell in a React PWA with Server-Side rendering

Question

So lets say you have a React-based mobile web app, that takes advantage of server-side rendering for the initial view ( for speed + SEO reasons ). There is no "index.html" file - the index file is dynamically built server-side and returned in the initial response.

Now lets say you want to add PWA functionality to that app. You hook up a service worker to cache assets, etc.

One of the core tenants of PWA's is that they provide an offline experience. Say we just want to show a refresh page, "You're offline, click here to refresh", when the service worker detects the user is offline.

Online examples provided by google talk about using an App Shell -- a static HTML file, which can be cached by the service worker on initial visit, and which will be the "shell" your react app lives inside. This shell ties in to showing an "offline" view.

How does this work with server-side rendering, where there is no "shell" html file, and each route can potentially return a different index.html file?

Any demos or examples of this functionality in the wild?

Answer 1

Any demos or examples of this functionality in the wild?

Yes!

Take a look at https://github.com/GoogleChrome/sw-precache/tree/master/app-shell-demo, which uses the dynamicUrlToDepndencies option in sw-precache to define which underlying resources are used to server-render the App Shell HTML.

The service worker it generates will take care of updating the App Shell HTML whenever any of the resources it depends on changes.

In this model the service worker will return the same App Shell HTML document for all navigation requests, so it assumes that the App Shell HTML is generic enough to then be populated at runtime with the dynamic content that's associated with the actual URL via your standard client-side routing logic.