Angular PWA — How to Install, Configure and Deploy It?

7 min readJun 28, 2021

We all know that Angular PWA helps to improve page load time. But it also provides native features. Some case studies reveal that Angular PWA improves overall engagement and conversion rates. In addition, it improves quality, performance, and overall user experience.

Before we start installing and configuring angular PWA, let us first know about PWA.

What is PWA (Progressive Web Applications)?

First of all, PWA’s full form is Progressive Web Apps. PWA helps developers to make web apps load quicker. Basically, PWA is an application that you can install on a computer to make an app-like experience. PWA has the latest web standards to authorize the installation of the app on a device. PWA is made using HTML, CSS, and Js. PWA provides a Native feature using browser API.

Recently Twitter released mobile.twitter.com as a PWA. It is made with React and Node.js. According to reports, tweets increased with the new PWA. You can read it here. If you are stuck in the problem, then be sure to look for angular development services for a faster and cost-friendly solution.

Now let’s start with the installation.

Requirements

Node.js local installation.
The current version of google chrome
A google account
A lighthouse chrome extension

Step 1: Create a new Angular Project

You can start creating it with CLI. During this process, angular generates test files. You can skill test file generation by adding — skip-tests flag. Now do enter into CLI like described below.

npx @angular/cli new ng-pwa — skip-tests

Generally, the user gets some prompt configuration options like below.

After this, it creates a new project directory ng-pwa.
Now, navigate to that directory by adding the below command.

Cd ng-pwa

Now, you have a project created. You can now make a web app manifest.

Step 2: Create a Web App Manifest

It gives a facility to the web app to get saved on the user’s home screen. Web app Manifest is a Jason file. It contains configurations. The configuration gives the ability to save the web app on the user’s home screen. Web app manifest is a basic need for PWA. Also, it is usable for any website.
Now, to create a web app manifest, it needs a new file manifest.json in src folder.

nano src/manifest.json

Now, add the content described below into the file src/manifest.json

In the web app manifest, you can define your name. It attaches to the home screen’s app icon. You can add short name if your name is too long. Start_url is the landing page of the app. theme_color is the color of the browser UI. background_color controls the colors of the background of the app. The display makes the browser UI hidden and visible.
Users visit sites with different screen sizes. So, you have to create icons according to different dimensions. You can add icons and images.
After adding image assets, go to index.html and add the content in the <head>

Angular does not add the web app manifest to the build folder automatically. You can add manifest.json to apps of the .angular-cli.json file.

Note: if your app is created using Angular 6 or newer versions, you have to edit angular.json file.

It looks like this.

Now let’s go to the next step. You have created manifest.json, edited index.html and angular-cli.json or angular.json.

Step 3: Add Service Workers

PWA doesn’t work without service workers. You can use JavaScript to write Service workers. It caches important files and assets that keep the app functioning during a network outage. It also intercepts requests and manages responses.

Now, we need to build our app with a webpack before production. The service worker must track and cache the files.
Let’s install the sw-precache-webpack-plugin npm package and configure it.
To auto-generate the service work, we should run a command in the build folder.
Run the npm install command from ng-pwa directory to install package.

npm install — save-dev sw-precache-webpack-plugin

Now, create a file precache-config.js

nano precache-config.js

Now add the below content in the file precache-config.js

Precache-config.js file configures the sw-precache-webpack-plugin.

Client-side URL routing is used by Angular as a front-end framework for single-page apps. So, it can make arbitrary URLs that auto-generated service workers do not cache. So, we have to assign an HTML entry that requests the URL mapped to. navigationFallback handles it. navigateFallbackWhitelist can be empty or contains a regex.

You have to create a custom npm script. It will be used to create an app. It also auto-generates the service worker file.
Now, go to package.json and add the below content.

You have installed the sw-precache-webpack-plugin, created precache-config.js and edited package.json, now; let’s move to the next step.

Step 4: Create the View

We have only a progressive view because we are building with only a single view. So let’s edit the app.component.html and add/replace the content below.

This code makes the image on the web page with text and three links. rel=”noopener attribute important in PWA if component’s target attribute is set to _blank for performance and security.

Edit the styles.css file and replace the code like below.

This code makes the background color teal. It arranges texts to the center and gives them a white color.

Step 5: Deploy Your App

PWA’s main component is the service worker. On the other hand, our app must be served through a secure connection for the service worker to function effectively. As a result, we’ll be deploying our app to Firebase, which will be accessible via a secure connection. You’ll deploy your app to Firebase in this phase.

Now, create your account on firebase.google.com. Create a new firebase project. After login, go to the console link. On the console page, select “create a project.” You will be prompted for a name and google analytics but ignore google analytics.
Now, click on the “create project” and wait for the process to complete.
Now, click on the continue. Now you will arrive on the dashboard. Go to the ‘’develop’’ section and hosting page.
Now in the CLI, run npm install to run firebase-tools.

npm install -g firebase-tools

The firebase-tools help to test run and deploy apps to Firebase. After completing the installation, you have to build an app in preparation.

Run the following command in the ng-pwa directory to create the angular app and auto-generate the service worker.

npm run pwa

Now, run the following command to login into the Firebase.

firebase login

You will be asked for the credentials so enter them. After authorization, enter the following command.

firebase init

Now, answer the questions like below.

Now, the app is ready for development. Enter the following command to deploy an app to Firebase.

firebase deploy

and

firebase open hosting: site

now it is done.

You can test with the Lighthouse chrome extension too.

To test with it, open your Google Chrome Web Browser, open the hosted app. Click on the Extensions button and choose Lighthouse. A window will display and prompt for “generate report.” You will see a screen like “waiting for lighthouse results.” After it completes the testing, you will see the results of the test.

How To Run an App Locally?

A PWA runs only on localhost and Https. The angular CLI is limited because it doesn’t work with the ng serve command. You have to make a build and host it. You can use http-server.

To create files under dist/angular-pwa, Run ng build –prod.
Now, go to the folder using cd dist/angular-pwa
Run http-server command npm i -g http-server
Open it

Conclusion

In this article, we have seen the whole configuration from installation to deployment and testing. PWAs provide users with an experience of native apps and PWAs are much lighter and flexible. Suppose you run into a problem or are working on a new project. In that case, you can Hire Top Angular Developers in India for a faster solution. Latitude technolabs have dedicated and experienced developers who are ready to make your imaginary idea a reality.