You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
**Note:** Support for the `widgets` manifest member and associated JavaScript APIs, documented below, is experimental and depends on Microsoft Windows functionality that's not widely available yet.
16
-
17
13
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.
18
14
19
15
On Windows 11, widgets appear in the widgets board which you open from the left corner of your taskbar:
@@ -24,39 +20,15 @@ In Windows 11, Progressive Web Apps (PWAs) can define widgets, update them, and
1. In the **Search flags** text box, type **Web App widgets**, and then in the **Web App widgets** dropdown menu, select **Enabled**:
40
-
41
-

23
+
## Install WinAppSDK
42
24
43
-
1. In the **Search flags** text box, this time type **Experimental Web Platform Features**, and then in the **Experimental Web Platform Features** dropdown menu, select **Enabled**:
44
-
45
-

46
-
47
-
1. Click the **Restart** button, which appears in the lower right.
48
-
49
-
#### Enable widgets for your users
50
-
51
-
To enable widget support in Microsoft Edge for users of your production PWA, enroll your site in the [Web App Widgets](https://developer.microsoft.com/microsoft-edge/origin-trials/web-app-widgets/registration/) origin trial.
52
-
53
-
To learn more about origin trials, see [Enroll your site in an origin trial](./origin-trials.md#enroll-your-site-in-an-origin-trial) in _Experimental features and origin trials_.
25
+
To enable developing widgets on your local machine, install [WinAppSDK 1.2](/windows/apps/windows-app-sdk/older-downloads#windows-app-sdk-12).
widgets are defined in your PWA manifest file, by using the `widgets` manifest member. This manifest member is an array that can contain multiple widget definitions.
31
+
Widgets are defined in your PWA manifest file, by using the `widgets` manifest member. This manifest member is an array that can contain multiple widget definitions.
60
32
61
33
```json
62
34
{
@@ -413,10 +385,14 @@ async function updateWidget(widget) {
413
385
414
386
PWAmp is a music player PWA demo application that defines a widget. The PWAmp widget lets users visualize the current song and play the previous or next songs.
415
387
416
-
1. Follow the instructions in [enable widgets in Microsoft Edge](#enable-widgets-in-microsoft-edge).
388
+
1. If not done yet, install [WinAppSDK 1.2](/windows/apps/windows-app-sdk/older-downloads#windows-app-sdk-12).
389
+
417
390
1. Go to [PWAmp](https://microsoftedge.github.io/Demos/pwamp/) and install the app on Windows 11.
391
+
418
392
1. Open the Windows 11 widgets board by pressing **Windows logo key + W**.
393
+
419
394
1. Click **Add widgets** to open the **widgets settings** screen, scroll to the **PWAmp mini player** widget and add it.
395
+
420
396
1. Close the **widgets settings** screen. The **PWAmp mini player** is now displayed in the widgets board.
421
397
422
398
The PWAmp widget displays the current song and buttons to play the previous or next song.
0 commit comments