diff --git a/microsoft-edge/progressive-web-apps/demo-pwas.md b/microsoft-edge/progressive-web-apps/demo-pwas.md index a672c535ee..54d3888d89 100644 --- a/microsoft-edge/progressive-web-apps/demo-pwas.md +++ b/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/). - - -[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/). + 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/), [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/). + 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,7 +122,7 @@ 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). -[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). @@ -124,9 +130,9 @@ A simple PWA demo app that converts temperatures. Used for [Get started with PW 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). PWA installer uses the following features: @@ -142,7 +148,7 @@ 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). @@ -150,7 +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/), [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. 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 c5b16ac98b..b73110d270 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,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. +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 +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: 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 ddc2be5971..47a5adf93d 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,11 @@ The `launchQueue` object queues all the launched files until a consumer is set w ## Demo + + 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 +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). +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/web-platform/samples.md b/microsoft-edge/web-platform/samples.md index 405aa334f0..ef78f0bbd6 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 |