Before starting the tutorial, let’s understand What is a Progressive Web App (PWA)?

Progressive Web Apps are web apps that use emerging web browser APIs and features along with traditional progressive enhancement strategy to bring native app-like user experience to cross-platform web applications like a mobile, tablet, desktop.

To make the same PWA as the native apps, we have to fulfill the following requirements:-

  • Runs on almost every device desktop, mobile, tablet.
  • The service worker keeps it always updated.
  • Content is considered to be safe due to serving through https.
  • It doesn’t require to be downloaded and can easily be shared via a simple link (URL).
  • Similar UX by engaging the same interaction methodology as a native app has.
  • Fully installable on users’ mobile home screen, and the good thing is we do not have to visit the play store or app store.
  • Keeps you up to date via push notifications and offers you the latest updates, promotion offers, etc.

Now when we do have a piece of good knowledge about a PWA, let’s get started and make

your first PWA.

Configuring and Installing Angular Application

First, make sure that you have the latest version of Node.js and NPM installed on your system.

If not,  download the latest version of node.js and npm.

Now, we are going to install the latest version of Angular CLI on your system. Open your terminal and write the following piece of command:

npm install -g @angular/cli@latest

-g is used to install it globally so that we can run it from anywhere.

Now let’s install a pre-built angular app or you can say the starter pack.

Run the following command to install an Angular app:

ng new angular-pwa

(angular-pwa is the folder name)

Get inside the project directory i.e., angular-pwa and open your code editor (VS CODE in my case)

cd angular-pwa
code .   // to open it in vs code

After opening it in vs code you can find the following folder hierarchy:


Now to run the default page of angular run the following command:

cd src/
ng serve

Now open your browser and go to localhost:4200 to see the default angular page.

Here we will use the Angular Material Design library to theme our app.

Open the integrated terminal of the editor and add the following command to add the angular material:

ng add @angular/material

Next, create a file inside the app folder and name it material.module.ts for managing the material components in an organized way.

Add the following code inside material.module.ts

import { NgModule } from '@angular/core';
import { MatTableModule } from '@angular/material/table';
import { MatToolbarModule } from '@angular/material/toolbar';
@NgModule({
   imports: [
       MatTableModule,
       MatToolbarModule
   ],
   exports: [

      MatTableModule,
       MatToolbarModule
   ]
})

export class MaterialModule { }

MatTableModule is used for the material Table and MatToolbarModule is used for the navigation bar or you can say the toolbar. But here we won’t be using it for toolbar purposes, but just for giving a heading.

Now open app.module.ts and import MaterialModule, HttpClientModule in the following manner:-

import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

/* angular material */
import { BrowserAnimationsModule } from'@angular/platform-browser/animations';
import { MaterialModule } from './material.module';
import { NgModule} from '@angular/core';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: []
})

Here we have imported another module named HttpClientModule. So what is it and is it required?

HttpClientModule is a service module provided by Angular that allows us to perform HTTP requests and easily manipulate those requests and their responses.

Now its time to generate a service, where we will write the logic to fetch the data from a Restful API.

Here we will be using an API by https://jsonplaceholder.typicode.com/ which provides various kinds of APIs for testing purposes like posts, comments, photos, users, todos, etc. But here we will be using /users for our demo purpose

Run the following command to create service:-

ng g s services/rest-api

Now go to services/rest-api.service.ts and add the following code:-

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';

export interface User {
  id: string;
  name: string;
  email: string;
  website: string;
}

@Injectable({
  providedIn: 'root'
})

export class RestApiService {
  api: string = "https://jsonplaceholder.typicode.com/users";

  constructor(private http: HttpClient) { }

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>(this.api)
  }
}

Here we are fetching data from jsonplaceholder API using HttpClient service as an Observable.

Next, We will render the above-fetched data into our main page. Here we will be using Angular’s Material table. Open the app/app.component.ts file and add the following code:-

import { Component } from '@angular/core';
import { RestApiService } from './rest-api.service';
import { MatTableDataSource } from '@angular/material';

export interface TableElement {
  id: string;
  name: string;
  email: string;
  website: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  Data: TableElement[];
  col: string[] = ['id', 'name', 'email', 'website'];
  dataSource = new MatTableDataSource<TableElement>(this.Data);
 
  constructor(private restApiService: RestApiService) {
    this.restApiService.getUsers().subscribe((res) => {
      this.dataSource = new MatTableDataSource<TableElement>(res);
         
})
  }

Next, we will build the app’s UI. Open app.component.html and add the following code. We can use a normal table like what we generally use in HTML, but here we are gonna use the Material table.

<mat-toolbar color="accent" class="header">
  <span>Angular PWA Example</span>
</mat-toolbar>

<table mat-table [dataSource]="dataSource" matSort>
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> ID. </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <ng-container matColumnDef="email">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Email </th>
    <td mat-cell *matCellDef="let element"> {{element.email}} </td>
  </ng-container>

  <ng-container matColumnDef="website">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Website </th>
    <td mat-cell *matCellDef="let element"> {{element.website}} </td>
  </ng-container>

  <tr mat-header-row *matH

ng add @angular/pwa

ng add @angular/pwaeaderRowDef="col"></tr>
  <tr mat-row *matRowDef="let row; columns: col;"></tr>
</table>

Execute the following commands to run your angular app:-

ng serve

If everything goes right, you will see the following page:-

Now that we have created our angular app, let’s convert it into a Progressive Web App.

You must be thinking, we will have to write several lines of code to convert it into a progressive web. Let me tell you it is very easy to convert an existing angular application into a Progressive Web App (PWA). The following command will make your life easy:-

ng add @angular/pwa

The above command will automatically add PWA files to your angular app.

Now, all we have to do is build the app. But before building it let’s install http-server package from npm.

sudo npm i -g http-server

http-server is a simple, zero-configuration command-line http server. It is powerful enough for production usage, but it's simple and hackable enough to be used for testing, local development, and learning

Run the following command to build our app for production:-

ng build --prod

Now we have the production build ready. Navigate to the dist folder which is created now

cd dist/angular-pwa

Run the following command to start the prod build:-

http-server -o

The above command will open the angular app on the following URL

http://127.0.0.1:8080

So finally, our PWA is ready.

Install lighthouse chrome extension and navigate to the developer’s tool and audit the app, you can see the app is turned into a PWA.

You can test it by yourself. When you run http-server it will provide another IP address, by entering it on your mobile phone you can see the web app. Then all you have to do is go to the hamburger menu of the chrome and click on add to home screen and then you can access the web app just like any android app.

The app will look like this-

The full code of this tutorial is given in my github repo : https://github.com/aniketmitra2107/my-first-angular-pwa.git

I hope this not so short article will give you a start to your @angular journey.

Wish you all the best for your future.

./logout