Develop a PWA (Progressive Web App) With Angular😇
Published: 2021-03-21 12:31:37

In this article, We'll see how to develop progressive web app with angular.

#### What is PWA ? 

Progressive Web Apps **[(PWA)](https://web.dev/progressive-web-apps/)** are built and enhanced with modern APIs to deliver enhanced *capabilities, reliability, and installability* while reaching anyone, anywhere, on any device with a single codebase.

#### Let's Create Angular App.

Creates a new workspace and an initial Angular application by using bellow command,

> ###### ng new [project name]


#### Making your Angular app a PWA.

To make your angular app as a PWA, use the below CLI command ,

>  `ng add @angular/pwa`

 It takes care of configuring your app, it will set up a,

- service worker,
- web manifest,
- Enables service worker support for angular CLI ,
- Creates the service worker configuration file.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k056xdhcve6x4ks12cps.png)

 and add a tag at *index.html* to show some content when the JavaScript code from your app hasn’t loaded (probably either because the user has a very slow connection or because their browser can’t run Angular).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j016vsyuyrphymmox7pj.png)

`service-worker` is get added as dependencies in package.json.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t4pyxg4qreygkt7b18vq.png)

Now, look at the `angular.json` file `Service worker` is enable for production mode.

**Web Manifest:**
The web app manifest is a simple JSON file that informs the browser about your web app and how it should behave when installed on the user's mobile device or desktop.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyhngqgbp8ck2qhe6kmj.png)

`manifest` JSON file comes with some mandatory and optional properties,

- **name:** When the browser launches the splash screen, it will be the name displayed on the screen.

- **short_name:** It will be the name displayed underneath your app shortcut on the home screen.

- **start_url:** It will be the page shown to the user when your app is open.

- **display:** It tells the browser how to display the app. They are several modes like minimal-ui, fullscreen, browser etc.
Here, we use the standalone mode to hide everything related to the browser.

- **background_color:** When the browser launches the splash screen, it will be the background of the screen.

- **theme_color:** It will be the background color of the status bar when we open the app.

- **icons:** When the browser launches the splash screen, it will be the icon displayed on the screen.

**Angular Service Worker build configuration:**
The CLI has also added a new configuration file called `ngsw-config.json`, which configures the Angular Service Worker runtime behavior and specifies which files and data URLs  should cache and how it should update the cached files and data.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qq7vbsbkx5qcxvumw40w.png)

- **assetGroups:** 
This field contains an array of asset groups, each of which defines a set of asset resources and the policy by which they are cached.
When the ServiceWorker handles a request, it checks asset groups in the order in which they appear in `ngsw-config.json`. The first asset group that matches the requested resource handles the request.
Checkout to know more about [ngsw congifuration](https://angular.io/guide/service-worker-config).

**Service Worker registration:**
Service Worker Module automatically registered into the application root module with the help of angular CLI. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1443i95hh33rka6kjd5n.png)
With this update, we have now transformed our regular angular app to a PWA.

Let's build the project in production mode,

> `ng build --prod`

**Serving with http-server:**
- If you go to the `Application` tab of the developer tools on any browsers you will see a service worker running, but with an error message. That’s because `ng serve` doesn’t work well with service workers, and it’s necessary to build your app and run through a server to make it work.
- You can use any HTTP server, One easy way of doing this is to use the [http-server](https://www.npmjs.com/package/http-server) npm pack.
- To Install http-server globally, use bellow command,

> `npm install  -g http-server`

- To serve the directory containing your web files with http-server, run the following command,

> `http-server -p 8080 -c-1 dist/<project-name>`

- You can access your web app at `http://127.0.0.1:8080`😎.

*Checkout to see the code on [GitHub]
(https://github.com/Krishna7852/Angular-Multi-App/tree/main/projects/angular-pwa)*


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ky7exjoz60z0ymvve9zx.gif)