Building an App Shell For My Service Worker to cache using Handlebars

Question

I am building a PWA using express-handlebars. I'm trying to follow the Google design practices and build an app shell in order to cache with a service worker. However, I'm a little stumped since Handlebars is a template engine which generates html. Is there a better way to build an app shell with express for service worker caching? Examples would be appreciated.

Answer 1

"Is there a better way" depends on many variables in your project and there's really no answer to that.

More important here is to understand the basic idea of an app shell, in my opinion at least. When you grok that you'll be able to tune your variables and pick the right tech freely. Generating HTML with Handlebars is completely fine if it suits your app. HTML is fast for the browser to render (vs JS heavy stuff) so it fits the shell idea perfectly.

With app shell your app is structured in the not constantly changing, static(ish) layout (menu, header, footer etc.) and dynamic part. With this separation the app shell idea can use Service Workers this way:

1. Server ships the app shell (usually only HTML/CSS)
2. Browser renders that very fast and caches it for offline use via Service Worker
3. After showing the shell, JS takes over and starts to fetch dynamic content (what is shown "inside" the shell)
4. Browser renders the dynamic part utilising some JS framework (usually)

These separate parts could be very loosely-coupled. You could use whatever means you want to create the app shell and something completely different for the dynamic part. Or, you could implement them with the same front-end framework. It doesn't really matter from the point of view of the app shell architecture. The point is, the shell should be available super-fast which you'll achieve more easily when you ship just HTML/CSS.