Jun 1, 2020
How To Enable Experimental Features In Your Web App
No transpiling needed
Web apps are nowadays more capable than ever and can easily compete with native apps when it comes to features.
JavaScript is more powerful than ever and your browser is now equipped with stuff like geolocation, media capture and access to the sensors of your mobile device to name a few.
These are certainly exciting times.
The W3C develops new standards to be implemented by browser vendors and naturally, this takes time. I’ve always been a fan of experimenting with cutting-edge functionality so I’m really excited about Chrome origin trials.
Origin trials allow developers to try out new features and give feedback on usability, practicality, and effectiveness to the web standards community. These features are enabled for a specific origin through a token and a meta tag.
Enabling tomorrow’s features today
The process of enabling an experimental feature in your web app is quite simple.
You can find the feature you’d like to enable in the list of active trials. When you have found your feature, click “Register”:
Enter the domain (origin) for which you’d like to activate the trial, whether you’d like to include subdomains, the expected pageviews and agree to the terms:
After that, a token will be issued for the domain you have specified. Note that the token is for the specified domain only. When it’s included in another domain it will simply be ignored.
The above screen also shows until which Chrome version the trial will be active. In the subsequent version the feature will be available by default or will be completely removed.
So keep in mind that a feature may eventually not be shipped and therefore removed.
The token will currently be valid for 6 weeks and can be renewed when it expires, but you’ll need to provide feedback to renew:
Here you see the screen for the token I’m using for my PWA showcase What PWA Can Do Today.
Click the icon on the right to copy the token and add it to the HTML page of your web app where you’d like to enable the feature as a meta tag:
<meta http-equiv="origin-trial" content="[your token here]">
You can also configure your webserver to send a response header:
Origin-Trial: [your token here]
Your feature of choice should now be available in your web app.
You can add as many origin trials to your app as you like, but keep in mind that your app needs to be served over HTTPS and features are enabled on a per-page basis.
In a single page app you will only need to add it to your index.html but if you have multiple pages, the meta tag will need to be added to each page where the feature needs to be enabled.
To prevent large websites from becoming dependent on experimental features that may eventually be removed, origin trials have a built-in safeguard that automatically limit it globally if its usage exceeds 0.5% of all Chrome page loads.
How to test locally
Since a token for an origin trial is tied to a certain domain, it won’t work locally on your localhost.
To be able to test these experimental features locally, visit chrome://flags in your Chrome browser and search for “Experimental Web Platform Features”.
Click the button to enable and restart Chrome. The feature is now also available locally:
Microsoft Edge Origin Trials
Microsoft’s Edge browser recently started to support origin trials as well. The process is consistent with Chrome Origin Trials. At the time of writing there are only two active trials but the list is expected to be expanded soon.
Use At Your Own Risk
Origin Trials are a very exciting development to and enable developers to experiment with new features and provide early feedback for further improvement.
Keep in mind though, that these features can eventually be deprecated and removed so you need to make sure your web app doesn’t become too dependent on a feature.
There is however a pretty long list of completed trials that have brought exciting new functionality and have moved the web forward.