Skip to content

Commit 6a32b20

Browse files
kyereboakyereboahcaptainbrosset
authored
Adding PWA manifest localization demo (#123)
* Add PWA manifest localization demo * Delete .vscode directory * Apply suggestions from code review Co-authored-by: Patrick Brosset <patrickbrosset@gmail.com> * Update pwa-manifest-localization/README.md * Update pwa-manifest-localization/README.md --------- Co-authored-by: Alexander Kyereboah <akyereboah@microsoft.com> Co-authored-by: Patrick Brosset <patrickbrosset@gmail.com>
1 parent b74b249 commit 6a32b20

File tree

15 files changed

+480
-0
lines changed

15 files changed

+480
-0
lines changed

README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,7 @@ sync'd Oct. 17, 2025
121121
| PWA Background Sync | Lets you send chat messages even when offline. If you're offline when sending a message, the app uses Background Sync to send the message later, when you're back online. | [/pwa-background-sync/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-background-sync/) | [PWA Background Sync API demo](https://microsoftedge.github.io/Demos/pwa-background-sync/) |
122122
| PWA file handlers | Handles `*.txt` files like a native application does. | [/pwa-file-handlers/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-file-handlers/) | [PWA file handlers demo](https://microsoftedge.github.io/Demos/pwa-file-handlers/) |
123123
| PWA installer | A PWA that uses the Web Install API to install other PWAs. Also uses CSS Masonry. | [/pwa-installer/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-installer/) | [pwa-installer](https://microsoftedge.github.io/Demos/pwa-installer/) demo |
124+
| Manifest Localization | A PWA that demonstrates localized app metadata in the web app manifest, supporting English, German, and Arabic. | [/pwa-manifest-localization/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-manifest-localization/) | [Manifest Localization demo](https://microsoftedge.github.io/Demos/pwa-manifest-localization/) |
124125
| Edge demos (pwastore) | A PWA that uses the Web Install API to install other PWAs. Also uses CSS Masonry. An earlier copy of `/pwa-installer/` directory, pointed to by Dev Trial docs. | [/pwa-pwastore/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-pwastore/) | [Edge demos](https://microsoftedge.github.io/Demos/pwa-pwastore/) |
125126
| Timer PWA | Has a **Set timer** button, and you can set the duration of the timer. | [/pwa-timer/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-timer/) | [Timer PWA demo](https://microsoftedge.github.io/Demos/pwa-timer/) |
126127
| PWA To Do | Create lists of tasks locally in your browser, or by installing the app. Click **About** link in rendered demo. | [/pwa-to-do/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-to-do/) | [PWA To Do](https://microsoftedge.github.io/Demos/pwa-to-do/) demo |
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Manifest Localization for Web Apps
2+
3+
➡️ **[Open the demo](https://microsoftedge.github.io/Demos/pwa-manifest-localization/)** ⬅️
4+
5+
This demo showcases the use of `_localized` suffixed web app manifest members, which allow Progressive Web Apps (PWAs) to provide localized app metadata (such as name, description, and icons) for different languages directly in the manifest file.
6+
7+
The demo app is localized in English, German, and Arabic.
8+
9+
## How to use the demo app
10+
11+
1. In Microsoft Edge, open the [Manifest Localization Test App](https://microsoftedge.github.io/Demos/pwa-manifest-localization/) in a new window or tab.
12+
13+
2. In the address bar, click the **App available** button to install the PWA on your device.
14+
15+
If your browser is set to English, German, or Arabic, the installed PWA displays the name, short name, icon, description, and shortcuts that are defined in the web app manifest file for that language.
16+
17+
3. In Microsoft Edge, go to `edge://settings/languages`.
18+
19+
4. Under **Preferred languages**, click **...** next to either English, German, or Arabic, choosing the one which your browser isn't already using.
20+
21+
5. Select **Display Microsoft Edge in this language**.
22+
23+
6. Restart the PWA.
24+
25+
You are prompted to update the installed PWA to the new localized values.
26+
27+
## Links
28+
29+
- [Specification](https://www.w3.org/TR/appmanifest/#x_localized-members)
30+
- [Chrome Platform Status entry](https://chromestatus.com/feature/5090807862394880?gate=4864426712891392)
4.61 KB
Loading
28.4 KB
Loading
8.88 KB
Loading
107 KB
Loading
6.77 KB
Loading
14.3 KB
Loading
4.68 KB
Loading
8.89 KB
Loading

0 commit comments

Comments
 (0)