Creating a Progressive Web Application with Angular

Progressive Web Applications (PWAs) are kind of the new hotness right now. Lots of chatter, but most probably can’t even spell PWA. 😉 PWAs are an attempt to create applications that live in the web browser and behave like real applications.

Let’s take our Angular HTTP Call example and make it into a PWA.

To make your angular site into a PWA is super simple. Just run the following Angular CLI command.

ng add @angular/pwa

Running the site using ng serve won’t run it with a service worker. To do that we are going to need to host the site inside of another web server. If you remember our previous project, we have a web service hosted in ASP.NET. We just need to get our build site copied into our ASP.NET site.

First, we must build our site.

ng build --prod

Now we need to move it to our ASP.NET site. But first, let’s do a quick check to make sure it is working correctly.

Http-server -p 8080 -c-1 dist/demo

That should have our application running in a browser.

Now let’s copy it to the wwwroot folder of our ASP.NET Site (you might have to create that folder).

We will need to make a small tweak to our existing ASP.NET Core application to add support for static files. This can be done by adding a single line of code into our startup.cs.

app.UseFileServer();

Now run the ASP.NET application and you have a working PWA with a .NET Core backend.

A quick side note on ports: The ASP.NET Core application will run on port 5001. The Angular application will make web calls on port 5001. This will allow the application to work.

Another note about that web calls: Since we are writing a PWA, we should probably do some sort of caching of those web calls. We will tackle that in a later blog post.

Source code is at https://github.com/chadmichel/AngularBlogPostSeries/tree/master/PWA.

If you get stuck or have any questions, hit me up on Twitter or respond in the comments below.