Mastering Progressive Web Apps with Angular: A Comprehensive Guide
Published: 2024-04-27 20:05:05



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ifu1912pe2j95ba97ic.jpeg)

Progressive Web Apps are web applications that work seemlessly and provide the same user experience independent of user device and network that leverage modern web capabilities to deliver an app-like experience to users. Key features of PWAs include:

1. **Reliability**: PWAs load instantly and remain functional even in uncertain network conditions, thanks to service workers that cache essential resources.
    
2. **Speed**: PWAs are designed to be fast and responsive, providing a smooth user experience, especially on mobile devices.
    
3. **Engagement**: PWAs can be installed on users’ devices and offer features such as push notifications, making them highly engaging.
    
4. **Responsiveness**: PWAs adapt seamlessly to various screen sizes and devices, ensuring a consistent experience across platforms
    

We would be leveraging **Service Workers** and convert our angular application into a Progressive Web App (**PWA**).

### Table of Contents

· [What are Service Workers?](#25aa)  
· [Getting Started with Progressive Web Apps](#c414)  
 ∘ [Setting up your Angular Application](#c0a8)  
 ∘ [Adding PWA Support :](#31f3)  
 ∘ [Building the App for Production](#c602)  
· [Understanding Manifest & Customisation :](#beea)  
 ∘ [Manifest File Properties](#0085)  
· [Configuring Service Worker Behavior](#87ca)  
 ∘ [installMode](#c0d8)  
 ∘ [updateMode](#1b4f)  
 ∘ [resources](#29b7)  
· [Elevating Experience with Notification Badges](#e9c8)  
· [Conclusion](#f67c)

### What are Service Workers?

Service worker is a script that runs in the background of a web application, separate from the main browser thread. It acts as a programmable network proxy, intercepting and handling network requests made by the web application.

Some key functionalities of service workers are :

1. Background Processing: Service workers run in the background, independent of the main browser thread. This allows them to perform tasks such as intercepting network requests, caching responses, and handling push notifications without affecting the user interface or responsiveness of the web application.
    
2. Network Interception: Service workers can intercept and handle network requests made by the web application, enabling advanced caching strategies and offline capabilities. By intercepting requests, service workers can serve cached responses or dynamically generate responses based on custom logic.
    
3. Caching: One of the primary uses of service workers is caching web resources such as HTML, CSS, JavaScript, images, and API responses. By caching resources locally, service workers enable PWAs to function offline or with limited network connectivity, providing users with a reliable experience regardless of their network status.
    
4. Push Notifications: Service workers can receive push notifications from a server and display them to the user, even when the web application is not actively open in the browser. This allows PWAs to engage users with timely updates, notifications, and alerts, similar to native mobile applications.
    
5. Background Sync: Service workers can perform background synchronization tasks, allowing the web application to sync data with a server even when the browser tab is closed or the device is offline. This enables features such as offline form submission, automatic data synchronization, and background updates.
    
6. Security: Service workers run in a separate context from the web page, which provides enhanced security and mitigates the risk of malicious attacks. However, it’s essential to implement proper security measures to prevent unauthorized access and ensure the integrity of service worker scripts.
    

### Getting Started with Progressive Web Apps

#### 1\. Setting up your Angular Application

First, create an angular application, you can do so using the following command.

```plaintext
ng new app_name
```

This creates and initializes a new angular application.

To demonstrate we have a Weather App which shows the current weather of the place you want.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/olecvej6y2o3hzb76bi9.png)

Before we go ahead, if we head over to the network panel(Inspect Tools) and go offline.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dxk46puhiolemk038aqb.png)

Going Offline

Our page looks like this :


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ctwyr3boof2w1hg4w8kd.png)

#### 2\. Adding PWA Support :

Run the following command in the terminal.

```plaintext
ng add @angular/pwa
```

This command will install the necessary dependencies and set up the project for Progressive Web App development.

> In case you are adding it to your existing application and are facing **dynamic import error** update your cli version to latest minor version.

> eg. Update you application to latest stable version of angular i.e 15.1.4 -&gt; 15.2.11  
> You can use the use the following command for your case

> ng update @angular/cli@15 @angular/cli@15

Let’s take a look at all the changes made by the above command.

* It adds **@angular/service-worker** package in package.json.
    
* It creates an ngsw-config.json file at the root of the project and updates the build configuration in angular.json, which is a service worker configuration. This file defines the behavior of the Angular service worker, including caching strategies, asset groups, and routes to cache.
    


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vqmjyaf57emesqzr1upi.png)

ngsw-config.json

* Updates the angular.json with assets( manifest ) and ngswConfig path.
    


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7vbsfqv4nn2hugszi4tk.png)

* It creates manifest.webmanifest in the src folder which contains all the information about the application to run natively.
    


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sy44bq664kfbwjrnq3g3.png)

* It adds service worker in the app.module.
    


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uc6efs0bpn3gizo8ebhv.png)

* It also includes a Meta tag for theming and manifest file in the head element of index.html.
    


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2em3pzpa2lsk8tra3rgr.png)

#### 3\. Building the App for Production

Build your app using the following command :

```plaintext
ng build
```

We will now run the application to check our newly added functionality, to do so we will be installing an external web server as angular-cli (ng-serve) does not work with service workers.

```plaintext
npm i -g -d http-server
```

This will add http-server as a development dependency & also install globally to use the command http-server. You can also use angular-http-server.

Next, run the following command :

```plaintext
http-server -p 8081 -c-1 dist/weather-app
```

here -p signifies the port and -c signifies the cache-time (in seconds) for cache-control max-age header, e.g. `-c10` for 10 seconds. To disable caching, we are using `-c-1` which indicates how long a resource can be served from the cache after it’s been downloaded.

Our app is now available at localhost:8081.

Now if you go offline using the network panel as before your app will be working as expected and you will not be working and you will not be getting the offline page as before. 🎉

Once you load you will be able to notice the following


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/276zu7jje5227wcv1dzf.png)

You can click on install and our app will be available natively.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0p9z8iwzec476omjtfjx.png)

If you would notice our app is also available in the below URLs as well


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n7mwvd8n7l5k0p1o6yud.png)

However if you try those you will not be getting Install options, that is because PWA requires a secure connection and need can be served from localhost or HTTPS


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/431y078wmw5yi0gwtzb2.png)

If you head over to the application tab in your inspect tools you can see the registered service workers and cached data.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zcc05y9bajro06dqb84f.png)

