Introduction

[00:00:00]
>> Maximiliano Firtman: Hello, my name is Maximiliano Firtman, Firt on X, Firtman on other social networks. We're going to talk today about PWAs, about web apps, installed web apps, progressive web apps and all that stuff that will let us maybe get out of that app store. So first, really quickly, something about myself and my history doing web apps and PWAs.

[00:00:25]
I'm from Argentina, I live in Buenos Aires, and I've been a mobile web developer. So I have started as a web developer, doing HTML first, then adding some JavaScript, then adding some backend, PHP, ASP and so on. And Actually, a long time ago, 1996, right? And I've been also doing a lot of web apps, more than 150, that were published over these decades of doing websites.

[00:00:54]
And also, I'm an author. So I've been authoring 13 books. Actually, there is 14th that will appear next. I authored more than 70 courses on different topics but mainly they are around web development, mobile development and web performance. And because I also started doing mobile apps around 2001, that's actually before the iPhone appeared, before the Android appeared.

[00:01:25]
One of the things that I always liked was this way to merge my two technologies. The web and the mobile space at the time, that was actually the only platform that was supporting apps. So I was merging those things, and actually that's kind of what we're going to talk today, okay?

[00:01:44]
Merging the web and the mobile space or at least it started like that. And you can see a lot of books with a lot of translations on different languages. And some of them are actually on the topic that we will cover. So I also authored the learned PWA kind of interactive ebook published web.dev, so it's a Google Chrome website.

[00:02:14]
There is no official PWA reference because we will see that later, but as a spoiler, this is not a framework, this is not a library, it's not an API. So it's not owned by anyone. So learn PWA at web.dev is a resource. We will cover all the foundations that is actually published there, but there are much more that you can continue learning there.

[00:02:39]
But I have been writing and teaching about PWA for a while, so I, for example, authored this cover article on net magazine, a resting piece. Well, it's a printed magazine, it doesn't exist anymore, but I was actually writing about PWA for many years. And by the way, I really like that cover, I didn't design the cover, right?

[00:03:05]
I just wrote the technical article. But because it has that DNA idea, and the center of the DNA is the W the web. And the whole thing here is that PWA is just the DNA of the web. That was the idea behind this design. I think it's a good, let's say, abstraction of what we will cover today, okay?

[00:03:33]
So PWA is just the web, it's the DNA of the web. So, at Frontend Masters, so I have a lot of courses on Frontend. I will link to some of those courses at some points during this workshop, this course, because there will be more API usage that we won't have time today to cover.

[00:03:57]
But if you're interesting you can go and get there. Also, I have some mobile app courses on the native side, the dark side, okay, not the website. So, I have some Swift [INAUDIBLE] and DART courses as well because I have experience also doing mobile apps in the native world.

[00:04:13]
So that will that helps me actually understand the power of the web, and, of course, also the challenges. So what are the limits? So I hope that we can today talk about that, and then also have some backend courses on PHP and Go, for example. So we're going to cover, we're going to start talking about what's a PWA.

[00:04:36]
Or if it's a PWA, a web app, an installable web app, a home screen web app. Okay, we'll talk about that first. What's the current state of the platform? So compatibility, mainly. We are going to see this in action. So I wanna show you live samples of installing and using the things.

[00:04:54]
Mobile and desktop installation. How do we install PWAs? So we will see how the process works before actually doing our own PWA. Then we will actually work with the project. So we will have a colab, we have a small project. It's a vanilla JavaScript project, and we will convert that website, or, let's say, upgrade that website into a progressive web app, in to installable web.

[00:05:22]
That will be the process and we will see each step one by one. So starting with installation, we will make that web app offline, so then we don't see this little T Rex that right now is the the icon of the offline web, right? So, we wanna get rid of our nice T-Rex from our web app.

[00:05:44]
And we will see some UI and UX advanced techniques to make our web app more app-like, to have some more app-like experience before finishing with publishing and distribution. So we will have the discussion of stores, what's going on, how we can improve installation and maybe what's next for the platform in the next few years.