Hello dual-screen web developers!

Earlier this month, we shared details on how you can build dual-screen web apps using the web APIs built-in to Microsoft Edge and Chrome. The Microsoft Edge team followed up with a more detailed explanation of the CSS and JavaScript APIs. These APIs are still in preview and require you to enable them via edge://flags in Microsoft Edge on the Microsoft Surface Duo. Origin Trials lets you selectively enable the preview features for your websites without any customer configuration. This blog post will explain how to configure an Origin Trial for the dual-screen APIs on the Surface Duo.

Set up a dual-screen Origin Trial for your website

Origin Trials enable preview features in Microsoft Edge for specific websites or pages by registering your domain and adding a token to your HTML or HTTP response headers. Part of the trial is getting your feedback on how the features are working for your scenarios. The Origin Trials documentation explains the process of registering for a trial, which requires a GitHub account, and how to provide feedback.

To sign up, visit the Origin Trials Developer Console and scroll down to the Dual-screen and foldable devices CSS and JavaScript primitives trial:

Choose Register > and sign in with GitHub. The only information required is the domain of your website and an estimate of the amount of traffic you expect.

After you’ve registered for the trial, return to the Developer Console and choose See my registrations to retrieve your token:

You can add the token to individual web pages via a META tag:

<meta http-equiv="origin-trial" content="replace-with-your-token">

Or you can configure your web server to set an HTTP response header:

Origin-Trial: replace-with-your-token

Once configured, any Surface Duo user who visits the page or site will have the dual-screen CSS and JavaScript APIs enabled and be able to experience dual-screen responsive web designs. I’ve added an Origin Trial token to this sample page so all Surface Duo customers will get the dual-screen layout on their device:

Your feedback is important

Origin Trials is an experimentation framework that lets you, web developers, selectively make an experimental API available for your website in production or dev environments without any feature-flag configuration.

Now is a perfect time for you to experiment with dual-screen APIs while they are still in preview, and give us feedback about any issues you had integrating them in your websites as well as how your customers responded to this new experience. We are working closely with our colleagues on the Microsoft Edge browser team and committed to making sure the web developer voice is the most important voice in the Web APIs standardization process.

Your Origin Trials tokens expire in 6 weeks, but can be renewed by providing feedback on your experience. The developer portal will email you to prompt for feedback prior to the expiry date and will issue a new token after feedback has been entered.

Resources

We look forward to your participation in the ongoing development of the dual-screen web experience. The Microsoft Edge team would love feedback either by opening an issue on GitHub or alternatively, you can reach out to us on Twitter (@_zouhir or @MSEdgeDev).

The Surface Duo Developer Experience team is also keen to hear about your dual-screen development web developer experience and answer any questions you have about building apps for the Surface Duo. Start a conversation using our feedback forum, or message the team on Twitter @surfaceduodev.