You could just imagine how deadly the combination of the two dominants, Progressive Web Apps (PWA) and Angular, would be! PWA is ruling the industry by giving an uninterrupted browsing experience of website cum mobile applications. The ease with which it runs in the background and operates even in the absence of internet connectivity is something that has left entrepreneurs in surprise. Additionally, PWA works perfectly anchored & responsive over desktop, mobile, tablet irrespective of the browser you choose.
Also, the PWA doesn’t require a mobile installation; it delivers a native-like app experience using the URLs. You can easily share the application using the URL. In other words, the speed and convenience of PWA will confirm your business’s growth.
If we were to talk about the advantages of each of them individually, we would literally write a blog. However, we are here to guide you through PWA with Angular development. When we built our first PWA with Angular, we were really curious and excited to see its performance. And we are sure, you too would be.
We just can’t wait to help you develop a PWA using Angular! In this guide, we will build a PWA with Angular 9. To start the project, you will need to confirm some prerequisites for development.
You will need Node.js stable version installed locally;
You will need to install the Lighthouse Chrome extension;
You need to ensure that you are using the latest version of Google Chrome Web Browser;
You can check your Node version by typing the following in the command line:
Further, you need to install Angular CLI:
npm i @angular/cli
Now, you need to name your project and create it using the following command.
ng new pwaexample
Add the following command into the command line to add Angular Material.
ng add @angular/material
You can either use the built-in Angular theme that is violet in color. And if not, you can go for a custom selection of themes.
Press “Y” for setting up HammerJS for gesture recognition and browser animations. After Angular Material import, you need to run,
and the following screen will appear by default.
Once this is done, the application is ready for production. To build a Progressive Web App in Angular, we need to ensure that it is built for production first.
You can type the following command for building an app for production:
ng build --prod
You can see the production build in the folder dist/pwaexample and use it over http-server.
If http-server is not installed, you can install it by typing the following command.
npm i -g http-server
You can check if it is running or not by typing the following command.
The browser opens automatically and it is navigated to http://127.0.0.1:8080. The journey to PWA using Angular is yet to begin. We still need to add PWA features into our Angular app.
The next step is to analyze the app in the Lighthouse.
If you are unaware of Lighthouse, let me tell you. It is an open-source analyzing tool developed by Google. You can check the performance of your website, SEO, and PWA features. You can add the URL of your website and run the audits in the Lighthouse. The generated report gives you suggestions about how you can improve upon your developed PWA using Angular. You can expect the highest score in Lighthouse to be 100%, but the PWA score may vary depending on the PWA features you implement.
You can open the Lighthouse by pressing F12 or Ctrl + Shift + I and then click the Audits tab. The following screen will appear on the screen.
As you can see in the image, you have to click on the mobile option to reproduce the mobile environment. Also, in the categories, you need to opt for the progressive web application option in order to check for the PWA performance. The next course of action should be preceded by clicking the Generate Report button.
The following type of report will be generated in the browser.
As you can see in the image, the application failed to process service workers, Progressive Enhancement, HTTPS, and Web App Manifest. Manifest contains all the JSON configuration that enables web applications to be saved on the user’s home screen. Manifest file should be in the src folder of the project.
Service Workers lay the foundation of PWAs. They are responsible to handle the intercept requests from the server when there is no data connection. It is the heartbeat of a PWA that ensures that the application runs under a secure connection.
All of these are vital for building a PWA with Angular. However, these files will not be added into the folder automatically unless we ask Angular to perform the activity.
Hence, after this, we would start including the PWA features. So how do you do this? Here is the solution.
PWA features implementation.
PWA features can be included in the application by typing the following command in the command line.
ng add @angular/pwa
This command will add the above-mentioned absent features into the application. To remind you, the added features are:
Service Worker ----ngsw-worker.js;
Also, icons are added in src/assets/icons folder.
However, you will find a Service Worker in modern browsers only. Service Workers can be used as a network proxy that will allow the application intercept network requests to cache assets and data. Service Workers are also used to execute other PWA features like offline support, push notifications, etc.
As you can see, the report shows two failed actions:
1. Does not register a service worker;
2. Does not respond with a 200 when offline;
This means that you will need to set up a service worker in order to pass the generated report. Also, when the application is offline, the Service Worker should return the locally cached file version.
After performing the above exercise, we will rebuild the app for production and also run it for Lighthouse. The rebuilding is done to ensure our application is hosted locally on the server. The newly generated report of our PWA with Angular will be,
Again, there are two failed actions,
- Does not provide a valid apple-touch-icon;
- Does not redirect HTTP traffic to HTTPS;
For clearing the latter, we will host the application and configure HTTP to HTTPS redirect. The use of HTTPS will confirm a pass report in the audit. However, when you host the application on an actual host, you will need an SSL certificate from various services. Now to fix the apple-touch-icon invalid type issue, you are simply required to add the following command in the index.html file into the <head> section.
This command will add a non-transparent apple icon of 192 px (or 180px) square size. You can check the PWA feature test by running it again.
Developing a PWA with Angular has a great scope in the market because it allows you to add PWA’s flexibility with the out-standing native-app like user experience of Angular. Even if you have unreliable network coverage, a PWA with Angular will function smoothly. A PWA built with Angular is lighter, robust and high-performing. As you can see, we started building an Angular application and gradually entered the PWA features into it.
We made use of Angular CLI and the Lighthouse to check if the PWA features are executed correctly. There are certain other things that you need to check manually rather than doing it using the Lighthouse. However, what is more important for you is to check that the PWA components are shareable and show high-performance.
If you have any queries, you can connect with our mobile app developers. You can also hire mobile app developers to execute your idea of PWA with Angular. We have hands-on experience in developing PWA with Flutter & Angular. We would be happy to assist you in every way possible.
Senior Principal Web Developer