Building a Progressive Web App with Angular — Part 1
Tags: angular, pwa, javascript
Published: 2019-05-13 11:46:27

---
title: Building a Progressive Web App with Angular — Part 1
published: true
description: Angular tutorial on how to build a PWA
tags: Angular, PWA, JavaScript
series: Building a Progressive Web App with Angular
---

If you don’t know what Progressive Web Apps (PWA) are I hope this tutorial will give you an introduction to PWAs and also make you understand how they work and why it’s such a good idea to develop PWA applications.

I will be using the latest version of [Angular](https://angular.io) for the purpose of this tutorial.


##What is PWA?
A PWA is a web app that uses modern web development technologies to deliver app-like experience to users when they view your website on a mobile device.

##Why build a Progressive Web App?
A PWA app gives your website user features that were only available to native apps in the past. Here are some features that are available in a PWA application:

*Home screen icon
*Offline mode
*Web push notification
*and many more

Here is a [link](https://whatwebcando.today/) to a website that gives you a list of features that are currently available for PWA applications.

I hope this gives you a short and simple overview of PWA and why we should start looking at it. So let’s create our first PWA.

---

First let’s install Angular.

`npm install -g @angular/cli`

Once this is complete, we can make our new project

`ng new my-first-pwa --skip-tests --style scss`

If you are new to Angular CLI, here is the [documentation link](https://angular.io/cli). I recommend taking a look at it, since there is so much you can do now with the Angular CLI. Either way, here is a brief explanation of the commands used:

*`ng new` Creates a new Angular application
*`my-first-pwa` This is the application name, so feel free to change to whatever you want
*`--skip-tests` This command will skip the spec files
*`--style scss` This will make the style files extension to be scss.

You now have your Angular application. In order, to preview your application you need to run ng serve -o This will build your application and open it in a browser.

Here is what it should look like:

![alt text](https://thepracticaldev.s3.amazonaws.com/i/kr2sljewdkn47fqc6wid.png "Default App")

Now let’s make our application a PWA. Luckily for us Angular has made it easy to convert an Angular application into a PWA. All we need to do is install a package called `@angular/pwa` and this will add all the files and setup your application to be a PWA. So let’s do it!

`ng add @angular/pwa`

This should take only a few seconds. We can now test our application to see what changed.

First, we need to build our project

`ng build --prod`

Unfortunately `ng server` does not work with service workers, we will need to setup a HTTP server to test our service worker.

Run the following command to install http-server.

`npm install -g http-server`

Once completed, change the directory to your dist folder `cd dist/my-first-pwa` and `run http-server -p 8080`

Go to the following URL `http://127.0.0.1:8080` on your browser. You should see the default Angular application.

But how can I check to see if my PWA is working correctly? To do this, open your browser developer tool, click on network and check Offline.

![alt text](https://thepracticaldev.s3.amazonaws.com/i/65l5yl2x2i3inz2rhvq9.png "Enable Offline Mode")

Now refresh your browser. Notice that on the network tab all the files are being loaded from ServiceWorker, and your website loads with all the content and image. This means that all the resources are being loaded from the service worker’s cache. This is just one of the many benefits of PWAs.

![alt text](https://thepracticaldev.s3.amazonaws.com/i/nrjkztot4c10gozylboj.png "Cached Resources")

That is it! As you can see, Angular makes it really easy to create a new application and set it up to be a PWA. In the next tutorial I will show you how to configure Firebase so you can host your application, make changes to the application, notify the users of application updates and also update the service workers so that the correct files are loaded when the application is run next.

Here is a [link](https://github.com/enniob/1stpwatutorial) to my github repository with the tutorial files.