Skip to content

Commit

Permalink
Merge pull request #2774 from MicrosoftDocs/user/mikehoffms/widgets-pwa
Browse files Browse the repository at this point in the history
Clarify building a widget PWA experience
  • Loading branch information
Reezaali authored Aug 15, 2023
2 parents 8a4d03c + 957b3e5 commit 533cf64
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 7 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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).

Expand Down
27 changes: 21 additions & 6 deletions microsoft-edge/progressive-web-apps-chromium/how-to/widgets.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
<!-- The PWA (not the widget) is what is installable and packaged, because it's a standalone entity (unlike a widget). -->

See also:
* [Publish a Progressive Web App to the Microsoft Store](./microsoft-store.md)


<!-- ====================================================================== -->
## Install WinAppSDK

Expand Down Expand Up @@ -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)


<!-- ====================================================================== -->
Expand Down

0 comments on commit 533cf64

Please sign in to comment.