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.