All righty. So before we get to the planning, let's take a quick look at what a progressive web app is and what the benefits are. If you were to Google pw A's, you would find many different explanations. But in general, it is a website that can mimic a native app experience, which includes the ability to launch without web browser UI, and have a home screen or desktop icon to launch it, and also the ability to function offline. In 2015, the term was first coined by Google Developer Alex Russell, who contributed to an aspirational list of characteristics. It should be responsive fit any form factor any device, be able to function offline using service workers to access the browser's cache Have an app shell and have app like navigation.

Be able to stay up to date using the ServiceWorker. To update when necessary. Be securely served via TLS be installable being able to add this application without having to go to an app store. And also be able to use push notifications through the operating system doesn't need to be all of these things. But the more that you have, the closer you are to a pure progressive web app. Though there are specific measurable criteria used to test if a website is a pw a.

We can use lighthouse audits in Chrome Developer Tools in order to see what criteria our website meets and how we can meet them if we haven't yet. So you can see we can test for mobile or desktop and these five categories And we can also simulate a throttled CPU like there would be on a mobile device. This is what the report looks like when the audit has finished running. You can see we have five categories performance accessibility, best practices, SEO, and progressive web app. So you can see for progressive web app that it needs to be fast and reliable installable and pw optimized. So it'll go through these specific criteria and it will offer suggestions on how to fix them if you haven't met them by clicking the down arrow in each item.

So in 2019, a pw A can be created in a few minutes with the angular COI and Firebase. So this is what we did in the previous section. And it just goes to show how easy it is. We did that within the span of a couple of minutes. You can go out and check some examples of pw A's inaction at pw a dot rocks and see how they function in real life. Now I'm going to show you an example of a pw a and action, we're going to check out something we're going to be using later on in the course.

And that is photo P. It is essentially an online version of Photoshop. So that would be a cool thing to be able to have on your desktop without actually having to install anything. So there was recently a new update in Google Chrome that makes it easier to install pw ways. And that is this plus icon here. The cool thing is that this appears in both Windows and Mac and allows you to do the same thing. So if we click on it, we are prompted with do we want to install this app, and we're gonna click Install.

And so now you can see that we essentially have a Photoshop app. We don't have the browser UI any longer and you can see down below That we actually have a desktop icon here. So that's very cool. It looks basically like a native app. And there was the only installation process we had was just clicking the Install button. So our portfolio website that we're going to be making is going to be able to function just like this with a native app experience.

And we're going to make an app icon and it's going to be able to function offline as well. So I hope you're excited to build your own unique pw way. Let's continue on with a few more videos and then we'll get started on the project. Alright, see you in the next one. Bye for now.