Building PWAs with Angular

Progressive Web Apps (PWAs) are far more than just web applications; they’re the next evolution in web technology. Combining the best of web and mobile applications, PWAs provide an unparalleled user experience, even in less-than-ideal network conditions. But what makes them truly compelling is their graceful degradation — while they harness the full power of modern browsers, they also ensure a seamless, core experience in older browsers.

In this chapter, we dive deep into the world of PWAs through the lens of Angular. Angular has built-in PWA support that makes it an ideal candidate for crafting resilient and performant web applications. You’ll learn how to make your apps installable, capable, fast, and reliable building them as progressive web apps. The following are the recipes we’re going to cover in this chapter:

• Converting an existing Angular app into a PWA with the Angular CLI
• Modifying the theme color...

Technical requirements

For the recipes in this chapter, ensure your setup is complete as per the 'Technical Requirements' in the 'Angular-Cookbook-2E' GitHub repository. For setup details, visit: https://github.com/PacktPublishing/Angular-Cookbook-2E/tree/main/docs/technical-requirements.md. The starter code for this chapter is located at https://github.com/PacktPublishing/Angular-Cookbook-2E/tree/main/start/apps/chapter13.

Converting an existing Angular app into a PWA with the Angular CLI

A PWA comprises several intriguing components, with two standout features being the service worker and the web manifest file. The service worker plays a vital role in caching static resources and handling caching requests.

Meanwhile, the web manifest file holds essential information such as app icons and the app’s theme color. In this guide, we’ll transform an existing Angular application into a PWA. These principles are also applicable if you were to start a new Angular app from scratch. Throughout this walkthrough, we’ll convert an existing Angular app, highlighting the changes made and showcasing the transformation process using the @angular/pwa package. This package not only enables PWA functionality but also facilitates effective static resource caching.

Getting ready

The app that we are going to work with resides in start/apps/chapter13/ng-pwa-conversion inside the cloned repository...

Modifying the theme color for your PWA

In the previous recipe, we learned how to convert an Angular app into a PWA. When we do so, the @angular/pwa package creates the web app manifest file with the default theme color, as shown in Figure 13.9. However, almost every web app has its own branding and style. If you want to theme your PWA’s title bar according to your branding, this is the recipe for you. We’ll learn how to modify the web app manifest file to customize the PWA’s theme color.

Getting ready

The app that we are going to work with resides in start/apps/chapter13/ng-pwa-theme-color inside the cloned repository:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the cloned code repository folder, and run the following command (from the workspace’s root folder) to serve the project in production mode:

   npm run serve:static chapter13 ng-pwa-theme-color 5300
   

   This should open the app...

Using dark mode in your PWA

In the modern age of devices and applications, the preferences of end users have evolved a bit as well. With the increased usage of screens and devices, health is a major concern. Almost all screen devices now support dark mode. Considering this fact, if you’re building a web app, you might want to provide dark mode support for it. If it is a PWA that presents itself as a native app, the responsibility is much greater. In this recipe, you’ll learn how to provide dark mode for your Angular PWA. You’ll learn three different ways to implement styles for dark mode, including prefers-color-scheme (which is the default/native CSS way) and two ways to implement it with Tailwind CSS.

Getting ready

The app that we are going to work with resides in start/apps/chapter13/ng-pwa-dark-mode inside the cloned repository:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the cloned code repository...

Providing a custom installable experience in your PWA

We know that PWAs are installable. This means they can be installed on your devices like a native application. However, when you first open the app in the browser, it totally depends on the browser as to how it shows the Install option; it varies from browser to browser. It also It also might not be clearly visible or clearly visible. Also, you might want to show the Install prompt at some special point in the app instead of the app launch, Consider displaying the Install prompt at a specific, user-friendly point within the app, rather than right at the app’s launch, as this can be perceived as annoying by some users. Luckily, we have a way to provide our own custom dialog/prompt for the installation option for our PWAs. And that is what we’ll learn about in this recipe.

Getting ready

The app that we are going to work with resides in start/apps/chapter13/ng-pwa-cust-installation inside the cloned repository...

Precaching requests using an Angular service worker

With the addition of service workers in our previous recipes, we’ve seen that they already cache the assets and serve them using the service worker if we go into Offline mode. But what about network requests? If the user goes offline and refreshes the application right now, the network requests fail because they’re not cached with the service worker. This results in a broken offline user experience. In this recipe, we’ll configure the service worker to precache network requests, so the app works fluently in Offline mode as well.

Getting ready

The app that we are going to work with resides in start/apps/chapter13/ng-pwa-precaching inside the cloned repository:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the cloned code repository folder, and run the following command (from the workspace’s root folder) to serve the project in production mode: ...

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:

1. Open the code repository in your code editor.
2. Open the...