Skip to content

Commit 4ccbe7b

Browse files
committed
Install WinAppSDK, delete pngs
1 parent f00d4cf commit 4ccbe7b

3 files changed

Lines changed: 14 additions & 3 deletions

File tree

Binary file not shown.
Binary file not shown.

microsoft-edge/progressive-web-apps-chromium/how-to/widgets.md

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ ms.author: msedgedevrel
66
ms.topic: conceptual
77
ms.prod: microsoft-edge
88
ms.technology: pwa
9-
ms.date: 08/03/2023
9+
ms.date: 08/04/2023
1010
---
1111
# Build PWA-driven widgets
1212

@@ -19,10 +19,16 @@ On Windows 11, widgets appear in the widgets board which you open from the left
1919
In Windows 11, Progressive Web Apps (PWAs) can define widgets, update them, and handle user interactions within them.
2020

2121

22+
<!-- ====================================================================== -->
23+
## Install WinAppSDK
24+
25+
To enable developing widgets on your local machine, install [WinAppSDK 1.2](/windows/apps/windows-app-sdk/older-downloads#windows-app-sdk-12).
26+
27+
2228
<!-- ====================================================================== -->
2329
## Define widgets
2430

25-
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.
2632

2733
```json
2834
{
@@ -379,9 +385,14 @@ async function updateWidget(widget) {
379385

380386
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.
381387

388+
1. If not done yet, install [WinAppSDK 1.2](/windows/apps/windows-app-sdk/older-downloads#windows-app-sdk-12).
389+
382390
1. Go to [PWAmp](https://microsoftedge.github.io/Demos/pwamp/) and install the app on Windows 11.
383-
1. Open the Windows 11 widgets board by pressing **Ctrl+W**.
391+
392+
1. Open the Windows 11 widgets board by pressing **Windows logo key + W**.
393+
384394
1. Click **Add widgets** to open the **widgets settings** screen, scroll to the **PWAmp mini player** widget and add it.
395+
385396
1. Close the **widgets settings** screen. The **PWAmp mini player** is now displayed in the widgets board.
386397

387398
The PWAmp widget displays the current song and buttons to play the previous or next song.

0 commit comments

Comments
 (0)