PWA Overview

[00:00:00]
>> Let's try to understand the PWA. And compare the PWA platform with other approaches, App Development Approaches. And, when we are talking about apps, most people think about Native SDKs. As I mentioned before, we're talking about Kotlin for Android and maybe Android Studio, or we are talking about Swift or Objective C for iOS, or even .NET for Windows.

[00:00:25]
Well, that's something that typically we don't know as web developers. And also we have web development, something that we like, right? We are here, so we like the web. And we typically think that, and we are right by the way, that Native SDKs will actually compile or will target specific devices.

[00:00:46]
So, if you create an app that works for Android, it's actually only available for Android devices. It's for one specific device or one specific platform. Maybe you're thinking, hey Max, but we do have some cross platform solutions such as React Native, NativeScript, Flutter. Well, in those cases, you also need to create different packages per platform.

[00:01:11]
So even if it's the same source code, you still need to make different packages because they're not compatible. And you know, we know, that when we are under the web development universe, we are actually targeting the browser, okay? So the user actually needs to open the browser, type the URL, or search in the search engine, or find our content somehow.

[00:01:40]
But we always have the browser right? In between, we have a solution, and I would like to say we used to have a solution, known as hybrid development. If you have ever heard about, Adobe PhoneGap, or Apache Cordova, we're talking about this. In this case, we were taking a web app, web development, and Native SDKs, and we were creating an app for one particular device as well, not for the browser.

[00:02:11]
So PhoneGap is not for the browser. And at this point you're asking, okay, where is PWA? Well, a PWA as I mentioned before, it's the current DNA of the web. So it's pure web. We don't have any native SDK involvement as with hybrids. This is pure web. And because it's pure web, we are targeting the browser.

[00:02:39]
But it's not just the browser. And here comes the nice part, we can also target specific devices. So, our app now will work in the browser as before, but it's also available as a device-specific app. So on Android for example, it can actually become an APK, that's an Android package.

[00:03:02]
On the desktop, it can become a Windows package or a Mac OS package. And for that, we don't need to do any additional work from what we're going to see today. So it's just JavaScript, JSON, HTML, CSS, and standards. We don't need to install any SDK. We don't need to know anything about native development.

[00:03:29]
So that's the idea of the progressive web apps platform. Before actually seeing a PWA in action, we are trying to bring the best of these two universes, the web, and the native world. From the web, we want everything that we love about the web. For example, links and the ability to discover content and services from different places.

[00:03:56]
It can be social media, it can be SEO, and finding content on Google. And we want that also in the PWA platform. And that we just copy and paste a link, or share the current URL with a friend, send that over a message, or WhatsApp, or Email, we can still do that in the PWA platform.

[00:04:23]
Also, deploying a website, it's actually simple compared with deploying a native app. For example, a native app for iOS or Android needs packaging. So you need to package your app. That includes of course, compiling the app first. So you compile, you package, you need to sign the app, you need to upload the app.

[00:04:45]
And for that you need a publisher account, and pay for that. And you need to wait for the QA team within the stores to actually test your app, and improve your app. So, on the web, you just deploy your files on a server, using Git. Or even if you want, classic FTP, or you copy the files in the server, that's all.

[00:05:11]
And that's all we need to publish a PWA as well because a PWA is a website. I'm going to repeat that a couple of times. And it's not just easy to deploy, it's easy to update. What happens if you find a bug in your website? You change the file, and you deploy that file only to the server, that's all.

[00:05:35]
What happens if you find a bug in a native app? You need to recompile, repackage, resign, re-upload. You need to wait for the QA team to actually check your app again. And also you need to wait for all your users to download the new binary package. And that takes a lot of time.

[00:05:55]
Well, in the PWA world, we have the same way to update a website, we just change the file. We upload a new JavaScript file, or a new CSS file, and that's all. And the other thing that we love, is that we can use standards, specs that we know, and every tool that we're used to.

[00:06:18]
I mean, if you like React, you can use React, ifyou like VJS, go ahead. Even if you like jQuery, you're gonna still use jQuery for PWAs. Anything that works on the web, works actually in a PWA. So all the tools that you know and love, are actually available in this platform.

[00:06:36]
But, here this is just the web, right? This is not enough. It feels like we need more. And that's what we're going to bring from the native universe to the PWA platform. And here, we're going to have offline access. Something that I don't wanna say it wasn't possible before but it was actually difficult.

[00:07:03]
If you have ever played with app cache or application cache that is currently deprecated on the web, it was actually really problematic. So, having reliable offline access to our web content, or web services, it's actually something that we're bringing from the native world. I mean, if you're offline, if you're on a plane without Wi-Fi, actually, you can open all your native apps.

