To create an injectable service class, we use the syntax @Injectable . Inside it, we provide providedIn: 'root' to tell the Angular app that this service we are declaring is created by the app root injector.

The function getData() above uses HttpClient injected in the constructor as httpClient . It calls the get() method of HttpClient for sending an HTTP GET request to the JSON endpoint. Furthermore, it returns an observable that we are going to use in the next to subscribe to it.

Consuming the API Service

Open the file app.component.ts and import the ApiService as below.

As you can see, we are also importing the class interface Item from the api.service.ts file. Every component in Angular has a life-cycle. Angular creates and renders the component as well as creates and renders a child copmonent before removing it from DOM. ngOnInit and OnInit represent the life-cycle hook that handles the fetching of data from the API after the AppComponent is initialized.

fetchData() is the function that calls the getData() function, defined in the file api.service.ts . You will notice that since getData() returns an observable and further allows us to subscribe to whatever result it comes with inside fetchData() . Finally, we are assigning the data to an items array.

Building the UI

The purpose of this tutorial is to teach the concepts that lead to building a PWA using Angular. Since this is only a demo, I am going to keep it the UI simple. I am not going to use any third party UI library. However, you can make it look as awesome as you want or use a third-party library if you want to.

In the previous section we wrote the code for fetching the data from the API endpoint.

But how do we know that the data is being fetched?

You may have noticed that I added one console statement to see if we are getting the data. Open Chrome browser and make sure the npm start command is running from your terminal. Go to Developer Tools and go to Console tab. You can see here if there are any errors with data being fetched.

We only need a few fields as we defined in the class interface Items . However, the API endpoint gives all data fields that you can use to build a complete HackerNews app clone, complete with data!

Open up app.component.html add the following markup.

The incoming data from the JSON API endpoint is in an array of objects. To display the fields such as the title of each post and the URL of same, we are going to traverse the array using *ngFor* as the attribute to the unordered list element. I am also adding basic CSS styles so do add them inside app.component.css .

We only need one component file for our app since there is not much going in our app UI wise. If you take a look at the http://localhost:4200 you will see something similar.

Our demo app is ready, now all we need is to convert it into a Progressive Web Application.

Building the PWA

After building the web application when you start to convert it to a Progressive Web App, you will have to build for production. Most PWA features are not compatible in development mode. You cannot trigger the execution of service workers, caching, use HTTPS etc. To build our current Angular application for production we have to run the following command from the terminal.

This will create a dist/ng-pwa-demo/ directory in the root of our Angular project. We will use an npm tool like serve to the serve the content inside the dist folder without setting up the backend. Install this tool from npm.

Then traverse into dist/ng-pwa-demo/ from the terminal and type the below command.

From the web browser you can navigate to http:localhost:5000/ to see the result. Now let us first audit and see what is missing or what steps we need to take to convert this app into a PWA.

Go to the developer tools in the Chrome Browser and click on the Audits panel. First, choose Mobile instead of Desktop and then choose Progressive Web App option only. Uncheck everything else as we are going to run the audit only for a PWA. Lastly, hit the Run audits button. Once the process of auditing is complete, it will generate a report and showcase it to you like below.

Lighthouse performs various checks to validate different aspects of a Progressive Web App. These aspects and more details about each of them are mentioned at PWA Checklist. This guide not only covers the basics and details about the different PWA terminology but also offers a way to fix them.

We are getting an initial score of 46 and four of the audits are currently being passed. Our Angular app currently fails in 7 other audits related to no value of brand theme color provided, registration of a service worker, redirect from HTTP traffic to HTTPS, etc.

Angular CLI allows you to add PWA features to an existing application by running a simple command from the terminal described below.

This command automatically add basic configuration required for an angular app to turn into a PWA and starts by creating a new file called manifest.json , adding different sizes of icons as assets and registering a service worker inside the file called ngsw-config.json . After that, run the production build command again.

This command will register and include all the necessary files inside the dist directory. A manifest.json file looks like this:

This is how our latest dist directory looks like.

To change the icons or assets related to our PWA, you can always traverse to assets/icons folder in the src directory. After you have added your own app icons for the sizes mentioned inside the manifest.json file you can run the ng build command again.

The ngsw-worker.js file contains the service worker. To insert the service worker and let our angular app know about its existence is present and appended when we converted the command to turn our angular app into a PWA inside src/app/app.module.ts file.

Angular also installs two new dependencies which you can find inside the package.json .

The service worker is automatically enabled inside the file angular.json which contains the configuration information from the start, when we created this application. Also, inside dist/ng-pwa-demo/index.html file you will find two lines added.

The manifest attribute is linking the manifest.json and index.html . The theme color tells the browser to show which color such as in the address bar.

You see how much PWA configuration Angular CLI takes care of with just one command. Imagine, adding all that details manually in every file we have seen or mentioned in this section! I can say for myself, I will surely miss something or other until the next audit breaks or fails.

With that, now let us run another audit and see how far we have reached. This is the latest audit report I have generated.

11 audits are being passed! The only one which is failing right now is related to HTTPS. That is the reason our current score is 92. Once you host this app on deployment server such as Firebase which is secured by default since it uses HTTPS, you will be able to configure HTTPS and then all of the audits will pass.

You can find the complete code for this PWA demo at the Github repository below 👇

Building A Web Or Mobile App?

Crowdbotics is the fastest way to build, launch and scale an application.

Developer? Try out the Crowdbotics App Builder to quickly scaffold and deploy apps with a variety of popular frameworks.

Busy or non-technical? Join hundreds of happy teams building software with Crowdbotics PMs and expert developers. Scope timeline and cost with Crowdbotics Managed App Development for free.