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?
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
Adding PWA to Angular
We start by installing the Angular application via Angular CLI. Then we use the following command: ng add @angular/pwa
This adds a few files required to run PWA to our folder:
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).
*.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,
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.
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.
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.
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.
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:
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.
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.