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. 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.

What is a PWA?

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.

Read also: Clean Architecture

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 https://whatwebcando.today/, 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!

Adding PWA to Angular

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: https://serviceworke.rs/caching-strategies.html

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).

PWA Angular

*.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,

app.module.ts

Angular screen 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.

  1. We build the application in the development mode: ng build –prod
  2. 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 screen

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.

Summary

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 results.

Author:
Michał Wójcik

He has been a Front-End developer for 10 years now, and for 2 years cooperating with JCommerce. Privately an enthusiast of board games and spontaneous travelling abroad.

Comment

CONTACT US!

Would you like to learn more about the possibilities of cooperation? Do you have a question? Write to us!

I hereby agree that JCommerce Sp. z o.o. shall process my personal data (hereinafter ‘personal data’), such as my name, surname, e-mail address, telephone number and company name, for commercial purposes.
I hereby agree that JCommerce Sp. z o.o. shall process my personal data (hereinafter ‘personal data’), such as my name, surname, e-mail address, telephone number and company name, for marketing purposes.
I hereby agree that JCommerce Sp. z o.o. shall process my personal data (hereinafter ‘personal data’), such as my name, surname, e-mail address, telephone number and company name, for recruitment purposes.
I hereby agree that JCommerce Sp. z o.o. shall process my personal data (hereinafter ‘personal data’), such as my name, surname, e-mail address, telephone number and company name, for future recruitment purposes.
I have been informed by JCommerce Sp. z o.o., 3 Ks. Piotra Sciegiennego St. 40-114 Katowice – the personal data controller – that: - The provision of the aforementioned personal data is voluntary but essential for commercial purposes if I have chosen a request for proposal, or recruitment purposes, if I have chosen the remaining options;
- I have the right to access the content of my data, including to receive copies of it and correct it, delete it and limit the processing of it, as well as the right to transfer it, the right to object to the processing of it, and the right to withdraw my consent at any time. However, the withdrawal of my consent shall not affect the lawfulness of processing carried out on the basis of the consent in question prior to its withdrawal;
- A statement of withdrawal of my consent to the processing of personal data should be submitted to the headquarters of JCommerce Sp. z o.o. or sent to the following e-mail address: zgody@jcommerce.pl. The withdrawal of consent to the processing of personal data shall result in the inability to fulfil the aforementioned processing purposes;
- The personal data provided shall be shared by JCommerce Sp. z o.o. with the company’s authorised employees and individuals collaborating with JC under civil-law contracts, who are involved in the implementation of the purpose of the processing;
- The data provided shall be processed on the basis of the relevant provisions of Regulation (EU) 2016/679 of the European Parliament and of the Council of 27 April 2016 on the protection of natural persons with regard to the processing of personal data and on the free movement of such data, and repealing Directive 95/46/EC (General Data Protection Regulation), ‘GDPR’;
- Should you have any questions regarding the protection of your personal data, please contact us by e-mail: odo@jcommerce.pl;
- The personal data provided shall be processed for the purpose for which it was supplied, or until I express my objection in this regard. In the event of filing an objection, JCommerce Sp. z o.o. shall no longer process my personal data for the aforementioned purposes, unless it can demonstrate that there are valid and legally justified grounds overriding my interests, rights and freedoms or my data is necessary to establish, pursue or defend a claim, if any;
- I have the right to file a complaint to the supervisory authority if I consider that the processing of the aforementioned personal data violates the provisions of the General Data Protection Regulation of 27 April 2016.
I hereby agree that JCommerce Sp. z o.o. shall process my personal data (hereinafter ‘personal data’), such as my name, surname, e-mail address, telephone number and company name, for commercial purposes.
I hereby agree that JCommerce Sp. z o.o. shall process my personal data (hereinafter ‘personal data’), such as my name, surname, e-mail address, telephone number and company name, for marketing purposes.
I hereby agree that JCommerce Sp. z o.o. shall process my personal data (hereinafter ‘personal data’), such as my name, surname, e-mail address, telephone number and company name, for recruitment purposes.
I hereby agree that JCommerce Sp. z o.o. shall process my personal data (hereinafter ‘personal data’), such as my name, surname, e-mail address, telephone number and company name, for future recruitment purposes.
I have been informed by JCommerce Sp. z o.o., 3 Ks. Piotra Sciegiennego St. 40-114 Katowice – the personal data controller – that: - The provision of the aforementioned personal data is voluntary but essential for commercial purposes if I have chosen a request for proposal, or recruitment purposes, if I have chosen the remaining options;
- I have the right to access the content of my data, including to receive copies of it and correct it, delete it and limit the processing of it, as well as the right to transfer it, the right to object to the processing of it, and the right to withdraw my consent at any time. However, the withdrawal of my consent shall not affect the lawfulness of processing carried out on the basis of the consent in question prior to its withdrawal;
- A statement of withdrawal of my consent to the processing of personal data should be submitted to the headquarters of JCommerce Sp. z o.o. or sent to the following e-mail address: zgody@jcommerce.pl. The withdrawal of consent to the processing of personal data shall result in the inability to fulfil the aforementioned processing purposes;
- The personal data provided shall be shared by JCommerce Sp. z o.o. with the company’s authorised employees and individuals collaborating with JC under civil-law contracts, who are involved in the implementation of the purpose of the processing;
- The data provided shall be processed on the basis of the relevant provisions of Regulation (EU) 2016/679 of the European Parliament and of the Council of 27 April 2016 on the protection of natural persons with regard to the processing of personal data and on the free movement of such data, and repealing Directive 95/46/EC (General Data Protection Regulation), ‘GDPR’;
- Should you have any questions regarding the protection of your personal data, please contact us by e-mail: odo@jcommerce.pl;
- The personal data provided shall be processed for the purpose for which it was supplied, or until I express my objection in this regard. In the event of filing an objection, JCommerce Sp. z o.o. shall no longer process my personal data for the aforementioned purposes, unless it can demonstrate that there are valid and legally justified grounds overriding my interests, rights and freedoms or my data is necessary to establish, pursue or defend a claim, if any;
- I have the right to file a complaint to the supervisory authority if I consider that the processing of the aforementioned personal data violates the provisions of the General Data Protection Regulation of 27 April 2016.