PWAs as Desktop Apps

[00:00:00]
>> So, I'm here with Google Chrome for desktop. And I'm on a Mac, but it can be also a Linux, a Chromebook device, or a Windows device, from Windows 7, okay? So I just need to go to a URL that has a PWA inside. Many apps, it can be a Starbucks.

[00:00:20]
Even it can be, for example, Amazon Luna or Google Stadia for cloud gaming, they are PWAs. But I will try YouTube music. It's music.youtube.com, it's a PWA. And how do I know it's a PWA? Well, actually, after a while, if you look at the URL bar, you're going to see a new icon that will appear.

[00:00:45]
Actually, the browser is making some tests and we're going to talk about that in a minute. If the test passes, you will see this icon that says Install YouTube Music. And also in the menu, you will find Install YouTube Music. If at this point you're asking, hey, who is going to know that?

[00:01:04]
Well, give me a second because I will show you another example that looks better. If I click on Install YouTube Music, I have a nice native dialog saying, do you wanna install the app, YouTube music? And I can click Install, and it will actually install my app. Before actually doing that, let me show you another example.

[00:01:23]
That if you're a web designer or web developer, you will probably like this PWA. It's called Squoosh. It's squoosh.app. It's actually an image compressor, so you can actually drop a PNG, even an animated GIF, and it can compress that and convert that into a different format or a more compressed PNG or a WebP file.

[00:01:48]
If you look at within the UI at the top right, we have an Install button. This is actually not a native button, it's HTML. I just wanna show you this is just a button, okay, an HTML button. Well, actually, so within the user interface of your PWA, you can have a button.

[00:02:13]
And if I click there, it actually triggers that native dialog. And if I now install Squoosh and also I can install YouTube Music, what will happen is now we are going to have standalone apps from YouTube Music. And Squoosh, and they have their own window, they appear in the alt tab or common tab YouTube Music, Squoosh.

[00:02:41]
They appear in the search, meaning if I search for a Squoosh, I have the app. In Windows, they appear in the Start menu as any other app. And now it has its own window, and you can see at the window, it's actually separated from Google Chrome, from the browser.

[00:02:59]
And that's kind of the idea of how the PWA installation looks like on desktop. And also you can see we have other options here such as on YouTube Music, we have a back button. So I can click here this is Adele, I think. We don't need to hear that.

[00:03:16]
And we have a back button. We have a reload button. And, of course, this is music so we can actually have background audio working here as well. And over the title bar, we have also a way to see all the extensions, the Google Chrome extension. And there is a menu where you can actually copy the current URL because it's still the web.

[00:03:41]
You can open this in Chrome, you can uninstall the app or you can access some, it's like a mini menu from the browser, okay? So this is different on Android, on iOS, iPadOS, or desktop. It depends on the iOS. How the window is render is different. But on both you can see that now we have a different color for the title bar, Squoosh has this kind of pink there.

[00:04:07]
So we're going to see later how we can set up these colors and these metadata for our apps. And it's a window, so its responsive design will actually respond here as a normal website. With one specific thing that we need to have in mind, is that we have something known as a mini mode, that was not available on the web.

[00:04:30]
We can actually get really small with PWA standalone windows. So for example, YouTube Music when you are in the mini mode, just renders controls, just that. This mini mode is actually smaller than the smaller window that you can get in the browser. So it's kind of a new breakpoint for your responsive design that you need to take care of.

[00:04:55]
We have a question about the camera APIs. If they're better or not compared with in the native world. Well, let's see, if you wanna take a picture or if you wanna record a video, you can actually do that on every platform, iOS, Android, iPad, and desktop. If you wanna get more control of, for example, the zoom level or some internal settings of the camera, you have some of that on Android only, on Google Chrome on Android, okay?

[00:05:27]
Because there is an API to actually get some more advanced settings. And also some of the settings are coming to desktop. So think about this, most of the things, the pandemic, a lot of tools appear to actually do meetings, online meetings. So every tool that you see typically on Zoom, Meet or Teams, it's actually coming to the web.

[00:05:51]
So Chrome is probably the leader here. So on Chrome APIs, you have most of the abilities that you have also in the native world. And on Safari, typically it goes a little behind, but for basic camera management, it works. I mean on iOS you can also for example, pick if you want the selfie camera or the biomental camera, so you can actually select that, that works.

[00:06:17]
But if you want more control, like fine control, yeah, you probably need to go native, okay? But for video calls, it just works. There are many PWAs that are actually based on video calls, and they work pretty well, starting with Google Duo, following with Apple FaceTime. So now with FaceTime, it's an Apple application.

[00:06:43]
But now you can start the session in FaceTime and share a URL with a Windows user or with an Android user. And in that case, it's a PWA created by Apple. So FaceTime has a PWA. Also there is a good one, it's called desktop.com, it's app.desktop.com, that's the URL of the PWA that you can actually try and see the camera use such that they have over a PWA.

[00:07:13]
And it's just a pure PWA. The question is about the process, and how that works, in terms of are we talking about the same process as the browser? On desktop, we should say that, yes, it's the same process. So when you have a PWA, if you kill the browser process, it will also kill your PWA.

