Test the API today by registering to the origin trial

1. Go to the WebAppInstallation origin trial page, sign-in with your GitHub account and accept the terms of use.
2. Add your website's domain name to enable the Web Install API origin trial for that domain.
3. Copy the token string:
4. Add the following meta tag to your website's HTML code:
   <meta http-equiv="origin-trial" content="[paste the token here]">
   You can also send the origin trial token as an HTTP server response instead:
   Origin-Trial: [paste the token here]

Or test the API locally only

1. Open a new tab in Microsoft Edge and go to the edge://flags page.
2. Search for "Web App Installation API".
3. Change the flag's default value to Enabled and then restart the browser.

Let us know what you think

Integrating your app smoothly with user workflows

Enable App Actions in your Microsoft Store PWA

1. Define an Action manifest. The manifest describes each action in a simple JSON file.
2. Setup a custom protocol handler. So that the App Actions runtime can launch your PWA through a protocol URI.
3. Setup your app as a share target. So that the App Actions runtime can pass input data to your PWA.
4. Package your app for Microsoft Store with PWABuilder.

Supercharge your users’ productivity

1. Default sidebar on every site: Set a default sidebar to display consistent content or extensions across all opened tabs. Default values persist across sessions, ensuring a seamless experience. Find the sample code available here.
2. Sidebar enablement on specific sites: Make your extension to open in the sidebar on a specific site using sidepanel.setOptions(). Customize the experience for your users based on their preferred websites.
3. Switching to a different sidebar: Welcome your users with a dedicated sidebar using runtime.onInstalled(). Seamlessly transition to the main side panel when they navigate to a different tab. It's all about providing a personalized touch.

Enabling your extension as a sidebar extension

{ 
  ... 
  "side_panel": { 
    "default_path": "sidepanel.html" 
  }, 
  "permissions": [ 
    "sidePanel" 
  ] 
  ... 
}

Learn more and get started

Developer options for sidebar experiences

Feedback and Discussion

Learn to use the Window Controls Overlay

• the required Manifest change,
• the new titlebar-area-* CSS environment variables,
• and the new navigator.windowControlsOverlay JavaScript API.

Opt-in to the feature with your Manifest

{
  "name": "App name",
  "description": "App description",
  "lang": "en-US",
  "start_url": "/",
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display_override": [
    "window-controls-overlay"
  ]
}

Adapt to the environment with the titlebar-area-* CSS variables

header {
  position: fixed;
  left: env(titlebar-area-x, 0);
  top: env(titlebar-area-y, 0);
  width: env(titlebar-area-width, 100%);
  height: env(titlebar-area-height, 30px);
}

Detect when changes occur with the navigator.windowControlsOverlay API

if (navigator.windowControlsOverlay) {
  navigator.windowControlsOverlay.addEventListener('geometrychange', () => {
    const { width } = navigator.windowControlsOverlay.getTitlebarAreaRect();
    document.body.classList.toggle('narrow', width < 250);
  });
}

• the new Apps hub,
• a redesigned Apps page,
• and the upcoming Apps sync feature!

The Apps hub

The Apps page

Syncing apps

1. Core concepts
   1. Introducing PWA
   2. Deconstructing PWA
   3. Make PWA installable
   4. Make PWA reliable
   5. Make PWA work offline
   6. Make PWA capable
   7. Developing PWA
2. Advanced capabilities
   1. Introducing the advanced capabilities of PWAs
   2. Creating application shortcuts
   3. Sharing content from and with your app
   4. Displaying content more like an app
   5. Caching your app data
   6. Synchronizing app data in the background
   7. Notifying your users of updates
3. Developer tools
   1. Get-started tools – Part 1
   2. Get-started tools – Part 2
   3. Debugging tools – Part 1
   4. Debugging tools – Part 2
   5. Auditing tools
   6. Test automation tools
   7. Packaging tools
4. Platforms and practices
   1. Installability of PWAs
   2. Best practices for PWA engagement
   3. Distributing your PWA
   4. Best practices for PWA reliability
   5. PWA maintainability – Using web components
   6. Best practices for PWA authentication
   7. Best practices for PWA UI/UX

• #30DaysOfPWA on Twitter 
• The blog series on dev.to, and PWA tag on dev.to. 

Benefits

How-to

Example

"protocol_handlers": [
      {
        "protocol": "web+pwinter",
        "url": "index.html?colors=%s"
      }
    ]

Feature Support

Related feature

Microsoft Edge Add-ons

Edge on Linux

Tooling

Progressive Web Apps

WebView2

Get in touch

• WebView2 is generally available and is now included with WinUI 3: Over the last year, WebView2 has become generally available and is supported across app frameworks like Win32 C/C++, WPF/WinForms, and now WinUI 3! WebView2 is Microsoft’s embedded web control, built on top of Microsoft Edge (Chromium). WebView2 is decoupled from the Windows operating system and lets you combine the ease and agility of developing for the web with the power of building a native desktop application. Whether for web, hybrid, or native apps, WebView2 treats these supported app frameworks as first-class citizens so you can bring the best of the web to your apps.
• Morgan Stanley embraces WebView2 to help future-proof their technology: Since we started working on WebView2, Morgan Stanley has been a close partner in giving feedback, helping us to ensure WebView2 is meeting business needs. By adopting WebView2, Morgan Stanley has given their employees the power of native app experiences combined with the latest web app technology. Using WebView2 keeps that web technology evergreen with updates and security, which was something that their previous Chromium containers solution couldn’t do.
• WebView2 Runtime is more broadly available to power WebView2 apps: Whether you plan to develop WebView2 apps in a fixed or evergreen state, you’ll need the WebView2 runtime to support them. To support your WebView2 apps, we’re making the WebView2 Runtime available in more places—for example, through dedicated installers and future Windows releases—so that it’s ready for use by you and your users.

• 5,300 Chromium commits accepted: Making the web better for everyone is essential to our mission for Microsoft Edge. Since launch, we’ve had over 5,300 commits accepted back into the Chromium project so that many of the improvements we’ve worked on for Microsoft Edge can be experienced by others using a Chromium-based browser.
• Edge Origins Trials continue, and expand: Announced last year and embraced by the developer community, our Edge Origins Trials program continues to offer new experiences for developers to test and preview—join hundreds of other developers in an Origin Trial by registering through https://aka.ms/EdgeOriginTrials.
• PWAs join the Microsoft Store: Progressive Web Apps (“PWAs”) built on the Microsoft Edge platform are now available in the Microsoft Store, and yours can be too! Broaden the reach of your PWA in 3 easy steps:

1. Create an app reservation in the Windows Partner Center
2. Package your PWA for Windows with www.pwabuilder.com
3. Submit the package to the Microsoft Store for approval

Microsoft Edge takes performance to the next level

The future of Internet Explorer is in Microsoft Edge

Enjoy Edge at Build

• Hear Jeff Teper discuss WebView2 in the Build the next generation of collaborative apps for hybrid work session, airing first from 9:30AM – 10:00AM PDT on Tuesday, May 25^th. Don’t worry, this session repeats multiple times!
• Pose your questions directly to our team during the Ask the Experts: Microsoft Edge session from 3:00PM – 3:30PM PDT on Wednesday, May 26^th.