Build Progressive Web App (PWA) with Angular

Tram Ho

In this article, we will use the most recent version of Angular (Angular 9) to build a simple Progressive Web Application (PWA). The application will retrieve user information and display it as a table, with paging.

What is PWA?

PWA (short for Progressive Web Apps) is a term to indicate the progressive method of software development. PWA uses the capabilities of a modern website to provide an experience as a native application to users

PWA has many outstanding features such as supporting web applications running offline and making web applications look like a native application by using a service worker, easily accessible to users with the function added to the main screen of the application. Web App Manifest, Push Notification … Many frameworks have integrated with PWAs such as Angular, React, Polymer, Ember …

Configure and install Angular

At this step, we will configure the Angular project for our demo. First, let’s start with installing the latest Angular CLI.

Now start installing the Angular application

Access to the folder containing the newly created application

Add the Angular Material library

Adding the Material library to Angular is really easy, you can complete it with just one command:

Add theme in src/styles.css

Usually, we will import the angular material’s compoents into the AppModule. But here is a little change, we will create a separate module file for component materials and import them into it. Then import this file into the main AppModule file.

This will make the management of material components more coherent and organized. We will display user data in angular material table. Create app/material.module.ts and add the following code:

Next, import MaterialModule into the app.module.ts file as shown below

Building REST API using HttpClient

In this step, we will create angular service to fetch data from remote server using REST API To use HTTP requests, you need to import and register the HttpClientModule service in the app.module.ts file.

Now the generate service step. With Angular, simply run the following command and the service will automatically be created:

Next, we will write the logic to retrieve user data using JSONPlaceholderAPI Open app/rest-api.service.ts and add the following content:

The above code will help us get user data by using the HttpClient service as a Observable from the getUsers() . Next, add the service to app/app.component.ts file as shown below.

So we have finished importing the RestApiService in the AppComponent to fetch user data. Now the step shows us the screen.

Here, we will build the UI of the app using the angular material table. Open the app.component.html file to create a layout that includes the navbar and a table with paging.

Add PWA to Angular

It is very easy to convert an existing angular application into a Progressive Web App (PWA). The “ng add angular pwa” command will make this possible

The above command line will automatically add PWA files and features to the Angular application

  • File manifest.webmanifest
  • ngsw-config.json service worker
  • Icons with various sizes in assets / icons folder

The “index.html” file will be added with meta tags and color theme properties as shown below

Service Workers in Angular

Service Worker is a script that works in the background and is suitable for most modern browsers.

Service Worker works with HTTPS and works the same way Web Workers do but has some disadvantages. Progressive Web Application considers service workers as core technology. It allows deep platform integration, like offline support, background synchronization, ample cache and push notifications.

The command “ng add angular pwa” is run and created ngsw-config.json . It is only responsible for service workers. At the same time, service workers have been automatically added to the app.module.ts file.

// app.module.ts

And this is ngsw-config.json file.

// ngsw-config.json

The “ng add angular pwa” command also automatically registers the service-worker in the package.json file:

// package.json

Configure Production with http-server

Install global http-server from NPM

http-server is very simple, easy to configure, often used for testing, local development or research purposes.

– http-server

To build the application for the production environment, run the following command

After running the command, you will have the build in the dist / angular-pwa folder. Next, we will run the angular PWA application using http-server

Go to the prod build directory

To run the build, execute the following command:

The above command will open the angular app under the link http://127.0.0.1:8080 and now you have a complete app build already.

Check out the PWA App with Lighthouse

We will verify the PWA application using the Lighthouse extension on Google Chrome. First, open the app in Chrome by visiting the link: http://127.0.0.1:8080

Install light house extension from chrome web store

Next, open the browser console using Ctrl + Shift + I, or open DevTools, go to the Audits tab. You should now see the results of configuring the application with PWA

summary

Finally, we have finished creating an Angular 9 PWA application. In summary, the article has mentioned some of the following issues:

  • How to convert existing angular application into PWA?
  • How to add PWA features to Angular applications?
  • How does it work with Service Workers?
  • How to test the PWA app with Google’s Lighthouse extension?

You can download the demo here .

Thank you for following the article. Hope it helps you guys.

Source: https://www.positronx.io/build-progressive-web-app-pwa-with-angular/

Share the news now

Source : Viblo