Move two PWA demos to Demos repo

microsoft-edge/progressive-web-apps/demo-pwas.md

@@ -31,7 +31,7 @@ followed by other repos
 
 ![The 1DIV app](./demo-pwas-images/1div-demo.png)
 
-[App](https://microsoftedge.github.io/Demos/1DIV/dist/), [source code and Readme file](https://github.com/MicrosoftEdge/Demos/tree/main/1DIV/).
+[App](https://microsoftedge.github.io/Demos/1DIV/dist/), [source code and Readme](https://github.com/MicrosoftEdge/Demos/tree/main/1DIV/).
 
 1DIV uses the following features:
 
@@ -45,7 +45,7 @@ followed by other repos
 
 A simulated email client PWA that demonstrates how to use PWA protocol handlers.
 
-[App](https://microsoftedge.github.io/Demos/email-client/), [source code and Readme file](https://github.com/MicrosoftEdge/Demos/tree/main/email-client/).
+[App](https://microsoftedge.github.io/Demos/email-client/), [source code and Readme](https://github.com/MicrosoftEdge/Demos/tree/main/email-client/).
 
 Email client uses the following features:
 
@@ -61,14 +61,14 @@ This simple PWA demo lets you search for made-up movies and store them locally.
 
 ![The My Movie List app](./demo-pwas-images/my-movies.png)
 
-[App](https://quirky-rosalind-ac1e65.netlify.app/), [source code](https://github.com/captainbrosset/movies-db-pwa/).<!-- todo: link to readme when exists --><!-- todo: move to Demos repo, then update repo's Readme and the article and demo-pwas.md -->
-
-
-[App](https://quirky-rosalind-ac1e65.netlify.app/), [source code](https://github.com/captainbrosset/movies-db-pwa/).
-
- [My Movie List](https://quirky-rosalind-ac1e65.netlify.app/)
-[/movies-db-pwa/](https://github.com/captainbrosset/movies-db-pwa/)
-
+[App](https://quirky-rosalind-ac1e65.netlify.app/), [source code and Readme](https://github.com/captainbrosset/movies-db-pwa/).
+<!-- todo:
+create Readme in Demos repo
+move demo to Demos repo
+update main Readme for Demos repo
+update demo's Readme
+update demo-pwas.md
+-->
 
 My Movies uses the following features:
 
@@ -85,7 +85,13 @@ My Tracks is useful for visualizing GPS tracks (`*.gpx` files) on a map.
 
 ![The My Tracks app](./demo-pwas-images/my-tracks.png)
 
-[App](https://captainbrosset.github.io/mytracks/),<!-- todo: move demo to Demos repo--> [source code and Readme file](https://github.com/captainbrosset/mytracks/).
+[App](https://captainbrosset.github.io/mytracks/), [source code and Readme](https://github.com/captainbrosset/mytracks/).
+<!-- todo:
+move demo to Demos repo
+update main Readme for Demos repo
+update demo's Readme
+update demo-pwas.md
+-->
 
 My Tracks uses the following features:
 
@@ -102,7 +108,7 @@ My Tracks uses the following features:
 
 A demo web app to showcase the `application-title` meta tag.
 
-[App](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-application-title), [source code and Readme file](https://microsoftedge.github.io/Demos/pwa-application-title/).
+[App](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-application-title), [source code and Readme](https://microsoftedge.github.io/Demos/pwa-application-title/).
 
 Application Title Meta Tag uses the following features:
 
@@ -116,17 +122,17 @@ Application Title Meta Tag uses the following features:
 
 A simple PWA demo app that converts temperatures.  Used for [Get started with PWAs](./how-to/index.md).<!-- todo: change from [Get started with PWAs] to [Temperature convertor sample] after merge https://github.com/MicrosoftDocs/edge-developer/pull/3476 -->
 
-[App](https://microsoftedge.github.io/Demos/pwa-getting-started/), [source code and Readme file](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-getting-started).
+[App](https://microsoftedge.github.io/Demos/pwa-getting-started/), [source code and Readme](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-getting-started).
 
 
 <!-- ====================================================================== -->
 ## PWA installer
 
 A PWA that uses the Web Install API to install other PWAs.  Also uses CSS Masonry.
 
-[App](https://microsoftedge.github.io/Demos/pwa-pwastore/), [source code and Readme file](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-pwastore).
+[App](https://microsoftedge.github.io/Demos/pwa-pwastore/), [source code and Readme](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-pwastore).
 <!-- todo: new:
-[App](https://microsoftedge.github.io/Demos/pwa-installer/), [source code and Readme file](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-installer/).
+[App](https://microsoftedge.github.io/Demos/pwa-installer/), [source code and Readme](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-installer/).
 -->
 
 PWA installer uses the following features:
@@ -142,15 +148,15 @@ PWA installer uses the following features:
 
 Has a **Set timer** button, and you can set the duration of the timer.
 
-[App](https://microsoftedge.github.io/Demos/pwa-timer/), [source code and Readme file](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-timer).
+[App](https://microsoftedge.github.io/Demos/pwa-timer/), [source code and Readme](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-timer).
 
 
 <!-- ====================================================================== -->
 ## PWA To Do
 
 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/), [source code and Readme file](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-to-do).
+[App](https://microsoftedge.github.io/Demos/pwa-to-do/), [source code and Readme](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-to-do).
 
 
 <!-- ====================================================================== -->
@@ -160,7 +166,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](./demo-pwas-images/pwamp.png)
 
-[App](https://microsoftedge.github.io/Demos/pwamp/), [source code and Readme file](https://github.com/MicrosoftEdge/Demos/tree/main/pwamp/).
+[App](https://microsoftedge.github.io/Demos/pwamp/), [source code and Readme](https://github.com/MicrosoftEdge/Demos/tree/main/pwamp/).
 
 PWAmp uses the following features:
 
@@ -182,7 +188,7 @@ wami can apply a sequence of image manipulation steps such as cropping, resizing
 
 ![The wami app](./demo-pwas-images/wami.png)
 
-[App](https://microsoftedge.github.io/Demos/wami/), [source code and Readme file](https://github.com/MicrosoftEdge/Demos/tree/main/wami/).
+[App](https://microsoftedge.github.io/Demos/wami/), [source code and Readme](https://github.com/MicrosoftEdge/Demos/tree/main/wami/).
 
 wami uses the following features:
 
@@ -205,7 +211,7 @@ BPM Techno analyzes audio via the device microphone and displays a real-time bea
 
 ![The BPM Techno app](./demo-pwas-images/bpm-techno.png)
 
-[App](https://bpmtech.no/), [source code and Readme file](https://github.com/webmaxru/bpm-counter/).
+[App](https://bpmtech.no/), [source code and Readme](https://github.com/webmaxru/bpm-counter/).
 
 This demo is in the [webmaxru / bpm-counter](https://github.com/webmaxru/bpm-counter/) repo.
 
@@ -226,7 +232,7 @@ Webboard is a drawing application.
 
 ![Webboard is a Progressive Web App for drawing and intelligent whiteboarding](./demo-pwas-images/webboard.png)
 
-[App](https://webboard.app/), [source code and Readme file](https://github.com/pwa-builder/web-whiteboard/).
+[App](https://webboard.app/), [source code and Readme](https://github.com/pwa-builder/web-whiteboard/).
 
 This demo is in the [pwa-builder / web-whiteboard](https://github.com/pwa-builder/web-whiteboard/) 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,6 +105,8 @@ 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.
@@ -125,8 +133,10 @@ To test background syncing:
 
 1.  Reload the app. The movie details now appear.
 
-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 demo-pwas.md  -->
+To see the sample code, check out the [movies-db-pwa](https://github.com/captainbrosset/movies-db-pwa/) repo.<!-- todo: move to Demos 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 +171,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 +187,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 +206,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 +222,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 +243,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 +253,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 +286,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 +300,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,11 @@ The `launchQueue` object queues all the launched files until a consumer is set w
 <!-- ====================================================================== -->
 ## Demo
 
+<!-- todo: Find "captainbrosset", move demo to Demos repo -->
+
 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 +115,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.