Make your Angular Application PWA

Automatic Summary

Demystifying Progressive Web Apps: A Front-End Developer's Journey

Congratulations on joining this exploration into the world of progressive web applications! I'm Joanna Brian, a senior member of the technical staff at VMware. Today, I'll walk you through our journey of converting a large angular application into a progressive web application.

What is a Progressive Web App?

Coined by Steve Jobs, the idea of progressive web apps was born out of the belief that we have the power to create native applications for our mobile devices using web applications. This concept was adopted and popularized by Google in partnership with Microsoft in 2016.

A progressive web app is essentially a user experience that leverages the capabilities of the web and combines features that are fast, reliable, and engaging. These apps look and perform like a native mobile app — they even operate in offline mode. Users can receive push notifications and install them on their device.

When Should You Develop a Progressive Web App?

  • If your users utilize modern browsers
  • If you already have a web app and need a mobile application
  • If you lack time and resources to develop separate apps for IOS and Android
  • If your application serves static content

Making an App Progressive with Angular

Regardless of which frontend technology you use, making an app progressive is straightforward with Angular technologies. Angular provides a schematic which adds in your service worker package to your project and registers the service worker in your app module. But what actually is a service worker?

Understanding Service Workers

A service worker is simply a JavaScript file that runs in your browser in parallel with your web application. Think of it as a proxy between your application and your server. All requests from your application to the server and vice versa go through your service worker.

Just remember: Service workers work only in production mode and you need to serve your folder through an HTTP server.

How you can Install your App on Desktop with Progressive Web Apps

By leveraging the manifest file along with a registered service worker, it's possible to install the web app on your desktop. By providing details about your app such as the name, theme color, background color, and icons within the JSON manifest file, your app can be installed straight from the browser to your desktop or mobile device.

Sending Notifications from your Web Application

By implementing a voluntary application server identification for the web push protocol and the notifications API, native notifications can be sent directly from your web application. This gives users a feel of a notification from a native application even if the application is not active.

Why Opt for Progressive Web Apps?


  • Enjoy shorter loading times
  • Experience good performance
  • Benefits from instant updates
  • No need for app store installation


  • No separate app development for IOS and Android
  • No need for developer accounts in app stores

While it is true that progressive web apps may not possess all the capabilities of native applications, they are easy to implement and perfect for static content. If you're interested in Progressive Web Apps, check out resources such as Google PWA and MDN.


Creating a progressive web app can be an exciting journey for any front-end developer. There are numerous benefits for users, businesses and developers themselves. Even though they may not match the full capabilities of native applications, their easiness to implement makes them a go-to choice for many developers. Delve into the world of PWAs today!

For further questions or if you'd like to connect, find me on LinkedIn or through the Women Tech Network. Thank you for your attention and I look forward to seeing you at future conferences.

Video Transcription

Thank you for joining my session about progressive web apps. And I'm really thankful for having this uh chance to attend this conference. Uh This is actually my first international conference, so I'm really, really excited about it and I hope that you enjoy it.So my name is Joanna Brian and I am a senior member of technical staff at VM Ware. I've been working as a front end developer in the last five years and uh especially with a, with my team in VM Ware, we are creating one huge angular application for configuring cloud services, networking and storage and uh in the next 30 minutes, I will tell you more about our journey, how we try to uh create our in your application into a progressive web application.

So last year in our company, there was a hackathon, the so called vmware Boro, where with our team, we tried to convert our existing an application into a progressive web app. So we did uh not great success, but I'm glad that at least we tried and I'm going to. So at first, something more about uh progressive web apps, uh the first uh idea of progress for ops is actually Steve Jobs is he thought that he believes that we have enough um power of the web applications that we can create a native applications for our mobile devices. So in the next years, um this wasn't so popular, but in 2016, Google actually adopted it and started working with Microsoft together in order to popularize it and to start creating more applications like this. So what is actually a progressive web application? This is a user experience which has the capabilities of the web and is also fast, reliable and engaging. It's actually a web application that acts and looks like a native mobile application. It's fast and reliable because it can work in offline mode. Uh It works really fast and it's engaging uh because you can um send some nature notifications to your users and also it can be installed on your user user device.

So when it makes sense to develop progressive web app, if your users use um modern browsers or you already have an existing web application and you need to have a mobile application, but you don't have the time and the resources to have um an application for both I Os and Android.

And also if your application serves a static content which um doesn't need to be reloaded frequently. So what do you need to make your application progress? So uh I'll tell you more about how you can do it with the uh capabilities of A U but everything that I'm going to tell you more about, you can do it for every um front end technology and uh you can also do it manually. But with anger, it's really, really easy. So angular provides us the sche magic at angular pw. And this schematic actually adds in your service worker package to your project enable service worker build support in the CO I um which is actually adding the service worker supporting your annual Jason file. It registers the service worker in your app module and also updates your index html file and creates some more files for you. For example, manifest file, um Jason config file and also um some uh and also add some acids for your application. So let's start with service workers.

This is the most interesting part of creating the progressive web apps. And actually a service worker is a javascript file which runs in your browser and it works in parallel with your web application. Just imagine it like it's working in a thread in the browser with your application.

It's the something like a proxy between your application and your server. So uh request that you're making from your application through a server and vice versa are gauging through your service worker. And also service workers are working independently from your application and from your server.

