-1

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.

Iconoclastic Philosophy
  • 3
  • 2

1 Answers1

0

"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.

pate
  • 4,937
  • 1
  • 19
  • 25
  • Can you offer some suggestions on how to best achieve points 3 and 4? – Iconoclastic Philosophy May 31 '19 at 11:10
  • @IconoclasticPhilosophy usually you do that with some JS front-end framework. You write JavaScript code that fetches content from your API. Then, with that data (content) from the API, the "dynamic part" or the "content part" of the app shell architecture application is rendered/populated. Does this help you? I'm not sure how to better put it. – pate May 31 '19 at 16:35