Move two PWA demos to Demos repo

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<!-- todo: in what way? -->:
+
+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.<!-- todo: move to Demos repo, then update repo's Readme and this article and pwa/samples/index.md -->
 
+
+<!-- ------------------------------ -->
 #### 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:

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/)<!-- todo: move demo to Demos repo--> 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).<!-- todo: move demo to Demos repo-->
+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.