And once you register it in your browser, if you leave, even if you close the tab with your application in your browser, it's really, really powerful too. And that's why you need to run your application on http S. So in order to have the service worker file again, I say I will say that it's s a simple javascript file and it's automatically generated from in your, when you run a production boot of in your uh application. So in order to have the service worker file, you need to register it in your application in your amo uh Also this service worker file in A U is generated as I said, during uh production built. Uh If you want to test your progress f up locally, you need to have a production built or service workers work only in production mode and you need to serve your uh this folder through HTP server, it won't work wither. So as I said, agu is uh creating this file for you. But again, if you, if you're not using angular and you want to write your own service worker, you can do it. So also this service worker has its own life cycle. At first when you register it in your application, the service worker will, will try to, to be installed in your browser. During installation, the service worker file will try to catch some assets from your application. And if this isn't possible, the service worker registration will fail.

So as I said, you can catch some assets. Uh Also you can get some assets uh to for your application, you can do it with this NSGW configuration uh which is automatically generated from inure for you when you run uh NGRPW a uh package in your application. So this is automatically generated file. It's in, it's not in your disc folder and you can uh edit it anytime you want. So what do we have in this uh configuration file? We have some asset groups and data groups as a group are the uh files that we want to be catched um on pref So these are the files that we need for our application to be run. These are our GS files, CS S files, web manifest. And also if we have some static assets like uh images in our application. Um So these are the files that we need in order to our application to work. Data groups on the other side are actually um data which is loaded from our server, which is if we send a get request to get some data from the server, um We need to put the URL for this uh request under data groups. We also have two different uh install modes, pref or lazy pref uh modes means that when the service worker is being registered in our application, we would like all of these files to be cached.

If any of these files cannot be cached, the service worker will fail and it won't be registered in your application. Install lazy means that um the data from these URL S will be cached only if we receive some data from this URL S. If our users don't make a request to this URL to get some data from it, it won't be cached. Next thing. And uh maybe my favorite is that you can install your application on your desktop. So this is done by the manifest file. You again need to have a service worker and also a manifest file. It's also again auto generated, but you can write it by yourself. And this manifest file is a simple JSON file where information for your um application icon when it's installed on your user device. So you uh provide a name, team cover, background cover and some icons. So for example, this is the path to this icon that our user see when he's trying to install it on his uh machine. So uh this manifest file need to be registered in your index html file. And um there will appear one small button into your search bar on your browser. And if you click it, you will receive this prompt. Would you want want to install this app? If you click install, you will receive this simple icon on your on your desktop. So here you see a browser but also you can see it on your desktop. And also if you're using a mobile device, it will appear, appear on your mobile device desktop.

Like the other applications that you have. This is actually shortcuts and it's run by the service worker in your browser. And next but not last is native notifications uh can be sent from your web app, web application. So with my team, um we did y only with um the capabilities of the browser. But if you have a push API on your server, you can use it for showing uh notifications from your web application. So uh in order to use a push API, you need to have a voluntary application server identification for web push protocol. This is a keeper value which needs to be sent to your push API server in order to um authenticate your user and to say to your server that you, you want to receive some um push notifications for it because in your browser, we can have a lot of service workers registered. And um and you just say to which you want to receive uh push notifications. The other thing that you you need is a notifications. API. This is a native browser API and this is actually the uh the API that is used for showing uh notification from your. So first if you want to, to send the notifications from your, from your user, you need to ask them. Do you want to receive a notification? Maybe in some web applications you've seen that there is some prompt. Do you want to receive notifications and you click? No.

So that is done by notifications. API, request permission. And if our users say yes, we will receive uh that information with in into this promise. And if our uh user want to receive actual action notifications, we can use the service worker to show notification to our user.

Um We can stay uh title and body and icon to our notification. Even we can say that we want to have some vibration if we're using a mobile phone and also we can have some more actions and we can make it really, really complicated and engaging. So these notifications, they are actually browser notifications, but they uh feel like niche notifications, they will appear into your notifications list on your device. And um our user will feel it like it's a notification from a native application. And if you're using Kusche Api and you have a service worker registered on your browser, uh Even if the the application isn't active, it's um it's not uh opened it, it isn't in any type of your browser, you still see a notification from your server. So why we want to have a progressive web app and why it's important to use them? So for our users, they will receive a shorter loading time of the of their application. It's not that uh if uh someone is waiting for more than three seconds to an application to be loaded, they will leave, leave it, they will have a good performance in poor network conditions. And even in offline mode, they don't need to go to an app store to install it and they will receive an instant updates for businesses. There is no need to mema involved in that download and installation.

Also, the updates of uh the application are easier and also they will receive a higher user engagement and conversation rates because we have some ac O optimizations for progressive web apps. And for developers like me, it's really cool because uh you don't need separate app development for I Os and Android um operating system and you don't need paid developer accounts in app store or Google Play. Uh You just have one web application which will uh which can be used on both I Os Android and whatever you want. Of course, uh Progress for apps don't have the uh abilities like native applications. They don't have all of the API S that native um native application uh have. Um And uh you cannot use all the capabilities of, for example mo mobile mobile devices with progress for BS, but they're easy to be implemented and um they, they feel and act like a nature application. If you have something like uh a static content, it's perfect for you. So if you're interested in progressive web apps, you can check in your page, they have a really good service worker intro. There is also a progressive web of book and of course in DN and Google PW, a of course the founders of progress web apps.

So do you have any questions? And thanks for your attention. OK. So if you don't have any questions, I want to thank you for your attention. I hope that you enjoy it. And uh you can find me on linkedin. I can send you my linkedin for further questions and if you want to have my contact and also I am part of women called Sophia and you can find me also there. And if you are interested and I want to thank uh women tech Network for this opportunity and I hope to see you soon on next conferences. Thank you.