With this, we have successfully upgraded our app to a Progressive Web App 🚀and can be installed natively and also works offline🌐.

Now let’s delve deeper to understand the configuration and customize the app.

### Understanding Manifest & Customisation :

A manifest file (`manifest.webmanifest`) is a JSON file that provides metadata about a Progressive Web App (PWA) and enables installation capabilities on supported devices.

#### Manifest File Properties

The following properties are commonly found in a manifest file:

* name: The name of the application.
    
* short\_name: A short name for the application (displayed on the home screen).
    
* start\_url: The URL where the application should start when launched.
    
* display: Defines how the application should be displayed (e.g., `standalone`, `fullscreen`, `minimal-ui`).
    
* theme\_color: The color of the application’s theme.
    
* background\_color: The background color of the splash screen.
    
* icons: An array of icon objects representing different sizes of icons for the application.
    

In our case, we had the following configuration:

```plaintext
{
  "name": "Weather",
  "short_name": "Weather",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "./",
  "start_url": "./",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "maskable any"
    },
    ...
  ]
}
```

If we notice our app title bar after the installation was blue ie we had specified our theme\_color as **#1976d2.**

To enable navigation buttons at the top we can update the display key to `browser`or `minimal-ui`

Now if you re-build your app you can see the navigation button appear on the title bar.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cdb1oqipcf6koeh15om7.png)

You can review all these details in inspect tools of your application.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vx9p4ovpcqn0zswceidy.png)

### Configuring Service Worker Behavior

The `ngsw-config.json` file is located in the `root` directory of your Angular project. This file defines the behavior of the Angular service worker, including caching strategies, asset groups, and routes to cache.

```plaintext
{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
        ]
      }
    }
  ]
}
```

Here each property signifies the following :

* The `index` property specifies the entry point of the application.
    
