Codepad Masters Application Tour

[00:00:00]
>> Maximiliano Firtman: So now it's time to try our own website, our own lab, our own PWA. So we're going to work with an app, it's called Codepad Masters. Let's just restore some notes. While you're coding, you can say, I need to learn more about Service Workers. Okay, just your notepad.

[00:00:19]
It should work offline, blah, blah, blah, blah. It's just a Vanilla web app. It's very simple, really, really simple, okay? Just one HTML, one CSS, one JavaScript. Because what we want is to understand the concepts around, how to convert that into a web app, but have in mind that you can apply what we're going to see to any web app that you have.

[00:00:42]
No library, no framework, no dependencies, no build process, no nothing, okay? But it's not a PWA. Again, it can be installed as an app on desktop, but it's not passing the criteria. So we will solve the problem, okay? So, remember, we will work on this repo. You need to download the Initial Code.

[00:01:02]
Okay, go to the branch, Initial Code, to get the code. So, if you have already done that, because I already gave you the URL before, I think I don't have it. So I will open VS Code, and you will see something like this.
>> Maximiliano Firtman: So it's just an index.html, nothing too fancy.

[00:01:28]
We have a UL that has a list and a form, and then app.js that is listening for DOMContentLoaded and in some event listeners, and rendering nodes. That's it. So what I need, this is important, because remember that I mentioned that the PWA criteria needs HTTPS. And you say, well, that might be a problem if we wanna run this locally.

[00:01:55]
There is one exception to that rule, is localhost. If you are running a localhost, you don't need HTTPS, and you can still pass the PWA criteria. But also that means localhost, and exactly localhost, not your IP address, 1.27.0, no, no, no, not the name of your computer, no, no, exactly localhost, okay?

[00:02:21]
So that means we need a server. So we need to serve this web app with a server, okay? So if you're a web developer, you probably know how to do that. I have a plugin to do that I call library load all. If you don't have a plugin, if you have Node.js installed, you can execute npx serve.

[00:02:43]
npx server will just create a server on the current folder. And yeah, you can just directly open localhost:3000. So this is how it looks like. I mean, I can add things like Add workshop. I can go and get some lunch. So I just take some notes, nothing really fancy.

[00:03:04]
I can delete the notes. And you can see I don't have the icon to install here. I have a Zoom icon bookmark, but not the install one. And if I'm going to save and share, I have the Install Page as App. The other one was kind of different, it was actually saying the name of my app, install Codepad Masters, for example.

[00:03:23]
And that is because I don't have the minimum that I need to make this work, okay?. So I'm missing one piece. Do we have any other place where I can actually check that I'm missing that piece? Yes, and that's gonna be our best friend while developing PWA, is DevTools.

[00:03:43]
So I need to open DevTools and I need to work with the Application tab. That's gonna be our best friend. In fact, you can drag on these tabs, I'm not sure if you know this. But I encourage you to drag application and typically put it after Console, so Elements, Console, Application, because we will work with applications a lot.

[00:04:04]
An application has a lot of sections. The first one is saying Manifest. Actually, this is the one that will tell you if you're passing the criteria or not. And you can see that we start seeing a lot of error saying, hey, installability, the page has no Manifest. We have an error here, here, here.

[00:04:25]
So basically, yeah, it's not a PWA, okay? We have that thing there. Another way to know if you're a PWA or not is to use Lighthouse. Lighthouse, it lets you create a report on your web app. Probably, you have used it for performance, cuz it was pretty useful there.

[00:04:47]
And you can analyze the current page. And you can see that when you create a report here, you can specify the sections. I will unselect all of them and I will select Progressive Web App. There is a section on making a report on progressive web app. So it will tell you how good or bad are you right now as a progressive web app.

[00:05:08]
So if I analyze the page load, It will reload the page and do some tests. And, well, there are yellows there. By the way, it's saying that this is going to be deprecating the feature because now they're changing the criteria, but anyway, it's still there. I mean, if we have a green checkmark here, it means we are.

[00:05:35]
We don't have the green, we are not a PWA. And here, it gives us all the problems that we have. Actually, we have nothing, okay? Well, the only thing that we have is the meta viewport tag. It's the only thing that it says, yeah, yeah, you have one list.

[00:05:52]
But we are not a PWA, okay? So we need to move one step further. By the way, question for you, do you know why we are using this viewport meta tag? Does anyone know why it's there? I'm pretty sure that you're using it, because when you create a new HTML, that you said, okay, I'm going to create an HTML, and you create something like this, it's there, right?

[00:06:16]
So every new template has that viewport meta tag, but do you know what that is, or why is it there?
>> Student: The only time I've worked with it, it had to do with like Apple retina screens and the DPI. And so needing to set some sort of, I think you had it in the other HTML, the initial resolution or what not.

[00:06:39]
>> Maximiliano Firtman: I mean, we are close, but it's not exactly with resolution. We are close with, when you say Apple, it's actually not for Apple, but Apple created it. So this was an invention of Apple. So before the iPhone, I was doing mobile web at the time. We used to have mobile websites, mobile browser and a mobile website, because websites, if you open a desktop website, at the time, actually, it didn't fit on the screen, okay?

[00:07:18]
Steve Jobs said that in the video that we saw. Steve Jobs said, it's a full Safari, it's a full desktop Safari. Remember he said that. Well, because it's a full Safari, what happens is this. I mean, it's important for PWAs to understand that viewport meta tag, because we will change it later.

[00:07:38]
So if I open our web app, and this is a spoiler for later,
>> Maximiliano Firtman: I'm going to open, this is Codepad Masters, okay? It looks nice, okay? I mean, what happens if I install it? Good question. If I add it to the home screen, Codepad Masters? Well, first, it doesn't contain an icon, it's an S.

[00:07:59]
S for, I don't know why, [LAUGH] but it's an S. And then you look at the title, Store notes is taking the title, that's why the S. Yeah, I'm not sure I liked it. And if I open it, it opens in Safari. I'm still seeing Safari here. So it's not a PWA, okay, for sure.

[00:08:19]
But now, let me remove the viewport meta tag. I think you will understand what happens. So I don't have the viewport meta tag, or let me comment the viewport meta tag. And I'm going to refresh. Can you see the difference? Can you spot the difference? Now, everything is really small, why?

[00:08:36]
Because by default, if you don't have a viewport meta tag, mobile browsers, including Chrome on Android, Firefox on Android, and Safari on iOS will think that you're a website that was created before 2007. And it's optimized for desktop, not for mobile devices. It's not responsive or it's not mobile-specific.

[00:09:00]
So that means it's emulating a viewport of 980 pixels wide. That is kind of a desktop screen. And then, of course, it's shrinking that, because it doesn't fit. So that's why everything is really small. So when you are adding the viewport meta tag, you are saying, hey, I want the width of the viewpoint to be the same width as the device.

[00:09:22]
I wanna match my viewpoint with the real device. That's what I'm saying here, okay? That's why it's important to have it, mostly if you are doing mobile websites, mobile apps, okay? Any question on that? So now we are back to a better experience.