Creating PWA Using Angular 7 - Step-by-Step Guide 
Tags: angular, pwa, progressivewebapps, guide
Published: 2019-05-08 10:05:49

---
title: Creating PWA Using Angular 7 - Step-by-Step Guide 
published: true
description: Using Angular for PWA is a smart decisions. Let's create your first PWA with Angular. A brief Guide is here.
tags: Angular, Angularjs, PWA, Progressive Web Apps, Guide,
---

For quite a sometime now, Progressive Web App (PWA) has been the most discussed topic in the tech arena as it has witnessed a huge interest in Front-End world. People are exploring its potentials for the businesses and people at large are now developing applications using the PWA concepts.

<img class="aligncenter size-full wp-image-10904" src="https://aglowiditsolutions.com/wp-content/uploads/2019/05/PWA-With-Angular.png" alt="PWA With Angular" width="1200" height="600" />

There are plenty of reasons behind why investors show interest in PWA application than the native one. The popularity is significantly getting high, and Microsoft is promoting the concept and even has allowed developers to create PWA supported apps for Windows Store.

In this article, we'll focus on both -users' aspects and technical aspects and help you discover how effective and easy it is when you create PWA using Angular. As Angular v7 is the newest version, so we have named it, though the same concept (a little difference can't be ruled out) can be applied to v5 and v6 as well.
<h2>How PWA Came into Being?</h2>
Frances Berriman and Alex Russell -the designer and the engineer at tech giant Google came up the innovation in 2015. Users can take benefits of new feature which gets support from a modern web browser, service workers and web app manifests. Initially, it could get as much attention as it should have been, but after a couple of years, it became one of the main topics to debate. In the next paragraphs, we'll discuss why PWAs are so crucial for your business.
<h2>Why Progressive Web Apps?</h2>
Before we discuss the points why PWA, we need to see some of the exciting states regarding the usage of Smartphones and how people interact with native apps.

As the Smartphone users are growing by leaps and bounds, their expectations from the service provider are also increasing. At times, you are left clueless, wondering what expectations your users have.

<strong><em><u>That's where the challenge for service provider begins...</u></em></strong>

According to the survey, users generally don't download the apps which they don't use frequently. If you observe a more deeply, it comes out that apart from pre-installed applications (that are provided by the service providers), users have very limited (10 apps) space to download third-party apps. Even the more surprising fact is that space is captured by the top 10 most popular apps including WhatsApp, Tinder, Facebook, Skype, YouTube, Google Chrome, Gmail, Instagram, Spotify, Snapchat, etc.

In such a complicated situation where thousands of apps (many of them are actually attractive) are there on different platforms and finding a place for your applications in users' smartphones' screen is a herculean task.
<h2>The Problem with Native App</h2>
All those using smartphones, utilize them for multiple tasks, but when it comes to downloading an app, they think over specific issues. For example;
<ul>
 	<li>If the app worth downloading</li>
 	<li>If there is ample space in the device</li>
 	<li>If there is a better option than downloading the app</li>
</ul>
Besides, you may realize that the user even doesn't use most of the apps that are installed in their device. These are some of the reasons why investors are exploring the potentials of PWA and implementing it in their websites.
<h2>So, What is PWA After All?</h2>
PWAs are the web application, having a set of capabilities that provide an app-like user experience. They pretty much similar to web apps, though they are deployed and accessed through a web server via URL, resulting in saving ample save data and space in the drive. In the next paragraph, we'll talk about the features and PWA and what benefits you reap using PWA will be followed by.
<h2>Features of PWA</h2>
The concept PWA revolves around the following things;
<h3>1.   Progressive</h3>
PWA should work and compatible with all browsers such as Chrome, Safari, Firefox, and all devices.
<h3>2.   Responsive</h3>
It should be responsive so that it may fit all screens, irrelevant to the devices (such as mobile, tab, fab) it is being used.
<h3>3.   Connectivity Independent</h3>
It should provide rich user-experience even on low-quality networks (such as 2G, 3G, 4G, etc.) and work offline in case there is no stable connection.
<h3>4.   App-Like Experience</h3>
Though it is not a native app at all, it should provide an app-like experience and users should add PWA from the browsers, itself.
<h3>5.   Fresh</h3>
It should automatically be updated utilizing service worker, so users don't need to update it more frequently.
<h3>6.   Safe</h3>
It should be served via HTTP so that users would feel secure using it as they find in the native apps.
<h3>7.  Discoverable</h3>
Utilizing W3C manifests, the PWA should be discoverable by the search engine and get identified as an 'application.'
<h3>8.  Push Notifications</h3>
It should engage users sending them to push notification, containing updates and reminders.
<h3>9.  Installable</h3>
Users should be allowed to install the website as an application, and if possible they should be prompted with the pop-up suggesting <strong>'Add to Homescreen.'</strong>
<h3>10.  Linkable</h3>
It should be shared, and users or receiver should not require to install it.
<h2>Benefits of PWA</h2>
Seeing the increasing popularity of Progressive Web Applications, it is evident that it will affect the native app to the great extent. However, I cannot bet on that, though things will be totally different after sometime and it will be seen as great factor in terms of business. It has plenty of benefits which will help companies to reap benefits in the long run.
<h3>Cost Effective</h3>
Compare to a native app, PWA is very cost effective and you — For an app publisher, the most significant advantage is the cost saving in terms of app development and maintenance. Because it is assumed that making a website is a lot more quickly than making an Android App.
<h3>Cross Platform</h3>
PWA is universal, and the application made utilizing any technology, framework or library can be run across all platforms. It gives freedom to developers to create a single application for cross-vary-platforms instead of developing separate versions of the app for different platforms.

To know more visit article "<a href="https://aglowiditsolutions.com/blog/progressive-web-apps-development/" target="_blank">PWA – Progressive Web Apps: Everything You Need to Know</a>"
<h2>Setup Process of Angular PWA</h2>
To know how to develop PWA application using Angular, you need to create a front-end web application that will use JSON API. Now, you need to utilize the Angular HttpClient module to send HTTP requests to generated JSON API from JS GitHub repository. The API is essential here to fetch data from a website for PWA application. Now, using Material Design from Angular Material Package, you need to build PWA-friendly UI.
<h2>Step-by-Step Guide to Setup the Project Using Angular v7</h2>
<strong>Technology to be Used;</strong>
<ul>
 	<li>Angular CLI v7</li>
 	<li>Node.js 8.9+</li>
 	<li>npm v5.4.2</li>
</ul>
<strong>To add Angular CLI, you need Node.js (preferably latest Recomended Version)</strong>

<code>$ node -v</code>

<img class="aligncenter size-full wp-image-10941" src="https://aglowiditsolutions.com/wp-content/uploads/2019/05/Checking-Node-Version.png" alt="Checking Node Version" width="227" height="43" />

Add/Install Angular CLI using the following code

<code>$ npm install -g @angular/cli</code>

<img class="aligncenter size-full wp-image-10943" src="https://aglowiditsolutions.com/wp-content/uploads/2019/05/angular-cli.png" alt="Add / Install Angular cli" width="669" height="207" />

<strong>IMP Note:</strong> You might need to use _sudo_ depending on the npm configuration

Now Generate Project Using the Following Command

<code>$ ng new pwa-example</code>

Once you are done with these processes, the base file will be created automatically, and it look something like this;

<img class="aligncenter size-full wp-image-10944" src="https://aglowiditsolutions.com/wp-content/uploads/2019/05/create-project.png" alt="Create Project" width="669" height="652" />

Move into the new projected you have just created using the command as following

<code>cd pwa-example</code>

And add Angular PWA using the following code

<code>$ ng add @angular/pwa</code>

<img class="aligncenter size-full wp-image-10945" src="https://aglowiditsolutions.com/wp-content/uploads/2019/05/add-pwa.png" alt="Add PWA" width="669" height="320" />

Using this code will import and register <code>"@angular/service-worker"</code> package. Further it will perform some other task like

<code>"index.html"</code> file will be updated and included with <code>"manifest.json,"</code> &amp; <span style="font-size: 1rem;">meta tag with theme colour attribute."</span>

Include some PWA-compliant "icon assets."

&nbsp;
<h3><strong>Lunching Angular PWA Application</strong></h3>
To launch PWA Application, you need <code>"– ng serve"</code> command, but here this will not be possible due to 'Service Worker.' You need to have a server to launch the application. Follow the command to install the server.

<code>npm install -g http-server</code>

Now, you need to register the service worker, and it will take place when you have a production-like environment. So, you need to use the specific command (given below) build an application as a production version.

<code>ng build --prod</code>

<img class="aligncenter size-full wp-image-10949" src="https://aglowiditsolutions.com/wp-content/uploads/2019/05/build-app.png" alt="build app" width="669" height="718" />

Next, you need to use,

<code>http-server -c-1 dist\pwa-example\</code>

<img class="aligncenter size-full wp-image-10951" src="https://aglowiditsolutions.com/wp-content/uploads/2019/05/start-http-server.png" alt="start-http-server" width="669" height="212" />

Then you can enter the url address (such as http://localhost:8080) to check if your project has been registered correctly.

<img class="aligncenter size-full wp-image-10961" src="https://aglowiditsolutions.com/wp-content/uploads/2019/05/Angular-PWA-Example.png" alt="Angular PWA Example" width="516" height="736" />

&nbsp;

<strong>Note:</strong> You can also check if it works offline too.
<h3><strong>Integrate "Add to Home Screen"</strong></h3>
Once you are done with the checking process and ensuring the app works correctly, you need work on integrating functionality such as adding "Add to Home Screen."

<strong><span style="font-size: 1rem;">To add the functionality, you need to follow the two steps as give</span><span style="font-size: 1rem;">n below;</span></strong>

For that you need to check two files in the folder one is <code>"ngsw-config.json"</code> , <code>"manifest.json"</code>

There is a  <code>"ngsw-config.json"</code> files that specifies which files and data URLs the Angular service worker should cache and how it should update the cached files and data. The file will include configurations mentioned in the below image.

<img class="aligncenter size-full wp-image-10946" src="https://aglowiditsolutions.com/wp-content/uploads/2019/05/ngsw-config.png" alt="ngsw config" width="590" height="477" />

You need to add the <code>"manifest.json"</code> file to the project

<img class="aligncenter size-full wp-image-10948" src="https://aglowiditsolutions.com/wp-content/uploads/2019/05/manifest-json.png" alt="manifest json" width="344" height="643" />

Using the Web App Manifest, you can add basic and necessary information of the, and for configuration, you can take example of the image given above. As shown in the image, the manifest.json file will include properties like "name", "short_name", "theme_color", "background_color", "display", "scope", "start_url" and different sized "ico<span style="font-size: 1rem;">ns".</span>

<strong>Now Add <code>manifest.json</code> File  to <code>angular.json</code> and <code>index.html</code></strong>

Here the <code>manifest.json</code> required to be added in <code>angular.json</code> that you can find in the assets section.

Take a look at the image below;

<img class="aligncenter size-full wp-image-10955" src="https://aglowiditsolutions.com/wp-content/uploads/2019/05/angular-json.png" alt="angular-json" width="513" height="209" />

Now add a link to the created <code>index.html</code> file in the head section.

<img class="aligncenter size-full wp-image-10956" src="https://aglowiditsolutions.com/wp-content/uploads/2019/05/Index-html.png" alt="Index-html" width="701" height="311" />

<strong>Note:</strong> The functionality will be useful with the application that is served HTTPS.

The result You got is as below

<img class="aligncenter size-full wp-image-10959" src="https://aglowiditsolutions.com/wp-content/uploads/2019/05/Final-Output.png" alt="Final Output" width="1366" height="736" />

<strong>Well Done! You Developed PWA!</strong>

Now, as you have created your first PWA website, you need to test it using the 'lighthouse' from the Google tool.

<img src="https://aglowiditsolutions.com/wp-content/uploads/2019/05/Angular-PWA-Lighthouse.png" alt="Angular PWA Lighthouse" width="1366" height="736" class="aligncenter size-full wp-image-10962" />

Now let people get the benefits of PWA and help your business get a new height.

<strong>Conclusion</strong>
In this article, we tried to simplify the PWA development, and we hope that the tutorial worth for you. Also if you would like to build any app with Angular, then you can <a href="https://aglowiditsolutions.com/hire-angularjs-developers/" target="_blank">Hire Angular Developer</a> at very cost effective rates. You can share your thoughts by commenting and let us know how better we come up within the next article. Happy reading!