File & URL Protocol Handlers

[00:00:00]
>> So also changing that same manifest file. You can express to the OS that you are a CSV reader or you are a PDF reader or a recipe reader. Let's say that we invented our own recipe format for our app, .recipe and you can say, hey OS, when there is a file in the operating system, .recipe I can open that file.

[00:00:24]
So you express that as a metadata in the manifest, and then from JavaScript, when you start your app, there is a launch queue. In that queue, you can consume that queue and you will receive possible files that the operating system sends you. It make sense. So then, when the user is in the Finder, or in Windows Explorer, or he's double clicking on our .recipe file, your PWA will open it.

[00:00:52]
That's it make sense? So then you're like any other native app, yeah.
>> What are like the pros and cons between using a PWA versus like Electron.
>> So if you're using Electron on desktop or PhoneGap or Apache Cordova on mobile, you have pros and cons, okay. So the PWA doesn't execute native code.

[00:01:16]
So you are under the umbrella of the browser, of the capabilities that we have been seeing today. So that's the pro and con at the same time. When you're using Electron, well first, Electron in particular, you're shipping your own Chromium browser with an executable, which means that your app even if it's a Hello World, will take 50 megabytes, all right?

[00:01:42]
So that's a disadvantage. And also it won't get the browser updates. So if you don't recompile your app and the user is not really updating your app, it will still be using an old engine, the ancient that you use when you compile that for the first time. With the PWA, also you get automatic updates.

[00:02:08]
If you change the files on your server, so if you deploy a new version of your app, users will get that silently. You don't need the user to update that or wait at night when the App Store is upgrading things. The con is that if you need a feature or a capability that we didn't mention today, you can't do that with a PWA alone.

[00:02:33]
You need to go to the store, or you need to create an Electron wrapper. So, in this case, we were expressing the ability or the need to handle a new kind of file. Also, we can do that with URL protocols. So this is useful, for example, you send an e-mail to the user.

[00:02:55]
Let's say we are doing a front-end master of PWA, and then I'm sending you an e-mail with a coupon or a hidden video that only you can see if you click on that link. Well, how can we open the PWA? Because if we click to frontendmasters.com, we will open the website, not the actual PWA.

[00:03:16]
Well, we can handle our own protocol. So instead of HTTP, the link can be something like frontendmasters://, okay? So in this case, the protocol handler lets you subscribe to one of the standard protocols such as mailto, tel, for a phone call. If you have ever seen a link to a phone call, it's tel:.

[00:03:42]
So you can subscribe to those, the standard ones, or if you wanna create your own customized protocol, it must have a prefix of web+, okay? That is just how they set up this. So in this case, it must be web+frontendmasters. And you define the URL pattern that you wanna load in the engine.

[00:04:04]
So you can say that, when there is a URL like that, you wanna go to a /watch on your web app for with an argument and that %s will be replaced by whatever comes after forward slash, forward slash. Example, this is how we will look like, if I wanna link to my Swift course, I do have a Swift course on iOS on Frontend Masters.

[00:04:30]
You can be web+frontendmasters:swift and that swift argument will be received by JavaScript in the path name. Actually in the query in the path. The path will be watch and the query will be argument=swift. Does it make sense? So no matter where in the OS you have a link to web+frontendmasters, your PWA will react.

[00:05:02]
That's protocol handler. So you can see here the integration with the OS. Because now, I'm not talking just about a website, an app, a native app, can actually trigger that link and it can open your PWA.