[00:07:28]
Yeah, maybe not all of them will work completely, but at least they will appear, they will render their own user interface. And you won't see a message, never a message from the browser. Well, we want that also here, and we will get it. Also, we want an icon in the operating system, it can be the dock, the homescreen, the start menu, it depends on the OS.

[00:07:55]
And we want that icon to actually open, or open and stand alone experience that is outside of the browser, okay? So we don't wanna push the user to open the browser to use our web app. So we wanna be like a standalone app in the OS. And talking about OS, we also sometimes want some kind of integration with the OS and with the platform.

[00:08:21]
That can be push notifications, so sending messages when the user is not actually using the app. It can be opening links automatically in our app or it can also be changing the icon with a badge number, when something happens in the background. Well, we can actually get that also in the PWA world.

[00:08:46]
And finally, we want performance. And we want the user experience from the native world. Something that we heard a lot as web professionals is that some people think that the web is so slow. Or, if you create the web app, yeah, the experience will not look like an app, or it will be slow.

[00:09:09]
And we don't want that, we want a faster user experience. And for that, they think that native is the only solution. Well, with the specs and the new API that we're going to cover today, we can actually make a really good application that will perform as well as a native app, and it will have the same user experience.

[00:09:30]
So finally, we are getting the best of these two universes, the best from the web and the best from the native world. That's the idea of the PWA platform. So the question is how we compare the PWA platform with Flutter? Well, let me start saying this, Flutter, it's a multi target solution.

[00:09:53]
So from the Flutter source code, that is actually Dart, you can actually compile to an iOS native package, an Android native package, a desktop native package for Windows, Mac OS. And there are other platforms like smaller platforms, and also to a PWA. Actually Flutter today can target the web.

[00:10:15]
So you can actually get a PWA, a progressive web app from Flutter. I'm not saying that a lot of PWAs out there are actually using that technique, but it's actually possible. In terms of what's the difference, the difference is that when you go with Flutter, you actually need to learn some native design patterns.

[00:10:36]
I mean, you cannot use jQuery, you need to actually use Dart. And you need to understand their design patterns, and how they think app design. You cannot use HTML, you cannot use CSS even when you're targeting PWA. So, Flutter for the web, and that's the PWA solution, will create HTML and sometimes Canvas based coding from Dart, okay,?

[00:11:06]
So, no HTML, no CSS involved. And you cannot get all the advantages such as using your current toolchain, okay? And you cannot convert your current website into a PWA. And that's also something interesting. We are going to start the PWA from scratch today. But something really useful is that you can actually convert a website that you have into a PWA.

[00:11:33]
It's also possible, you don't need to start from scratch. And if you go with Flutter, you need to start from scratch, and learn Flutter first. So the question has to do with iOS. And this is a question that, we will see these a lot, probably during the day and also in the community.

[00:11:53]
So, we typically have a big elephant in the room, and that's Apple, iOS, and PWA support. So now we're going to talk about the state of the platform. So we're going to get deeper with that. To the question, if push notifications or app batch notifications are actually available on iOS.

[00:12:12]
Let me answer this, it depends on how you're going to distribute your app. If you're going to distribute your app with the browser only, and that's the default PWA implementation that we're going to see in a minute. As of today and of as iOS 15, we do not have support for push notifications.

[00:12:35]
However, the WebKit, source code, that is open source so we can actually check that. It has started to implement Web Push. We don't know if that will be shipped with iOS in the future or not, okay? But the WebKit, the engine behind Safari on iOS, is actually working on Web Push, so it may work.

[00:13:00]
However, as we mentioned before, a PWA can also be shaped in the App Store. And when your PWA then goes to the App Store, you can actually have web push and also batching. In that case, yeah, you will probably need to add some native code, but only on that specific situation.

[00:13:21]
Okay, make sense? But yeah, iOS will always be something that we need to always be careful about, okay?
>> Are you gonna cover using frameworks with PWAs at all like Angular or React?
>> So, in the bracket that we're going to do today, we are not going to use any library at all.

[00:13:48]
Because the idea is that this is building PWA from scratch. The idea is for you to understand the technologies that actually makes a PWA a PWA, and that you can add that to any library or framework. So you don't need to know react or Vue to actually make a PWA.

[00:14:08]
But, of course, you can have everything, the layers that we're going to see today, can be actually added to any app that you create with React, with Angular, with Vue, with with any framework, okay? Our project, we're going to start with that after seeing some PWAs in action.

[00:14:28]
Our project will be just Vanilla JavaScript. So it's just HTML, CSS and JavaScript.