diff --git a/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/app-available-icon.png b/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/app-available-icon.png new file mode 100644 index 0000000000..563fe3bf4d Binary files /dev/null and b/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/app-available-icon.png differ diff --git a/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/my-movie-list-pwa-demo.png b/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/my-movie-list-pwa-demo.png deleted file mode 100644 index dfe58f6036..0000000000 Binary files a/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/my-movie-list-pwa-demo.png and /dev/null differ diff --git a/microsoft-edge/progressive-web-apps/how-to/background-syncs.md b/microsoft-edge/progressive-web-apps/how-to/background-syncs.md index 4151f4bb4d..1a859f8fb5 100644 --- a/microsoft-edge/progressive-web-apps/how-to/background-syncs.md +++ b/microsoft-edge/progressive-web-apps/how-to/background-syncs.md @@ -39,6 +39,8 @@ Another example for using the Background Sync API is loading content in the back > [!NOTE] > The Background Sync API should be used for small amounts of data. The Background Sync API requires the service worker to be alive for the entire duration of the data transfer. The Background Sync API shouldn't be used to fetch large files, because devices can decide to terminate service workers, to preserve battery life. Instead, use the [Background Fetch API](#use-the-background-fetch-api-to-fetch-large-files-when-the-app-or-service-worker-isnt-running). + + #### Check for support The Background Sync API is available in Microsoft Edge, but you should make sure that Background Sync API is supported in the other browsers and devices that your app runs in. To make sure that the Background Sync API is supported, test whether the `ServiceWorkerRegistration` object has a `sync` property: @@ -55,6 +57,8 @@ navigator.serviceWorker.ready.then(registration => { To learn more about the `ServiceWorkerRegistration` interface, see [ServiceWorkerRegistration](https://developer.mozilla.org/docs/Web/API/ServiceWorkerRegistration) at MDN. + + #### Request a sync The first thing to do is to request a sync. This can be done by your app frontend or your service worker. @@ -81,6 +85,8 @@ async function requestBackgroundSync() { The `my-tag-name` string above should be a unique tag that identifies this sync request, so that multiple requests can be done. + + #### React to the sync event As soon as a connection can be used and the service worker is running, a `sync` event is sent to the service worker, which can use it to synchronize the necessary data. The `sync` event can be listened to with the following code: @@ -99,13 +105,78 @@ Typically, the `doTheWork` function will send the information to the server that For more information about the `Sync` event, the `ServiceWorkerRegistration`, and the `SyncManager` interface, see the [Background Synchronization draft specification](https://wicg.github.io/background-sync/spec/) and the [Background Synchronization API documentation](https://developer.mozilla.org/docs/Web/API/Background_Synchronization_API). + + #### Demo app -[My Movie List PWA](https://quirky-rosalind-ac1e65.netlify.app/) is a demo app that uses the Background Sync API to fetch movie information later, if the user is offline. +**PWA Background Sync** is a demo app that uses the Background Sync API to fetch information later, if the user is offline: + +![My Movies demo](./background-syncs-images/my-movie-list-pwa-demo.png) + +![PWA Background Sync API demo](./background-syncs-images/pwa-background-sync-api-demo.png) + +* [/pwa-background-sync/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-background-sync/) - Readme and source code. +* [PWA Background Sync API demo](https://microsoftedge.github.io/Demos/pwa-background-sync/) - live demo. + +To use the demo: + +1. Go to the [PWA Background Sync API demo](https://microsoftedge.github.io/Demos/pwa-background-sync/) in a new window or tab. + +1. In the Address bar, click the **App available. Install PWA Background Sync API demo** (![App available icon](./background-syncs-images/app-available-icon.png)) button. + + The **Install PWA file handlers demo app** dialog opens in Edge. + +1. Click the **Install** button. + + The **PWA file handlers demo** app window opens. The **App installed** dialog opens. + +1. Click the **Allow** button. + + The Windows **Apps** dialog prompts whether to pin the demo to the taskbar. + +1. Click the **Yes** button. + +1. Try sending a message: Enter a comment, such as todo, and then press **Enter**. + + Message appears in the list, with the status: **Sent**โœ…. + +1. Right-click within the app window, and then select **Inspect**. + + DevTools opens in a dedicated window. + +1. In DevTools, select the **Network** tool. + +1. In the **network throttling** dropdown list, select **Offline**. -![My Movie List PWA demo app](./background-syncs-images/my-movie-list-pwa-demo.png) +1. Try sending another message: Enter a comment, such as todo, and then press **Enter**. -To test background syncing: + A message appears, with the status of **Sending**, and eventually with the status of **Failed** โŒ. + + The **Try sending again** button appears. + +1. Remain offline, and click the **Try sending again** button. + + The status **Will try later๐Ÿ›œ** appears + +1. In DevTools, remove the **Offline** mode, and go back to **No throttling**. + + The message is sent. The displayed status is **Sent**โœ…. + + + +#### Troubleshooting + +If the above steps don't work: + +1. In DevTools, open the **Application** tool. + +1. Under **Service workers**, click **Unregister**. + +1. In the app's window, refresh the page. + + + +#### To test background syncing: 1. Install the app. @@ -127,6 +198,8 @@ To test background syncing: To see the sample code, check out the [movies-db-pwa](https://github.com/captainbrosset/movies-db-pwa/) repo. + + #### Debug background syncs with DevTools To test your background sync code, you don't have to go offline, then go online, and then wait for Microsoft Edge to trigger a `sync` event. Instead, DevTools lets you simulate the background sync event. @@ -161,6 +234,8 @@ Using the Periodic Background Sync API, PWAs don't have to download new content > [!NOTE] > The periodic sync only occurs when the device is on a known network (that is, a network that the device has already been connected to before). Microsoft Edge limits the frequency of the syncs to match how often the person uses the app. + + #### Check for support To check whether this API is supported in the browsers and devices that your app runs in, test whether the `ServiceWorkerRegistration` object has a `periodicSync` property: @@ -175,6 +250,8 @@ navigator.serviceWorker.ready.then(registration => { }); ``` + + #### Ask the user for permission Periodic background synchronization requires the user's permission. Requesting this permission occurs only one time, for a given application. @@ -192,6 +269,8 @@ if (status.state === 'granted') { To learn more about the Permissions API, see [Permissions API](https://developer.mozilla.org/docs/Web/API/Permissions_API) at MDN. + + #### Register a periodic sync To register a periodic sync, you need to define a minimum interval and a unique tag name. The unique tag name enables registering multiple periodic background syncs. @@ -206,6 +285,8 @@ async function registerPeriodicSync() { The `minInterval` used in the code above corresponds to 1 day in milliseconds. This is a minimum interval only, and Microsoft Edge takes other factors into account before alerting your service worker with a periodic sync event, such as the network connection and whether the user regularly engages with the app. + + #### React to periodic sync events When Microsoft Edge decides it's a good time to run the periodic sync, Microsoft Edge sends a `periodicsync` event to your service worker. You can handle this `periodicsync` event by using the same tag name that was specified when registering the sync. @@ -225,6 +306,8 @@ For more information about the `PeriodicSync` event, the `ServiceWorkerRegistrat * [Web Periodic Background Synchronization](https://wicg.github.io/periodic-background-sync/) - draft specification. * [Web Periodic Background Synchronization API](https://developer.mozilla.org/docs/Web/API/Web_Periodic_Background_Synchronization_API). + + #### Demo app [DevTools Tips](https://devtoolstips.org/) is a PWA that uses the Periodic Background Sync API. The [DevTools Tips] PWA fetches new developer tools tips daily and stores them in cache, so that users can access them next time they open the app, whether they are online or not. @@ -233,6 +316,8 @@ For more information about the `PeriodicSync` event, the `ServiceWorkerRegistrat Go to the [source code on GitHub](https://github.com/captainbrosset/devtools-tips/). In particular, the app registers the periodic sync in the [registerPeriodicSync](https://github.com/captainbrosset/devtools-tips/blob/a4a5277ee6b67e5cc61eee642bf3d9c68130094f/src/layouts/home.njk#L72) function. The [service worker code](https://github.com/captainbrosset/devtools-tips/blob/ebfb2c7631464149ce3cc7700d77564656971ff4/src/sw.js#L115) is where the app listens to the `periodicsync` event. + + #### Debug periodic background syncs with DevTools You can use DevTools to simulate `periodicsync` events instead of waiting for the minimum interval. @@ -264,6 +349,8 @@ The Background Fetch API allows PWAs to completely delegate downloading large am This API is useful for apps that let users download large files (like music, movies, or podcasts) for offline use cases. Because the download is delegated to the browser engine, which knows how to handle a flaky connection or even a complete loss of connectivity, it can pause and resume the download when necessary. + + #### Check for support To check whether this API is supported, test if the `BackgroundFetchManager` constructor exists on the global object: @@ -276,6 +363,8 @@ if (self.BackgroundFetchManager) { } ``` + + #### Start a background fetch To start a background fetch: diff --git a/microsoft-edge/progressive-web-apps/how-to/handle-files-images/app-available-icon.png b/microsoft-edge/progressive-web-apps/how-to/handle-files-images/app-available-icon.png new file mode 100644 index 0000000000..563fe3bf4d Binary files /dev/null and b/microsoft-edge/progressive-web-apps/how-to/handle-files-images/app-available-icon.png differ diff --git a/microsoft-edge/progressive-web-apps/how-to/handle-files-images/pwa-file-handlers-demo-app.png b/microsoft-edge/progressive-web-apps/how-to/handle-files-images/pwa-file-handlers-demo-app.png new file mode 100644 index 0000000000..3510b5fb5c Binary files /dev/null and b/microsoft-edge/progressive-web-apps/how-to/handle-files-images/pwa-file-handlers-demo-app.png differ diff --git a/microsoft-edge/progressive-web-apps/how-to/handle-files.md b/microsoft-edge/progressive-web-apps/how-to/handle-files.md index 4010d15fa6..c20695e9bf 100644 --- a/microsoft-edge/progressive-web-apps/how-to/handle-files.md +++ b/microsoft-edge/progressive-web-apps/how-to/handle-files.md @@ -99,9 +99,53 @@ The `launchQueue` object queues all the launched files until a consumer is set w ## Demo +![PWA file handlers demo app](./handle-files-images/pwa-file-handlers-demo-app.png) + +* [/pwa-file-handlers/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-file-handlers/) - Readme and source code. +* [PWA file handlers demo](https://microsoftedge.github.io/Demos/pwa-file-handlers/) - live demo. + +To use the demo: + +1. Go to the [PWA file handlers demo](https://microsoftedge.github.io/Demos/pwa-file-handlers/) in a new window or tab. + +1. In the Address bar, click the **App available. Install PWA file handlers demo** (![App available icon](./handle-files-images/app-available-icon.png)) button. + + The **Install PWA file handlers demo app** dialog opens in Edge. + +1. Click the **Install** button. + + The **PWA file handlers demo** app window opens. The **App installed** dialog opens. + +1. Click the **Allow** button. + + The Windows **Apps** dialog prompts whether to pin the demo to the taskbar. + +1. Click the **Yes** button. + +1. Close the **PWA file handlers demo** app. + +1. In File Explorer, find a `.txt` file. + + Or, create a `.txt` file. + +1. In File Explorer, double-click the `.txt` file. + + Or, right-click the `.txt` file, and then select **Open with**. + + Windows prompts you, asking which app to use to view the file. + +1. If it doesn't on double-click, right-click and then select **Open with PWA file handlers demo**. + +1. If prompted by a second permission dialog, select the checkbox to avoid seeing this dialog next time, and then click the **todo** button. + + The **PWA file handlers demo** app opens, and displays the `.txt` file name and its text content. + + +#### old + My Tracks is a PWA demo app that uses the File Handling feature to handle `.gpx` files. To try the feature with this demo app: -* Go to [My Tracks](https://captainbrosset.github.io/mytracks/) and install the app. +* Go to [My Tracks](https://captainbrosset.github.io/mytracks/) and install the app. * Download a GPX file on your computer. You can use this [test GPX file](https://www.visugpx.com/download.php?id=okB1eM4fzj). * Open the downloaded GPX file. @@ -113,7 +157,7 @@ If you allow the app to handle the file, a new entry appears in the app's sideba ![The new GPS track handled by the My Tracks app](./handle-files-images/my-tracks-new-file.png) -The source code for this app can be accessed on the [My Tracks GitHub repository](https://github.com/captainbrosset/mytracks). +The source code for this app can be accessed on the [My Tracks GitHub repository](https://github.com/captainbrosset/mytracks). * The [manifest.json](https://github.com/captainbrosset/mytracks/blob/main/mytracks/manifest.json) source file uses the `file_handlers` array to request handling `.gpx` files. * The [file.js](https://github.com/captainbrosset/mytracks/blob/main/src/file.js) source file uses the `launchQueue` object to handle incoming files. diff --git a/microsoft-edge/progressive-web-apps/samples/index-images/my-movies.png b/microsoft-edge/progressive-web-apps/samples/index-images/my-movies.png deleted file mode 100644 index d48b2905fe..0000000000 Binary files a/microsoft-edge/progressive-web-apps/samples/index-images/my-movies.png and /dev/null differ diff --git a/microsoft-edge/progressive-web-apps/samples/index-images/my-tracks.png b/microsoft-edge/progressive-web-apps/samples/index-images/my-tracks.png deleted file mode 100644 index 63420d6319..0000000000 Binary files a/microsoft-edge/progressive-web-apps/samples/index-images/my-tracks.png and /dev/null differ diff --git a/microsoft-edge/progressive-web-apps/samples/index.md b/microsoft-edge/progressive-web-apps/samples/index.md index bd18a6762a..c4351c70e4 100644 --- a/microsoft-edge/progressive-web-apps/samples/index.md +++ b/microsoft-edge/progressive-web-apps/samples/index.md @@ -34,9 +34,7 @@ Most of these PWA demos are in the [MicrosoftEdge / Demos](https://github.com/Mi ![The 1DIV app](./index-images/1div-demo.png) -* [App](https://microsoftedge.github.io/Demos/1DIV/dist/) -* [/1DIV/](https://github.com/MicrosoftEdge/Demos/tree/main/1DIV/) - source code directory. - * [Readme file](https://github.com/MicrosoftEdge/Demos/blob/main/1DIV/README.md) +[Readme and source code](https://github.com/MicrosoftEdge/Demos/tree/main/1DIV/), [App](https://microsoftedge.github.io/Demos/1DIV/dist/). 1DIV uses the following features: @@ -51,9 +49,7 @@ Most of these PWA demos are in the [MicrosoftEdge / Demos](https://github.com/Mi A simulated email client PWA that demonstrates how to use PWA protocol handlers. -* [App](https://microsoftedge.github.io/Demos/email-client/) -* [/email-client/](https://github.com/MicrosoftEdge/Demos/tree/main/email-client/) - source code directory. - * [Readme file](https://github.com/MicrosoftEdge/Demos/blob/main/email-client/README.md) +[Readme and source code](https://github.com/MicrosoftEdge/Demos/tree/main/email-client/), [App](https://microsoftedge.github.io/Demos/email-client/). Email client uses the following features: @@ -68,9 +64,7 @@ Email client uses the following features: A demo web app to showcase the `application-title` meta tag. -* [App](https://microsoftedge.github.io/Demos/pwa-application-title/) -* [/pwa-application-title/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-application-title/) - source code directory. - * [Readme file](https://github.com/MicrosoftEdge/Demos/blob/main/pwa-application-title/README.md) +[Readme and source code](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-application-title), [App](https://microsoftedge.github.io/Demos/pwa-application-title/). Application Title Meta Tag uses the following features: @@ -80,14 +74,41 @@ Application Title Meta Tag uses the following features: -## Temperature converter +## PWA Background Sync -A simple PWA demo app that converts temperatures. See [Temperature converter sample](./temperature-converter.md). +This simple PWA demo lets you search for made-up movies and store them locally. + +![PWA Background Sync API demo](./index-images/todo.png) + +[Readme and source code](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-background-sync/), [App](https://microsoftedge.github.io/Demos/pwa-background-sync/). + +My Movie List uses the following features: + +| Feature | Description | Documentation | +|:--- |:--- |:--- | +| Background Sync | If the user is offline when displaying more information about a movie, the app uses Background Sync to retrieve the information later when the user is back online. | [Use the Background Sync API to synchronize data with the server](../how-to/background-syncs.md#use-the-background-sync-api-to-synchronize-data-with-the-server) | +| Notifications | When the information about a movie is retrieved, a notification is sent so the user can re-engage with the app. | [Display notifications in the action center](../how-to/notifications-badges.md#display-notifications-in-the-action-center) | + + + +## PWA file handlers + + +The `file_handlers` web app manifest member enables a PWA to handle file types like a native application does. -* [App](https://microsoftedge.github.io/Demos/temperature-converter/) -* [/temperature-converter/](https://github.com/MicrosoftEdge/Demos/tree/main/temperature-converter/) - source code directory. - * [Readme file](https://github.com/MicrosoftEdge/Demos/blob/main/temperature-converter/README.md) +![The "PWA file handlers" demo app](./index-images/todo.png) + +[Readme and source code](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-file-handlers/), [App](https://microsoftedge.github.io/Demos/pwa-file-handlers/). + +My Tracks uses the following features: + +| Feature | Description | Documentation | +|:--- |:--- |:--- | +| Window Controls Overlay | The space normally reserved to the title bar is used by My Tracks to display its own search bar. | [Display content in the title bar area using Window Controls Overlay](../how-to/window-controls-overlay.md) | +| Protocol Handling | My Tracks handles URIs that start with the `geo:` protocol to show locations on the map. | [Handle protocols in a PWA](../how-to/handle-protocols.md) | +| File Handling | My Tracks natively handles `*.gpx` files. | [Handle files in a PWA](../how-to/handle-files.md) | +| Shortcuts | My Tracks defines shortcuts to easily hide and show all tracks from the map. | [Define app shortcuts (long-press or right-click menus)](../how-to/shortcuts.md) | @@ -95,9 +116,7 @@ A simple PWA demo app that converts temperatures. See [Temperature converter sa A PWA that uses the Web Install API to install other PWAs. Also uses CSS Masonry. -* [PWA installer app](https://microsoftedge.github.io/Demos/pwa-installer/) -* [/pwa-installer/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-installer/) - source code directory. - * [Readme file](https://github.com/MicrosoftEdge/Demos/blob/main/pwa-installer/README.md) +[Readme and source code](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-installer/), [App](https://microsoftedge.github.io/Demos/pwa-installer/). PWA installer uses the following features: @@ -128,9 +147,7 @@ See also: Has a **Set timer** button, and you can set the duration of the timer. -* [App](https://microsoftedge.github.io/Demos/pwa-timer/) -* [/pwa-timer/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-timer/) - source code directory. - * [Readme file](https://github.com/MicrosoftEdge/Demos/blob/main/pwa-timer/README.md) +[Readme and source code](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-timer/), [App](https://microsoftedge.github.io/Demos/pwa-timer/). @@ -139,9 +156,7 @@ Has a **Set timer** button, and you can set the duration of the timer. Create lists of tasks locally in your browser, or by installing the app. Click the **About** link in the rendered demo. -* [App](https://microsoftedge.github.io/Demos/pwa-to-do/) -* [/pwa-to-do/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-to-do/) - source code directory. - * [Readme file](https://github.com/MicrosoftEdge/Demos/blob/main/pwa-to-do/README.md) +[Readme and source code](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-to-do/), [App](https://microsoftedge.github.io/Demos/pwa-to-do/). @@ -152,9 +167,7 @@ PWAmp is a desktop music player that plays local and remote audio files. ![The PWAmp app, showing playback buttons and a list of songs](./index-images/pwamp.png) -* [App](https://microsoftedge.github.io/Demos/pwamp/) -* [/pwamp/](https://github.com/MicrosoftEdge/Demos/tree/main/pwamp/) - source code directory. - * [Readme file](https://github.com/MicrosoftEdge/Demos/blob/main/pwamp/README.md) +[Readme and source code](https://github.com/MicrosoftEdge/Demos/tree/main/pwamp/), [App](https://microsoftedge.github.io/Demos/pwamp/). PWAmp uses the following features: @@ -169,6 +182,15 @@ PWAmp uses the following features: | Sidebar | PWAmp can be pinned to the sidebar in Microsoft Edge. | [Build a PWA for the sidebar in Microsoft Edge](../how-to/sidebar.md) | + +## Temperature converter + + +A simple PWA demo app that converts temperatures. See [Temperature converter sample](./temperature-converter.md). + +[Readme and source code](https://github.com/MicrosoftEdge/Demos/tree/main/temperature-converter/), [App](https://microsoftedge.github.io/Demos/temperature-converter/). + + ## wami @@ -177,9 +199,7 @@ wami can apply a sequence of image manipulation steps such as cropping, resizing ![The wami app](./index-images/wami.png) -* [App](https://microsoftedge.github.io/Demos/wami/) -* [/wami/](https://github.com/MicrosoftEdge/Demos/tree/main/wami/) - source code directory. - * [Readme file](https://github.com/MicrosoftEdge/Demos/blob/main/wami/README.md) +[Readme and source code](https://github.com/MicrosoftEdge/Demos/tree/main/wami/), [App](https://microsoftedge.github.io/Demos/wami/). wami uses the following features: @@ -188,57 +208,12 @@ wami uses the following features: | Window Controls Overlay | The space normally reserved to the title bar can be used by wami. | [Display content in the title bar area using Window Controls Overlay](../how-to/window-controls-overlay.md) | | File System Access | wami can save transformed images back to disk. | [File System Access API](https://developer.mozilla.org/docs/Web/API/File_System_Access_API) | + - - - -## My Movie List - - - -This simple PWA demo lets you search for made-up movies and store them locally. - -![The My Movie List app](./index-images/my-movies.png) - -* [App](https://quirky-rosalind-ac1e65.netlify.app) -* [/movies-db-pwa/](https://github.com/captainbrosset/movies-db-pwa/) - source code directory. - * No Readme file. - -My Movie List uses the following features: - -| Feature | Description | Documentation | -|:--- |:--- |:--- | -| Background Sync | If the user is offline when displaying more information about a movie, the app uses Background Sync to retrieve the information later when the user is back online. | [Use the Background Sync API to synchronize data with the server](../how-to/background-syncs.md#use-the-background-sync-api-to-synchronize-data-with-the-server) | -| Notifications | When the information about a movie is retrieved, a notification is sent so the user can re-engage with the app. | [Display notifications in the action center](../how-to/notifications-badges.md#display-notifications-in-the-action-center) | - - - -## My Tracks - - - -My Tracks is useful for visualizing GPS tracks (`*.gpx` files) on a map. - -![The My Tracks app](./index-images/my-tracks.png) - -* [App](https://captainbrosset.github.io/mytracks/) - see Readme for setup. -* [/mytracks/](https://github.com/captainbrosset/mytracks/) - source code directory. - * [Readme file](https://github.com/captainbrosset/mytracks/blob/main/README.md) - -My Tracks uses the following features: - -| Feature | Description | Documentation | -|:--- |:--- |:--- | -| Window Controls Overlay | The space normally reserved to the title bar is used by My Tracks to display its own search bar. | [Display content in the title bar area using Window Controls Overlay](../how-to/window-controls-overlay.md) | -| Protocol Handling | My Tracks handles URIs that start with the `geo:` protocol to show locations on the map. | [Handle protocols in a PWA](../how-to/handle-protocols.md) | -| File Handling | My Tracks natively handles `*.gpx` files. | [Handle files in a PWA](../how-to/handle-files.md) | -| Shortcuts | My Tracks defines shortcuts to easily hide and show all tracks from the map. | [Define app shortcuts (long-press or right-click menus)](../how-to/shortcuts.md) | - - ## BPM Techno @@ -247,9 +222,7 @@ BPM Techno analyzes audio via the device microphone and displays a real-time bea ![The BPM Techno app](./index-images/bpm-techno.png) -* [App](https://bpmtech.no) -* [/bpm-counter/](https://github.com/webmaxru/bpm-counter/) - source code directory. - * [Readme file](https://github.com/webmaxru/bpm-counter/blob/main/README.md) +[Readme and source code](https://github.com/webmaxru/bpm-counter/), [App](https://bpmtech.no). This demo is in the [webmaxru / bpm-counter](https://github.com/webmaxru/bpm-counter/) repo. @@ -271,9 +244,7 @@ Webboard is a drawing application. ![Webboard is a Progressive Web App for drawing and intelligent whiteboarding](./index-images/webboard.png) -* [App](https://webboard.app) -* [/web-whiteboard/](https://github.com/pwa-builder/web-whiteboard/) - source code directory. - * [Readme file](https://github.com/pwa-builder/web-whiteboard/blob/main/readme.md) +[Readme and source code](https://github.com/pwa-builder/web-whiteboard/), [App](https://webboard.app). This demo is in the [pwa-builder / web-whiteboard](https://github.com/pwa-builder/web-whiteboard/) repo. diff --git a/microsoft-edge/web-platform/samples.md b/microsoft-edge/web-platform/samples.md index 08988d9d2b..670f5d1144 100644 --- a/microsoft-edge/web-platform/samples.md +++ b/microsoft-edge/web-platform/samples.md @@ -20,14 +20,14 @@ sync'd July 30, 2025 |---|---|---|---| | Built-in AI playgrounds | Demo pages showing how to use the built-in Prompt and Writing Assistance AI APIs in Microsoft Edge. | [/built-in-ai/](https://github.com/MicrosoftEdge/Demos/tree/main/built-in-ai) | [Built-in AI playgrounds](https://microsoftedge.github.io/Demos/built-in-ai/) demo | | CSS Gap Decorations demos | Draws line decorations within gaps in CSS Grid, Flexbox, and Multi-column layouts. | [/css-gap-decorations/](https://github.com/MicrosoftEdge/Demos/tree/main/css-gap-decorations) | [CSS Gap Decorations demos](https://microsoftedge.github.io/Demos/css-gap-decorations/) (Readme) | -| CSS Masonry demos | Showcase the implementation of CSS Masonry layout. | [/css-masonry/](https://github.com/MicrosoftEdge/Demos/tree/main/css-masonry) | [CSS Masonry demos](https://microsoftedge.github.io/Demos/css-masonry/) demos (Readme) | -| CSS Custom Highlight API | How to programmatically create and remove custom highlights on a web page. | [/custom-highlight-api/](https://github.com/MicrosoftEdge/Demos/tree/main/custom-highlight-api) | [CSS Custom Highlight API demo](https://microsoftedge.github.io/Demos/custom-highlight-api/) demo | +| CSS Masonry demos | Showcase the implementation of CSS Masonry layout. | [/css-masonry/](https://github.com/MicrosoftEdge/Demos/tree/main/css-masonry) | [CSS Masonry demos](https://microsoftedge.github.io/Demos/css-masonry/) (Readme) | +| CSS Custom Highlight API | How to programmatically create and remove custom highlights on a web page. | [/custom-highlight-api/](https://github.com/MicrosoftEdge/Demos/tree/main/custom-highlight-api) | [CSS Custom Highlight API demo](https://microsoftedge.github.io/Demos/custom-highlight-api/) | | EditContext API demo | Demo page showing how the EditContext API can be used to build an advanced text editor. | [/edit-context/](https://github.com/MicrosoftEdge/Demos/tree/main/edit-context) | [HTML editor demo](https://microsoftedge.github.io/Demos/edit-context/) | | EyeDropper API | How to use the EyeDropper API to create a color sampling tool from JavaScript. | [/eyedropper/](https://github.com/MicrosoftEdge/Demos/tree/main/eyedropper) | [EyeDropper API demos](https://microsoftedge.github.io/Demos/eyedropper/) | | IndexedDB: `getAllRecords()` | Shows the benefits of the proposed `getAllRecords()` IndexedDB method to more conveniently and quickly read IDB records. | [/idb-getallrecords/](https://github.com/MicrosoftEdge/Demos/tree/main/idb-getallrecords) | [IndexedDB: getAllRecords()](https://microsoftedge.github.io/Demos/idb-getallrecords/) demo | -| Notifications demo | Using incoming call notifications. | [/incoming-call-notifications/](https://github.com/MicrosoftEdge/Demos/tree/main/incoming-call-notifications) | [Notifications demo](https://microsoftedge.github.io/Demos/incoming-call-notifications/) demo | +| Notifications demo | Using incoming call notifications. | [/incoming-call-notifications/](https://github.com/MicrosoftEdge/Demos/tree/main/incoming-call-notifications) | [Notifications demo](https://microsoftedge.github.io/Demos/incoming-call-notifications/) | | JSON dummy data | Simple JSON files. Used for [View a JSON file or server response with formatting](./json-viewer.md). | [/json-dummy-data/](https://github.com/MicrosoftEdge/Demos/tree/main/json-dummy-data) | [JSON dummy data](https://microsoftedge.github.io/Demos/json-dummy-data/) (Readme) | -| Page Colors Custom Scrollbars demo | Shows a custom, green scrollbar in a page that has custom colors. | [/page-colors-custom-scrollbars/](https://github.com/MicrosoftEdge/Demos/tree/main/page-colors-custom-scrollbars) | [Page Colors Custom Scrollbars demo](https://microsoftedge.github.io/Demos/page-colors-custom-scrollbars/) demo | +| Page Colors Custom Scrollbars demo | Shows a custom, green scrollbar in a page that has custom colors. | [/page-colors-custom-scrollbars/](https://github.com/MicrosoftEdge/Demos/tree/main/page-colors-custom-scrollbars) | [Page Colors Custom Scrollbars demo](https://microsoftedge.github.io/Demos/page-colors-custom-scrollbars/) | | Reader app | An article reader app used to demonstrate how to use various web APIs such as CSS Custom Highlight, ``, EyeDropper, CSS and JSON modules, Scroll animation timeline, and Async Clipboard. | [/reader/](https://github.com/MicrosoftEdge/Demos/tree/main/reader) | [Reader](https://microsoftedge.github.io/Demos/reader/) demo | | Open UI's `` demos | Demo webpage showing how the Open UI's `` element can be used. | [/selectlist/](https://github.com/MicrosoftEdge/Demos/tree/main/selectlist) | [Open UI's \ demos](https://microsoftedge.github.io/Demos/selectlist/) | | `` demos | OpenUI's `` component was renamed to ``. | [/selectmenu/](https://github.com/MicrosoftEdge/Demos/tree/main/selectmenu) | [`` demos](https://microsoftedge.github.io/Demos/selectmenu/), redirects to `/selectlist/` demos |