Check out a free preview of the full A Tour of Web Capabilities course

The "Origin Trials" Lesson is part of the full, A Tour of Web Capabilities course featured in this preview video. Here's what you'd learn in this lesson:

Max introduces origin trials, which allows developers to provide experimental APIs to a wider range of users. Rather than requiring users to enable a flag in their browsers, developers embed a token in a header or meta tag, automatically enabling the feature in Chromium-based browsers.

Preview
Close

Transcript from the "Origin Trials" Lesson

[00:00:00]
>> So we were talking about like green API's. That I was saying that most of those API's are chromium based. So Google Chrome and Microsoft Edge mainly, okay? There are one or two that are Safari only. But it's just the exception, not the rule. There we have yellow API's.

[00:00:18]
In this case, these API's are not yet mature. That means that, for example, they might change in the future. I mean, the API itself. The name of the function, how you use the API might change. And sometimes even today you have to enable a flag, developer flag, or subscribe into something known as an origin trial.

[00:00:40]
By the way in the web.dev, in this free book for you there is a section on experimental feature that explains more on on origin trials. Here you have this. But actually I want to show you this Origin Trials for Chrome and for Edge. This is an idea on Chromium, actually.

[00:01:02]
So it's not on Safari. On Safari, what you have, both Safari on iPhone and Safari on the Mac. If you go to the Develop menu, there is an Experimental Features sub-menu, for those of you on the Mac. Here, you can enable some features or some APIs that are still experimental.

[00:01:25]
So if you want to experiment with them, you can you go and enable that, okay? So you are you if you want to use it in your website, your users have to go and enable that okay. So it is just for playing, just for fun, not yet for production.

[00:01:40]
But origin, trials on the other on the other hand, is a different idea. Of course of chrome also have flag. So you can go to Chrome flags or edge flags, and also you can enable experimental features using a flag. This is like the Safari version. But something that is more interesting from the Chromium team is origin trials.

[00:02:05]
Why? Because sometimes testing your APIs in the lab, so in your computer, If it's not good enough. You actually need real users to use the feature to see how that works. If it's working properly or not, an origin trial is a way to do that. They do for you in trials, when you can, for example, in the Chrome or even trials link.

[00:02:31]
You can subscribe to an origin trial. Firefox also has origin trials now, that's kinda new, they don't have a lot. But what's the deal? You actually need to take part in an origin trial. What's that? You need to subscribe with a form. So you need to go to this website of active trials.

[00:02:55]
And you will see all the APIs that are available for trial. For example, let's say I will pick just one that we can understand. The Popover API. This is an API that can be used to build UI elements that are displayed on top of all the other web app APIs.

[00:03:13]
It's like a pop-up, but instead of using a div Like an API that will offer us like a pop-up within the same window, but more natively. It's new. It's until August 2023, the trial. So if you want to try this with your users, of course, your Chrome users.

[00:03:34]
You have to go here and register. So you select that one again, pop over API register, and what you need is your origin. What's your origin? Briefly, your domain. So I can go here and say. I want this from front and masters.com. If you have subdomains, you need to enable this.

[00:03:56]
How many pageviews? This is just for stats, so it's not going to make any difference. When you register this, you need to be logged in with your Google account. You will receive a token. I can even try this. I have an error, I need to add the HTTPS thing, register.

[00:04:19]
And what I have is a token. What do I need to do with that token? You can add a meta tag in your HTML or an HTTP header for your HTML. So from now on, if I add that meta tag, here you have a learn more to that explains how to add the meta tag, okay?

[00:04:39]
So users on Chrome, that they have a version supporting that origin trial, they will be able to use the API. So when those those user will get into your website into your origin, the API will be available. So that's an origin trial is a way to test on with real users, your API's.

[00:05:02]
But the original trial has an end date. That means that at that point, that API will not be there anymore. There are two possibilities, actually, three possibilities. The API after the trial ends may be shipped as an stable API. Maybe they're going to iterate on that, so they will change the the spec.

[00:05:24]
They will change the API and they will create another origin trial. Or maybe they say, you know what? It doesn't work, we do not like it. We didn't have enough feedback. So we're going to remove that. So that API will never reach stable. Okay, but have in mind that if you want to be on the edge of capability API's ,you can always get into this website and see what's there.

[00:05:51]
And by the way, as I mentioned, it's not just Chrome. You also have Edge that are doing a lot of origin trials on mostly for Windows. So they are focusing on adding more features on desktop. On desktop PWA, so they have some specific origin trials that are just for Edge as well.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now