Go to:
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 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!
Angular: PWA
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:
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
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,
app.module.ts
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.
Expert knowledge
Is MongoDB the perfect database system for e-commerce?? Read the text!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.
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.