Web App Manifest

[00:00:00]
>> Maximiliano Firtman: Let's cover the basics of the web app manifest so that we can go and start coding. So the web app manifest is kind of the heart of a progressive web app, okay? So if you don't have a web app manifest, you don't have a heart, okay, you are not a PWA.

[00:00:15]
It's a JSON file that defines all the metadata that will help the browser and the OS to install the app and have integration into the operating system. Actually, it's a W3C spec, so it isn't a standard, okay? That's why all the browsers are currently using it. It is a JSON file, already mentioned that.

[00:00:39]
But typically, we don't use the JSON extension. To be honest, if you check on current PWA is probably more than half of the PWAs are calling the file manifest JSON, but the official word is to use the extension.webmanifest. And that also comes to the MIME type for the content type, when you set up your server, it should use application manifest JSON, but it accepts anyway, application JSON as well.

[00:01:15]
And that's important, we have to link the file from the HTML. In which HTML? Actually, all the documents, if you're a multi page application, so you have multiple HTML files, you actually done all of them. Because the installation option will appear only if the current document that the user is browsing has the manifest link, okay?

[00:01:43]
You add the link just with the link element, as with CSS style sheets, but the rel says manifest, that's the difference, okay? So it's pretty simple. This one is really important, because some people think that if you have an origin domain, is one origin, one PWA. But actually, you can have more than one installable web app or PWA in the same origin.

[00:02:10]
If you point to different web app manifest files, and typically, when you do that, you'll have different folders. I mean it's not mandatory, but it sounds like a good idea. And that allows to a pattern that is not possible or is too expensive to apply in the App Store micro-apps.

[00:02:28]
Have you heard about micro-apps? It's kind of a business design pattern for apps that is being used a lot in China for example. Not probably in the Western world, but with PWA, you can do that, let me explain that. Let's go back to the coffee store, or let's talk about Starbucks, like a big branch.

[00:02:53]
You have a one Starbucks app, right? And then you pick the store, when you're there. What if you can install one app per store? So when you open that, it's the Starbucks that near home, Starbucks near work. So it already knows where do you wanna order, okay? Or even, we can go even further.

[00:03:18]
You can have the app for one specific soda machine. Each soda machine can have a QR code pointing to a domain. Forward flash, or an ID, and each ID can be a different app, then you install the app. It's a micro-app, it's an app to engage directly with that particular device.

[00:03:45]
In app that I need to connect or select or find by geolocation. No, no, I'm already pointing that. And this is free for us, we don't have a cost, we can create infinite apps. Just changing the arguments of the manifest, we can create infinite apps and again, in the App Store is not so simple.

[00:04:09]
I mean, think about this, if you are Yelp or an app that serves different businesses, right now you're offering the business to be in your app, but it's a Yelp app. But with the PWA, you can offer each of your business clients to have their own app. And you call that once.

[00:04:33]
>> Speaker 2: Going back to the example of the soda machine, so do I understand correctly that the workflow would be the user scans a QR code on that particular [INAUDIBLE] machine?
>> Maximiliano Firtman: Or you have an NFC tag with a URL, that's another option.
>> Speaker 2: And then on the soda company's server, there's a .webmanifest file that's generated on the fly using like templating to put in specific text.

[00:04:59]
>> Maximiliano Firtman: That's one option, yeah.
>> Speaker 2: Okay, yeah.
>> Maximiliano Firtman: Or you can have a statically generated all the manifest file for all the machines, or you can dynamically generate it on the fly, it's up to you.
>> Speaker 2: You could have a static site generator?
>> Maximiliano Firtman: Yeah.
>> Speaker 2: For web manifest generator, geez, all right cool.

[00:05:15]
>> Maximiliano Firtman: Yeah, that's correct.
>> Speaker 2: Thank you.
>> Maximiliano Firtman: So and again, this adding is like thinking out of the box now, it's not just cloning, what I'm doing for the App Store. I can actually think on other ideas with this platform that are not the normal that we found there, so we can create micro-apps.

[00:05:36]
They can have push notifications, they can be isolated from other micro-apps with everything that we mentioned or we will do, but just for very small things. Maybe the HTML is just a button, or something like that.