Application Shell Architecture

Introduction

Having an empty UI with the header and navigation bar only is a pretty pattern for Native apps.
Content will be retrieved asynchronous and gives the app the perception of speed while the user is still waiting for useful content. Usually accompanied by a loading spinner of some sort. Think of the Facebook app for instance.

Facebook App shell

Cache

With the power of Service Workers it's possible to provide the same experience on the web. A Service Worker can cache the UI shell of your website for repeat visits. The UI shell is the minimal HTML, CSS and JavaScript required to display the initial layout. Like a native app, this could be for instance the header and the footer without any dynamic content.

In this way, the site feels fast at startup while the contents are fetched and loaded using JavaScript.