Introduction

[00:00:00]
>> So my name is Maximiliano, I know it's a long name so I can go by Max this is building PWAs from Scratch, so welcome. I will go really quickly about myself I'm a mobile web developer so I'm from Argentina, from Bueno Aires. So I've been doing web development since 1995 so long time ago, and also mobile apps since 2001, before the iPhone before the Android.

[00:00:24]
So, I have started actually with Netscape, I have been doing, my first website was actually built with DOS, just to get you an idea. Okay, so anyway, so I have been working on the web and publishing content for a while. So I have a lot of books that I offer, and the latest books are on web performance and also I have been authored some articles and content on PWA.

[00:00:52]
That's the topic that we're going to cover today so you can find some of the content that I have been offering at fir .dev, that's my website, so it's time to start. So before starting, let's see quickly what we're going to cover today so we're going to start with the web app, I understand that you know how to create the web app, but it's not yet a PWA.

[00:01:17]
So we're going to understand why it's not a PWA and how to make insolation we're going to set up icons. We're going to see how to enhance the UI, because now we're going to be rendering content outside of the browser, not just within the browser UI. We're going to be an app and a standalone app and that needs some new improvements in terms of CSS.

[00:01:44]
And how we are dealing with UI by going to the Service Worker a nd if you don't know what that is, don't worry, we're going to get there. We're going to make an offline experience we're going to see also how to, let's say, invite our users to install the app.

[00:01:59]
And also we're going to cover and discuss about the apps Store and how we can actually distribute our PWA in the app store. I understand that you know HTML, CSS, and JavaScript so that's all you don't need to know anything about mobile apps or native apps or. Android apps or iOS apps, just web, okay, you are a web designer, or you're a web developer.

[00:02:22]
So you will be able now to create your own first progressive web app we going, just start talking about what's a PWA okay. So, what's a PWA well, PWA of course stands for precisive web app, probably you know that, but, what understand. So this is a the cover article that I offer for net magazine and I really like the idea that the PWA is actually the current DNA of the web.

[00:02:50]
And this is important PWA is just the web it's actually a set of practices is like the sign pattern. To create app like experiences using just the web dot from that we know and we love. So let's try to define Progressive Web App and first I have maybe bad news it's an open definition, which means that we don't have a clear, straightforward definition of what a progressive web app is.

[00:03:22]
In fact, maybe you have already done a PWA at some point at least so, but let's say that it's an app that is built with web technologies. Sometimes it's not clear also, what's an app like, for example, is Wikipedia an app or is just a website okay. So, I mean, it's not so clear, but let's say that It's something that looks like an app or it has services from an app, but completely developed using web technologies.

[00:03:54]
It can work online or offline and probably that the last part is actually new for us. Okay, now we can make that app available even without user's connection, without network connection, it's installable and this is also new and I'm not talking about a bookmark, okay? I'm talking about a real installation in the operating system and the icon that we are installing will actually have Stand Alone experience.

[00:04:25]
Which means it will be rendered outside of the browser completely separated from the browser at least from a user's perspective because we still have the that browser behind the scenes. Because it's a steal the web isn't this is not like we are taking a website and we are compiling that website into a native app.

[00:04:48]
That's not the case we are still under the web platform, under the web umbrella so and this is ideal for all those apps out there. There are just consuming web content or web services if you think about this, just take your phone and see how many of those apps.

[00:05:06]
That you have there are actually just consuming a JSON from a web server, or just content can be even HTML. They don't have anything else and the PWA platform are the techniques that we're gonna see today are clearly ideal for these situations. Because think about this when if you're just creating a native app with Kotlin for Android, or with Swift for iOS.

[00:05:33]
Or even if you're using things like react Native, you're actually creating a browser, you're creating your own browser. And we already have a browser and we already have a lot of technologies and languages in the web platform that is not just HTML and CSS. Today, we have things like web assembly, web RTC so there are a lot of API's that are actually behind this web platform umbrella that can actually add more power to our PWA.

[00:06:06]
And it's also ideal for you if you're here it means that you're a web designer or web developer so you actually work with the web. And now when you have a client that is asking you for a nap, you can say, yeah, I can do that we can do apps now it's not just a website.

[00:06:27]
And even if you're thinking about the app store, we can actually ship, a PWA in app stores and we're gonna see how to do that later. So the PWA platform, it's actually empowering all of us now we can create experiences not just for the browser but also for different operating systems