* The `assetGroups` array defines groups of assets to be cached. In this case, there are two groups: "app" for application files (HTML, CSS, JS), and "assets" for static assets (images, fonts).
    
* Each asset group has properties such as `installMode`, `updateMode`, and `resources` to configure caching behavior.
    

**Asset groups** are used to configure caching behavior in Angular service workers.

#### `installMode`

The `installMode` property specifies how resources in an asset group should be installed or cached by the service worker. There are three possible values for `installMode`:

1. prefetch: Resources are fetched and cached in the background as soon as they are encountered by the service worker. This mode is suitable for resources that are likely to be used in the future but are not immediately required.
    
2. lazy: Resources are only fetched and cached when they are requested by the application. This mode defers resource caching until they are needed, which can reduce the initial load time of the application.
    
3. eager: Resources are fetched and cached immediately during the installation phase of the service worker. This mode ensures that essential resources are available offline as soon as the service worker is activated.
    

#### `updateMode`

The `updateMode` property specifies how resources in an asset group should be updated or refreshed by the service worker. There are three possible values for `updateMode`:

1. prefetch: Resources are fetched and cached in the background, and updates are checked periodically. If updates are available, the new versions of resources are fetched and cached asynchronously.
    
2. lazy: Resources are only updated when they are requested by the application. This mode defers update checks until resources are needed, which can reduce network usage and improve performance.
    
3. eager: Resources are updated immediately during the installation phase of the service worker. This mode ensures that the latest versions of resources are available offline as soon as the service worker is activated.
    

#### `resources`

The `resources` property specifies the resources that belong to an asset group and should be cached by the service worker. Resources can be defined using glob patterns or specific URLs.

### Elevating Experience with Notification Badges

To add notification badges in Progressive Web Apps (PWAs) built with Angular, you can utilize the Badging API, which allows you to display badges on the app icon to inform users about new content or notifications waiting. Here’s how you can implement notification badges in Angular PWAs:

* Check Browser Support: Before using the Badging API, ensure that the browser engine your Angular PWA runs on supports the Badging API. You can check for support using JavaScript:
    

```plaintext
if (navigator.setAppBadge) {
    // Badging API is supported
    console.log("The Badging API is supported!");
}
```

* Displaying the Badge: To set a badge on the app icon, you can use the `navigator.setAppBadge()` method. You can display an empty badge or a badge with a number. Here's an example:
    

```plaintext
// Display an empty badge
navigator.setAppBadge();
// Display a number in the badge
navigator.setAppBadge(42);
```

* Handling Badge Updates: The `setAppBadge()` function returns a Promise, allowing you to manage when the badge is added and catch any potential errors. Here's an example:
    

```plaintext
navigator.setAppBadge(42).then(() => {
    console.log("The badge was added");
}).catch(e => {
    console.error("Error displaying the badge", e);
});
```

* Clearing the Badge: To remove the badge from the app icon, you can use the `navigator.clearAppBadge()` method. Here's how you can clear the badge:
    

```plaintext
navigator.clearAppBadge();
```

---

### Conclusion

Diving into the realm of Progressive Web Apps (PWAs) with Angular offers a myriad of benefits, including enhanced reliability, speed, engagement, and responsiveness across various devices and network conditions. Leveraging the power of service workers, we’ve explored how they serve as programmable network proxies, enabling advanced caching strategies, offline capabilities, push notifications, background synchronization, and enhanced security.

Through a step-by-step guide, we’ve learned how to set up an Angular application, integrate PWA support, and configure service worker behavior to optimize caching and asset management. By understanding the significance of manifest files and customizations, we’ve enhanced the user experience and accessibility of our PWA.

As we’ve witnessed the seamless transition from a traditional web app to a PWA, we’ve embraced the future of web development, where applications can be installed natively, work offline, and deliver an immersive user experience akin to native mobile apps. Armed with these insights and practical knowledge, we’re equipped to embark on further exploration and customization, driving innovation and excellence in our Angular PWAs.

If you liked it so far, give it some claps 👏

Congratulations 🎉, You have won an exclusive preview of the above weather app [here](https://weather-6ce0a.web.app/).