PWA Components

[00:00:00]
>> A PWA is typically based on three main components. We have, first, a web app, okay? And if you're here, I understand that you know how to create a web app because that has nothing to do with PWA specifically. You can create the web app with plain HTML, CSS and JavaScript or using a build tool.

[00:00:23]
It can be React, create React, it can be Angular, it can be Next JS, it can be anything you want. If it works in the browser, that's a web app, okay, and we can still do that. On top of that, we are going to start working with something known as a Web App Manifest that is actually simple, but powerful.

[00:00:46]
And we need to understand what's going on behind this file. And then we're going to talk about the service worker. So these are like layers that we are adding one on top of the other. So how do you know if a URL is a PWA? Because so far, I mentioned a couple of PWAs that we have out there, but how do you know if it's a PWA?

[00:01:09]
Well, some browsers will show you a hint, okay? But if you wanna get the real technical answer, the solution that we have right now is Lighthouse. Lighthouse, it's actually an open source tool maintained by the Chrome team. It's available as a CLI, so it's available on NPM. If you have Node JS installed, you can actually run Lighthouse from the command line interface or within DevTools.

[00:01:38]
So you go to Chrome or Edge DevTools and there is a Lighthouse tab there. So you can actually use Lighthouse from there and it will test your website against something known as a PWA criteria. So there is a criteria that will tell you if a website is or not a PWA.

[00:01:59]
But remember that I mentioned that we don't have a clear written in stone definition for PWA. Well, but each browser has a criteria, so when you are passing that criteria you will get installation support and if you're not passing the criteria you will have probably less abilities. So the criteria may change with time, in fact, in the past five years it has changed a couple of times.

[00:02:28]
If you pass the criteria, so if your PWA, if your content passes the criteria, it's officially a PWA. Installation will be possible. A hint for the user may appear, such as the one we saw on Android or the little install badge that we have in the Omnibox in Chrome, the Omnibox is the URL bar.

[00:02:51]
And also in the future, this is not available today, in the future, maybe SEO and discoverability may be different when you're passing the criteria. Such just maybe Google can actually render a little icon when a search result is a PWA. Again, this is not happening right now. And when you pass the criteria your content can get out of the browser's UI, so you can actually be an app.