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, executing JavaScript, and so on. With an App Shell, we can render a page, or a portion of the app, at build time rather than runtime. This means the user will see the minimal pre-rendered content initially, until JavaScript and Angular kick in. This means the browser does not have to work and wait a while for the first meaningful paint. This not only provides a good user experience but also helps rank the website higher in search engines, i.e., results in better SEO. In this recipe, you will create an App Shell for an Angular PWA.
Getting ready
The app that we are going to work with resides in start/apps/chapter13/ng-pwa-app-shell inside the cloned repository:
- Open the code repository in your code editor.
- Open the...
