Requirements for Installation

[00:00:00]
>> Maximiliano Firtman: Let's start creating a PWA. Let's first talk about the components of a PWA. So what's a PWA? What do we need to create a PWA? We need a web app, any web app, any website. Actually, it can be a website, not really a web app, okay? A web app manifest, that's something new.

[00:00:21]
So we will start talking about that. We need a web app manifest, and sometimes we need a service worker. Why I'm saying sometimes, because I mentioned that this service worker is the one that will make our app offline capable. And now it's kind of optional. So it's becoming optional, okay?

[00:00:41]
So the concept is changing with time, and it's becoming more flexible. As I mentioned before, initially, eight years ago, it was heartbreaking that you have to have a service worker. Now, if you don't have it, it will work anyway, okay? So that means that we have some kind of levels.

[00:00:59]
We have a full level. That means you're doing nothing. Actually, I'm not sure if you know this, but if you have done nothing for your website, something that is also underused, on desktop, you can install it as an app as well. I'm not sure if you know that.

[00:01:17]
So let me get out of here for a second. So If I go to Wikipedia, that is not a PWA, I can take any article. No let's take anyone that is not political, Paramount Pictures. And I can go here, Save and Share. I don't have the normally installed.

[00:01:37]
I have a new one, this is new, Install Page as App, on any html. When you do that, it kind of creates a PWA, even if it's not a PWA. That's why I can't change the title because, okay, how do you wanna call the app, okay? Okay, Paramount wherever, paramount PWA.

[00:01:59]
Okay, Install. So is it a PWA? Well, not really, but now we have some basic support on desktop only. On Android, you can add to the home screen and it's bookmark, and it's not open as an app, okay? It's a link, a bookmark to the browser. So if I install this, now, I have a PWA for Paramount PWA, pointing to that URL.

[00:02:25]
You can see there are some differences. For example, we have the back button and the reload that wasn't there before, why? Because they know that this is not a PWA. So they wanna offer us a minimal user interface, so we can navigate here, because if not. And when we are getting out of the initial HTML, we are seeing this bar here saying okay, now, we are not in the initial HTML you added as an app, it's a different one, okay?

[00:02:55]
But you can continue navigate and go back. And it took the favicon, okay, as of the app icon. So that's kind of a basic level that you already have. But yeah, if that's the case, we can end the workshop here, right? But there are more that we can do for.

[00:03:19]
For example, we can provide some basic metadata, change the icon, define the title for when you install this. So we can provide something else. We can also pass something known as a PWA criteria. So passing the PWA criteria is kind of saying, okay, I'm a PWA, I have the badge.

[00:03:40]
I'm a PWA, okay? And then you can go into a full offline experience that now is not mandatory, but it's the one level, okay? So the criteria is defined by the browser. If passed, there are hints, banners, dialogs, or bars explaining to the user that the current web app is installable, and it will invite them to install it.

[00:04:06]
It depends on the browser, but, for example, on Firefox on Android or other browsers will actually, when you pass the criteria, they will render this banner at the bottom, add this to the home screen. Or they would add a bar as the one that we saw on desktop in the URL bar.

[00:04:26]
They add a menu item that says install these apps. Or it will let you add your own button. But for that, you need to pass the criteria. If you don't pass the criteria, maybe the user will be able to install your app anyway, but the user will receive no hints that the app decides it's installable, okay?

[00:04:48]
Make sense?
>> Maximiliano Firtman: For example, on Safari on iOS, the installability criteria means that you need to include metadata with the app's name, icons, and we will see how to do that, and the start URL. What's the start URL? We will get there, but it's a property that we can define.

[00:05:06]
And display mode, we'll get into that later. On Safari on the Mac, actually, that's the requirement, installability criteria. So nothing, there are no requirements. On Safari on iOS, you can install any website as a web app. Add to log, it will just work. For Chromium, that's Chrome, Edge on Android and also desktop, the web app shouldn't be already installed.

[00:05:37]
This is interesting. Remember on iOS that we saw two icons for Squoosh. On IOS, Apple can let you have more than one. And each icon, let me show you that back again.
>> Maximiliano Firtman: I have two Squoosh here. I can add as many as I want. And something interesting happens, not with Squoosh, but with this other PWA that someone told me, okay?

[00:06:07]
So you can add to the home screen two Tinders. And if you remember Steve Jobs, every app is a sandbox. So you can have two Tinder accounts, one for work, because I think it has to do with work, and one for person. So on iOS, but that's iOS only, on iOS, each PWA that you install, each PWA that you install, it's a sandbox.

[00:06:34]
It's isolated from Safari. It's isolated from other PWAs, even if it's the same PWA. That's kind of an iOS unique thing. And Apple is actually saying that this is a feature, not a bug, okay? They say that for that, you can separate your personal life with your corporate life.

[00:06:54]
It's interesting because they don't have that on native. They have that on web apps. On Chrome, on the other hand, if it's already installed, it's not going to be installed again, so you won't be offered the installation, okay? So only one, and also the storage is share between the browser and the singleton install app, the only install app that you have is shared.

[00:07:16]
So you cannot have two users, okay? It should be on HTTPS. That's kind of default now these days. You should meet some basic engagement heuristic. So what is this? The idea is that if you're opening a URL in the background, you're not actually seeing the PWA, you're not touching or scrolling or doing nothing, you won't see any message.

[00:07:42]
So it takes some seconds to see if you're actually really interacting with the website, okay? And you should include also the metadata with the name, icons, the start URL and the display mode. That is kind of the same as in Safari, okay? So that's the installability criteria. For Firefox, Android only, the web app shouldn't be already installed on HTTPS and the metadata.

[00:08:07]
So it's actually pretty similar to Chrome on Android only. Remember, Firefox only supports PWAs on Android, okay, cool? On mobile, if you don't meet the basic criteria, standalone installation won't happen. So if you try to install, the maximum you can get is an icon, but pointing to the browser, so a bookmark.

[00:08:30]
On desktop, there are ways to install them as web app, as we saw before, that I can install any website these days as web apps.