Creating an App Shell for your PWA

When it comes to building fast user experiences for web apps, one of the major challenges is minimizing the critical rendering path. This includes loading the most critical resources for the target page, parsing and executing JavaScript, and so on. With an App Shell, we have the ability to render a page, or a portion of the app, at build time rather than runtime. This means the user will see the pre-rendered content initially, until JavaScript and Angular kick in. This means the browser doesn't have to work and wait a while for the first meaningful paint. In this recipe, you'll create an App Shell for an Angular PWA.

Getting ready

The project that we are going to work with resides in chapter13/start_here/pwa-app-shell inside the cloned repository:

1. Open the project in Visual Studio Code.
2. Open the terminal and run npm install to install the dependencies of the project.
3. Once done, run ng serve -o.

   This should open a...