Technologies | May 18, 2023

Angular – Let’s create our own Progressive Web Application

In this article, I will show you how to create, configure and test out your own PWA by yourself – step by step – with the help of Angular.

Angular PWA

As the e-commerce market develops, the role and popularity of Progressive Web Applications is growing. The use of this technology makes it possible to create a fast-loading website that is easy on the eye. Additionally, you can also count on appreciation from Google’s indexing bots – in accordance with the “mobile first and offline first” policy.

A PWA (Progressive Web Application) is actually a website that, by configuring the service worker and the manifest.json file, provides us as developers with the possibilities we can use to create a more attractive website for the end user. PWA technology allows you to create an application that combines the advantages of a website and an app on your phone. In this short article, I will try to describe PWA configuration using Angular, which is very simple thanks to the native support in Angular CLI. However, the service worker configuration itself does not really restrict us to some JavaScript framework, like React or Angular. To start the configuration, you actually just need a web page with JavaScript.

PWA – Is it worth it?

More than half of Internet users in Poland browse websites using mobile devices, and having a responsive, fast-loading website defines the haves and have-nots in e-commerce nowadays. The use of Progressive Web Application technology makes Google’s indexing bots more favorably disposed toward such a site, and it also translates into tangible results – in some cases PWA managed to increase the conversion rate by 75% or reduce the rejection rate by about 40%.

PWA – Tools for the developer

There are numerous sites, such as, that provide support for developers. You can easily access the components through JavaScript and service workers. It is worth mentioning at this point that only Google Chrome on Android offers full component support. Unfortunately, Safari on iPhone will restrict us in some areas. Component support is changing so dynamically that it is not worth addressing the differences between browsers. In the first part of the article, I will try to explain how to fully configure and test out our application. In the next part, I will focus on other components such as offline mode, notifications, geolocation and file access.

Are you ready for the PWA adventure? Let’s get started!

Angular: PWA

We start by installing the Angular application via Angular CLI. Then we use the following command: ng add @angular/pwa

Angular PWA

This adds a few files required to run PWA to our folder:

ngsw-config.json – a configuration file that allows you to set up data caching rules. More information about caching strategies can be found here:

Angular PWA

We will focus on the configuration of this file in the next part of the article.

manifest.webmanifest – a configuration file that allows you to set the behavior of our application after being saved by the user (orientation, colors, icons).

Angular PWA

*.png – default icons that will be displayed to the user after saving the application on the screen desktop.

Additionally, the following files will be updated:

angular.json (the set ServiceWorker flag: true),

index.html – an added line to load the manifest,


Angular PWA

Thanks to this, our application knows that when we run it in development mode, the service worker should be registered to our browser.

How to check PWA operation?

Unfortunately, the mere launch of the application through Angular CLI will not allow us to check if the service worker is operating properly. However, we can easily find a workaround for this by running the application we built locally. This can easily be done in two steps.

  • We build the application in the development mode: ng build –prod
  • We run the http-server (if we do not have a locally installed one, the first thing we need to do is the following: npm i http-server -g) and then the following command: http-server ./dist/pwa-test -o

Please remember that after dist you have to enter your application name. After entering the command, our website should launch. To check if the service worker and the manifest work properly, we will use Google Chrome’s built-in tools. After launching Developers Tools, we go to the Application tab.

Angular PWA

In the Service Worker side menu, we should see information that our service worker has been found and is properly installed.

In the Manifest tab, we will find information about whether the default configuration (colors, icons and name) has been imported correctly.

Angular PWA

All this data is read from files that were generated by Angular CLI after the application had been built. They are located in the /dist/ApplicationName folder.

Angular PWA

Thanks to the positive upload of the manifest and the Service Worker, our application allows users to fully use the components on their mobile devices or computers.

So we have a PWA – What’s next?

Thanks to the default configuration, we can only save our application on a phone or computer. To do this, just click on the small “plus” icon next to the website address on your computer.

Angular PWA

The name and icon are uploaded from the manifest file.

After saving, our website will behave like an application and the user is not aware that they are launching the website in their browser. Once the application is launched (after saving), we should see a window which looks like this:

Angular PWA

As you can see in the picture, the whole top bar with the address, add-ons and bookmarks has disappeared. The user is not aware that the application has launched in their browser.

We managed to configure a startup application in Angular, so that it behaves just like a Progressive Web Application. A user who uses our website can only save it for now. In the next steps, we can add some code to our application to inform the user about new versions of our website or to enable its use offline. In future articles, I will expound on the topic of PWA by writing about how to add new features to our newly developed application.

nearshore 2023.02.16 cover

Expert knowledge

Is MongoDB the perfect database system for e-commerce?? Read the text!


Creating and configuring a PWA is not difficult. There has been a growing number of online articles concerning the capabilities of the technology that has already been nicknamed “the frontend revolution”. No wonder – a Progressive Web Application allows you to easily create a friendly and fast-loading website. For developers, this is a signal that, by using PWA technology, they can implement a solution that will bring tangible and measurable.

Find out more about our solutions and services!

Michal has been a Front-End software engineer for more than 10 years now, and for over 3 years cooperating with Inetum. Privately an enthusiast of board games and spontaneous travelling abroad.

Exclusive Content Awaits!

Dive deep into our special resources and insights. Subscribe to our newsletter now and stay ahead of the curve.

Information on the processing of personal data

Exclusive Content Awaits!

Dive deep into our special resources and insights. Subscribe to our newsletter now and stay ahead of the curve.

Information on the processing of personal data

Subscribe to our newsletter to unlock this file

Dive deep into our special resources and insights. Subscribe now and stay ahead of the curve – Exclusive Content Awaits

Information on the processing of personal data

Almost There!

We’ve sent a verification email to your address. Please click on the confirmation link inside to enjoy our latest updates.

If there is no message in your inbox within 5 minutes then also check your *spam* folder.

Already Part of the Crew!

Looks like you’re already subscribed to our newsletter. Stay tuned for the latest updates!

Oops, Something Went Wrong!

We encountered an unexpected error while processing your request. Please try again later or contact our support team for assistance.

    Get notified about new articles

    Be a part of something more than just newsletter

    I hereby agree that Inetum Polska Sp. z o.o. shall process my personal data (hereinafter ‘personal data’), such as: my full name, e-mail address, telephone number and Skype ID/name for commercial purposes.

    I hereby agree that Inetum Polska Sp. z o.o. shall process my personal data (hereinafter ‘personal data’), such as: my full name, e-mail address and telephone number for marketing purposes.

    Read more

    Just one click away!

    We've sent you an email containing a confirmation link. Please open your inbox and finalize your subscription there to receive your e-book copy.

    Note: If you don't see that email in your inbox shortly, check your spam folder.