[00:07:34]
So because we are still a website, this is not like if you have heard about things like electron, in electron, it's like a hybrid, like PhoneGap for desktop. In that case, when you compile an Electron application, you're shipping your own browser engine, your own web rendering engine. We're not doing that on the PWA side, with advantages and problems.

[00:08:02]
So one of the problem is that if you close or if you kill the Chrome or the browser's process, you're also killing the app. It's not typical use case, but, yeah, it might happen. The advantage is that we are not consuming more memory, because it's the same rendering engine.

[00:08:19]
And most users always have that browser opened. So we're not consuming more resources from the desktop. Another great advantage, really great advantage, is that because it's actually the same process, you can share cookies, store ASH, IndexeDB, data between the browser and the PWA. Because it's actually the same thing.

[00:08:50]
So these windows that we have here are actually like a browser tab, but outside of the browser. In fact, we can also create, you can see that I'm in YouTube Music that looks like any other Mac application with its own menu. I can great the new window, so I can have two YouTube Music windows, okay, for example.

[00:09:10]
And if I sign in, I'm going to sign in on both, because it's actually the same as the browser. So we have a better goal question, can we control the minimum size of the window? And I will make it a browser question. Can we set up the preferred size of the window or the position of the window?

[00:09:32]
Actually today, the specs that we're going to cover later don't have that support. So we cannot set in some place a minimum. However, we can use some APIs that has been in the web since the 90s, since I ever started doing web development, that works pretty well here.

[00:09:53]
So it's just some global functions and variables that we have available in the Window option. So we can resize the window. Because we are in a standalone window, we have the power to do that. With tabs and browsers, typically we cannot change the browser window size. But because this is our own window, we can actually learn from JavaScript.

[00:10:20]
With just simple call, we can resize, we can reposition the window. So if the user goes beyond a size that you define, with JavaScript and listening to the resize event, you can actually go back to your minimum. So using some JavaScript, you can actually make that work. Here you can see a Windows PWA.

[00:10:46]
So trivago for a hotel search. You go to trivago on Windows, you install the app, and now that app is available on Windows as with the Mac, and that app will be resizable. And also it's going to be available in the third menu like any other app on Windows.

[00:11:05]
Just remember this is, this is not just on the latest Windows. This is the Starbuck's PWA running on Windows 7. For those of you working with enterprise customers. So this is something new, that it's actually pretty cool. So if you have ever worked with these corporate customers like banks and financial companies, they typically don't have permission.

[00:11:34]
Users don't have permission to install apps. They can just use the browser. And those were actually probably their responsibles of i.e., still been here with us, because they cannot install other browser. But let's say that era has ended. So today, they typically have Google Chrome or Microsoft Edge.

[00:11:55]
Well, even if a user cannot install native apps, they can install PWAs. Because it's actually a browser's process. So if a user, corporate user, has permission to install the browser, to use the browser, they have permission to install PWAs. So when you do corporate applications, you can actually deploy, deploy in quotes, because we are not actually deploying an app, we are deploying a website.

[00:12:25]
But we can deploy corporate apps without the intervention of the security teams within that company. So today, this is global stats worldwide, installation can happen in 86% of the use of browsing the web. So let's say that roughly nine of ten users that are actually visiting your website can actually install a PWA.

[00:12:56]
And when we check offline support, it's 93%, but 86 can install the app. Probably you're thinking here, okay, where is the rest? So why we still have like 10% of the users without support? Well, we do not have support or plans to support from an Android Facebook. And probably you're thinking Facebook Max, that's not the browser.

[00:13:28]
But actually, I'm not sure. When I'm saying Facebook, it's Facebook the company, it involves many products including Instagram and even Messenger. When you click on a link on those apps, by default, that link is rendered in an inner browser, not actually in the real browser. And that's called the Mobile Facebook Browser.

[00:13:54]
Well, PWAs are not compatible with that situation. And again, when I'm saying not compatible, that doesn't mean that your content won't be rendered, because it's a website, okay? And later we're going to talk about the P, the first letter in PWA has to do with progressive enhancement. And the whole idea is that if one ability, one capability is not available, anyway, the basic content will work.

[00:14:23]
On iOS and iPadOS, it doesn't work on any other browser that is on Safari and it doesn't work on the Apple Watch. The Apple Watch has a browser, but it's not supporting the technology for PWAs. And why Google Chrome or Firefox or Edge on iOS are not supporting PWAs, that's an Apple decision.

[00:14:46]
So those browsers are actually not what you think they are. So Google Chrome on iOS, it's not actually Google Chrome. It looks like Google Chrome. It has the Google Chrome icon. You can synchronize your bookmarks with Google Chrome, but the rendering engine is actually Safari, WebKit to be technically accurate.

[00:15:10]
So is the WebKit WebView. Well, PWAs are not available there. And Firefox on desktop and Opera on desktop, they do not support PWAs installation. They do support PWA installation on mobile. And Safari on the Mac is also not suitable for installation at this point. So Safari on iOS only.

[00:15:35]
And finally, also in talking generally, we don't have support in Smart TVs, Smartwatches, Game Consoles, or XR Headsets, that's augmented reality or virtual reality. There are some exceptions to that, such as the Hololens or the Xbox, that through the store, not through the browser, but through the app store, you can actually deploy or distribute a PWA.

[00:16:03]
And Facebook has also announced that they will support PWAs in the Oculus platform later.