diff --git a/microsoft-edge/progressive-web-apps-chromium/how-to/best-practices.md b/microsoft-edge/progressive-web-apps-chromium/how-to/best-practices.md index 00c860347b..8bd1cd5a8c 100644 --- a/microsoft-edge/progressive-web-apps-chromium/how-to/best-practices.md +++ b/microsoft-edge/progressive-web-apps-chromium/how-to/best-practices.md @@ -105,7 +105,7 @@ See [Handle links to your Progressive Web Apps](./handle-urls.md) and [Handle pr ![Experimental feature](./best-practices-images/experimental-tag.png) -Create your own app widgets to display in the operating system widget dashboard such as the Windows 11 widgets board. +Create your own app widgets to display in the operating system widget dashboard such as the Windows 11 Widgets Board. See [Build PWA-driven widgets](./widgets.md). diff --git a/microsoft-edge/progressive-web-apps-chromium/how-to/widgets.md b/microsoft-edge/progressive-web-apps-chromium/how-to/widgets.md index 278dcc4bce..8efff57f29 100644 --- a/microsoft-edge/progressive-web-apps-chromium/how-to/widgets.md +++ b/microsoft-edge/progressive-web-apps-chromium/how-to/widgets.md @@ -6,19 +6,34 @@ ms.author: msedgedevrel ms.topic: conceptual ms.prod: microsoft-edge ms.technology: pwa -ms.date: 08/04/2023 +ms.date: 08/10/2023 --- # Build PWA-driven widgets Various operating systems have widgets dashboards that let users read content and perform tasks. Examples of this include Android Home Screen widgets, macOS Dashboard and Today Panel widgets, the Apple Touch Bar, Samsung Daily Cards, Mini App widgets, and smart watch app companions. -On Windows 11, widgets appear in the widgets board which you open from the left corner of your taskbar: +On Windows 11, widgets appear in the Widgets Board, which you open from the left side of the taskbar: -![The widgets board in Windows 11](./widgets-images/windows11-widgets.png) +![The Widgets Board in Windows 11](./widgets-images/windows11-widgets.png) In Windows 11, Progressive Web Apps (PWAs) can define widgets, update them, and handle user interactions within them. + +#### Requires building a custom widget for the PWA + +An existing PWA cannot simply be placed into the widget dashboard as-is, like you can with the Microsoft Edge Sidebar. Instead, you need to build a custom widget experience that's appropriate for the widget host, which currently is the Win11 Widgets Board. (There may be other widget hosts in the future.) The Win11 Widgets Board requires widgets to be built by using Adaptive Card templates instead of HTML and JavaScript, so the widget has to be designed separately from the rest of the app's UI. + +See also: +* [Build PWAs for the sidebar in Microsoft Edge](./sidebar.md) + +To build a PWA-driven widget and deliver it via the Microsoft store, no C++/C# code is required. Once you've produced the widget, and can successfully install and run the widget from a public endpoint, you can package the app by using [PWABuilder.com](https://www.pwabuilder.com) and ship the app to the Microsoft store without requiring any additional code. The PWA backing the widget must be installable from a public endpoint, because PWABuilder.com doesn't support packing apps from localhost. + + +See also: +* [Publish a Progressive Web App to the Microsoft Store](./microsoft-store.md) + + ## Install WinAppSDK @@ -389,15 +404,15 @@ PWAmp is a music player PWA demo application that defines a widget. The PWAmp wi 1. Go to [PWAmp](https://microsoftedge.github.io/Demos/pwamp/) and install the app on Windows 11. -1. Open the Windows 11 widgets board by pressing **Windows logo key + W**. +1. Open the Windows 11 Widgets Board by pressing **Windows logo key + W**. 1. Click **Add widgets** to open the **widgets settings** screen, scroll to the **PWAmp mini player** widget and add it. -1. Close the **widgets settings** screen. The **PWAmp mini player** is now displayed in the widgets board. +1. Close the **widgets settings** screen. The **PWAmp mini player** is now displayed in the Widgets Board. The PWAmp widget displays the current song and buttons to play the previous or next song. -![Windows widgets board, next to the PWAmp demo app. The widgets board contains the PWAmp mini player widget, showing the current song playing in the PWAmp app](./widgets-images/pwamp-widget.png) +![Windows Widgets Board, next to the PWAmp demo app. The Widgets Board contains the PWAmp mini player widget, showing the current song playing in the PWAmp app](./widgets-images/pwamp-widget.png)