Build Progressive Web Apps (PWA) with Angular 9/8 Tutorial and Example
Throughout this tutorial, we'll be learning to build an Angular 9 PWA (Progressive Web Application).
A PWA provides a native-mobile-like expereince for web apps.
PWAs can be installable in your mobile and desktop web browsers without going through app stores for Windows, Android or Apple.
Initializing a PWA with Angular 9 CLI
Let's now see how to build our Angular 9 PWA by example.
We need to have Node,js and NPM installed on our development machine before getting started.
Next, open a command-line interface and run the following command:
npm install -g @angular/cli
Next, initialize a new Angular 9 project using the following command:
ng new angular-9-pwa-example
Adding PWA Features to your App
Turning your Angular 9 app to a PWA is very easy using Angular CLI.
Navigate in your project's folder using the following commands:
Next, run the following command to automatically add PWA features:
ng add @angular/pwa
The command, adds:
- A manifest file named
manifest.webmanifestfor PWA information,
ngsw-config.jsonfile for configuring the service worker,
- default incons with many sizes in the
assets/iconsdirectory which you may change later,
- A service worker using the
index.html file is also updated with the following content:
<link rel="manifest" href="manifest.webmanifest"> <meta name="theme-color" content="#1976d2">
Thanks to these updates, your Angular 9 app is a full-featured PWA.
Finally, you need to audit your PWA using Google's Lighthouse by installing the extension.
We have seen by example how build an Angular 9 PWA with an example.
Hands-on Angular eBook
Subscribe to our Angular newsletter and get our hands-on Angular book for free!
Most Popular PostsAnguar 12 New Features 10+ Best Anguar 9/10 Templates for Developers 3+ Ways to Add Bootstrap 4 to Angular 10/9 With Example & Tutorial Angular 11 CRUD REST API Angular 11 Tutorial with HttpClient Routing and Navigation with Angular 11 Router Full Vue 3 Tutorial by Example CSS Centering CSS Grid Layout Tutorial Adding Comments to JSON How to Delete Local/Remote Git Branches Webpack Tutorial for Angular Developers GraphQL Tutorial for Angular Developers Git and GitHub for Angular Developers Bootstrap 5 with Sass and Gulp 4 Tutorial by Example