Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added 1DIV/1div-demo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 9 additions & 1 deletion 1DIV/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,15 @@

➡️ **[Open the demo](https://microsoftedge.github.io/Demos/1DIV/dist/)** ⬅️

**1DIV** is a demo web app that enables you to create multiple CSS designs by using a single HTML `div` element. Your CSS designs are only saved locally, in the browser's memory. This demo app can be installed locally as a Progressive Web App (PWA).
1DIV is a CSS editor that lets you create drawings by applying CSS code to a single HTML element. Your drawings are saved locally in the browser only. 1DIV can be installed locally as a Progressive Web App (PWA).

![The 1DIV app](./1div-demo.png)

1DIV uses the following features:

| Feature | Description | Documentation |
|---|---|---|
| Window Controls Overlay | 1DIV uses the space normally reserved by the title bar to display a logo, search field, and button. | [Display content in the title bar area using Window Controls Overlay](../how-to/window-controls-overlay.md) |


<!-- ====================================================================== -->
Expand Down
128 changes: 45 additions & 83 deletions README.md

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css-mirroring-sourcemaps-demo/script.js
Original file line number Diff line number Diff line change
@@ -1 +1 @@
console.log('My new demo JS code');
console.log('Console log message from script.js');
13 changes: 11 additions & 2 deletions email-client/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,15 @@

➡️ **[Open the demo](https://microsoftedge.github.io/Demos/email-client/)** ⬅️

This is an email client installable app (which doesn't actually send and receive emails) that demonstrates the PWA protocol handling feature.
This is an installable email client app that demonstrates the PWA protocol handling feature, and showcases the `application-title` meta tag.

This demo doesn't actually send and receive emails.


<!-- ====================================================================== -->
## About the demo app

The demo app shows a list of received emails, and a compose button that displays a panel to compose a new email when clicked.
This simulated email client PWA demonstrates how to use PWA protocol handlers. The app shows a list of received emails, and a compose button that displays a panel to compose a new email when clicked.

The app can be installed on the device, and upon installation will register a protocol handler for `mailto`.

Expand All @@ -20,6 +22,13 @@ The two interesting pieces of code here are:

* The way protocol handling requests are detected and used in [script.js](https://github.com/MicrosoftEdge/Demos/blob/main/email-client/script.js).

This sample demonstrates the following features:

| Feature | Description | Documentation |
|---|---|---|
| Protocol Handling | `mailto` links are handled by the app to start composing a new email. | [Handle protocols in a PWA](../how-to/handle-protocols.md) |
| `application-title` meta tag | The PWA makes runtime changes to the `<meta name="application-title" content="">` element. | [application-title](https://developer.mozilla.org/docs/Web/HTML/Reference/Elements/meta/name#application-name) in _&lt;meta&gt; name attribute_ at MDN. |


<!-- ====================================================================== -->
## How to use the demo
Expand Down
2 changes: 1 addition & 1 deletion opaque-range/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ To test the feature:

* To test in production, with your real users site, register for the origin trial:

* [Edge origin trial](https://developer.microsoft.com/en-us/microsoft-edge/origin-trials/trials/5f4620e8-2969-4579-a5c6-304b8fae7200).
* [Edge origin trial](https://developer.microsoft.com/microsoft-edge/origin-trials/trials/5f4620e8-2969-4579-a5c6-304b8fae7200).
* [Chrome origin trial](https://developer.chrome.com/origintrials/#/register_trial/1731071106770534401).

## Provide feedback
Expand Down
2 changes: 1 addition & 1 deletion opaque-range/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ <h1>OpaqueRange demo</h1>
The <code>OpaqueRange</code> API lets you create ranges over the value of
<code>&lt;textarea&gt;</code> and <code>&lt;input&gt;</code> elements, enabling
<code>getBoundingClientRect()</code> and the
<a href="https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API">CSS Custom Highlight API</a>
<a href="https://developer.mozilla.org/docs/Web/API/CSS_Custom_Highlight_API">CSS Custom Highlight API</a>
to work directly on form controls without cloning elements.
<a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/new?template=opaque-range.md">Give feedback on the
feature</a>.
Expand Down
28 changes: 25 additions & 3 deletions pwa-background-sync/README.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,31 @@
# PWA Background Sync API demo

[➡️Open demo app here⬅️](https://microsoftedge.github.io/Demos/pwa-background-sync/)

> **Note:** to test the demo app, first install it by clicking the **App available** button in the address bar of Microsoft Edge, and then open the installed app in its own window.
<!-- ====================================================================== -->
## Open the sample

To test the demo app:

1. Open the [PWA Background Sync API demo](https://microsoftedge.github.io/Demos/pwa-background-sync/).

1. In the Address bar, click the **App available** button.

The app is installed.

1. Open the installed app in its own window.


<!-- ====================================================================== -->
## About the sample

The Background Sync API makes it possible for users to continue using your PWA even when they are offline, and synchronize data with the server once the network connection is restored.

See [Use the Background Sync API to synchronize data with the server](https://learn.microsoft.com/microsoft-edge/progressive-web-apps/how-to/background-syncs#use-the-background-sync-api-to-synchronize-data-with-the-server).
The PWA Background Sync API demo 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 API demo](./background-sync.png)

The PWA Background Sync API demo uses the following features:

| Feature | Description | Documentation |
|---|---|---|
| Background Sync | Enables using the PWA when offline; synchronizes data with the server when the network connection is restored. | [Synchronize and update a PWA in the background](https://learn.microsoft.com/microsoft-edge/progressive-web-apps/how-to/background-syncs) |
Binary file added pwa-background-sync/background-sync.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 21 additions & 4 deletions pwa-file-handlers/README.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,26 @@
# PWA file handlers demo

[➡️Open demo app here⬅️](https://microsoftedge.github.io/Demos/pwa-file-handlers/)
<!-- ====================================================================== -->
## Open the sample

> **Note:** to test the demo app, first install it by clicking the **App available** button in the address bar of Microsoft Edge, and then open the installed app in its own window.
To open this sample:

The `file_handlers` web app manifest member lets your PWA handle files like native applications.
1. Go to [PWA file handlers demo](https://microsoftedge.github.io/Demos/pwa-file-handlers/).

See [Handle files in a PWA](https://learn.microsoft.com/microsoft-edge/progressive-web-apps/how-to/handle-files).
1. In the Address bar, click the **App available** button.

1. Open the installed app in its own window.


<!-- ====================================================================== -->
## About the sample

The PWA file handlers app handles `*.txt` files like a native application does, by using the `file_handlers` web app manifest member.

![The "PWA file handlers" demo app](./file-handlers.png)

The PWA file handlers demo uses the following features:

| Feature | Description | Documentation |
|---|---|---|
| File Handling | The `file_handlers` web app manifest member enables a PWA to handle file types like a native application does. | [Handle files in a PWA](../how-to/handle-files.md) |
Binary file added pwa-file-handlers/file-handlers.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
56 changes: 17 additions & 39 deletions pwa-installer/README.md
Original file line number Diff line number Diff line change
@@ -1,63 +1,41 @@
# PWA installer

➡️ **[Open the demo](https://microsoftedge.github.io/Demos/pwa-installer/)** ⬅️

**PWA installer** is a demo app for a landing page (titled **Edge demos** ) that lets you install PWAs from a collection of applications.

This demo app showcases the Web Install API. This demo app also demonstrates CSS Masonry layout.


<!-- ====================================================================== -->
## Requirements
## About the sample

* For the demo to work correctly, you must enable a flag for the Web Install API. That flag is available in browsers based on Chromium, such as Microsoft Edge, starting with version 139.
This demo app showcases the Web Install API. **PWA installer** is a sample app (titled **Edge demos** ) that lets you install other PWAs on your device.

* As a progressive enhancement, you can also enable the CSS Masonry flag.
PWA installer uses the following features:

| Feature | Description | Documentation |
|---|---|---|
| Web Install API | PWA installer uses the `navigator.install()` API to install other PWAs on the device. | [Web Install API](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/WebInstall/explainer.md) |

<!-- ------------------------------ -->
### Enable the Web Install API

To enable the Web Install API (required):
<!-- ====================================================================== -->
## Open the sample

1. In the browser, open a new tab and go to `about:flags`.
To open and run the sample:

In Microsoft Edge, you end up at `edge://flags`.
1. Go to the [PWA installer](https://microsoftedge.github.io/Demos/pwa-installer/) demo in a new window or tab.

1. Open a new tab, and then go to `edge://flags`.

1. In the **Search** box, enter **web-app-installation-api**.

1. Set the **Web App Installation API** flag to **Enabled**.

1. Click the **Restart** button in the lower right. The browser restarts.


<!-- ------------------------------ -->
### Enable CSS Masonry layout
This flag is available in browsers based on Chromium, such as Microsoft Edge, starting with version 139.

To enable the CSS Masonry layout flag (a progressive enhancement):
1. Click the **Restart** button in the lower right.

1. In the browser, open a new tab and go to `about:flags`.

In Microsoft Edge, you end up at `edge://flags`.

1. In the **Search** box, enter **css-masonry-layout**.

1. Set the **CSS Masonry Layout** flag to **Enabled**.

1. Click the **Restart** button in the lower right. The browser restarts.
The browser restarts.


<!-- ====================================================================== -->
## See also

Sample description:
* [PWA installer](https://learn.microsoft.com/microsoft-edge/progressive-web-apps/samples/index#pwa-installer) in _Progressive Web App samples_.

Blog post:
* [Microsoft Edge: Web Install API Dev Trial Live](https://www.linkedin.com/feed/update/urn:li:activity:7348768177993998337/)

Explainer:
* [Web Install API](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/WebInstall/explainer.md)

Other live samples:
* [Microsoft Edge: Web Install API Dev Trial Live](https://www.linkedin.com/feed/update/urn:li:activity:7348768177993998337/) - blog post.
* [Web Install API](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/WebInstall/explainer.md) - explainer.
* [Web Install Sample](https://kbhlee2121.github.io/pwa/web-install/index.html) - requires the **web-app-installation-api** flag.
6 changes: 2 additions & 4 deletions pwa-installer/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,8 @@ <h2>Instructions</h2>
<h2><a href="https://microsoftedge.github.io/Demos/temperature-converter/index.html" target="_blank">Temperature
converter</a> - PWA getting started demo app</h2>
<p class="app-description">A simple PWA demo app that converts temperatures.
For instructions, see <a href="https://learn.microsoft.com/microsoft-edge/progressive-web-apps/how-to/"
target="_blank">Get started with PWAs
</a>.</p>
<!-- todo: change from [Get started with PWAs] to [Temperature convertor sample] after merge https://github.com/MicrosoftDocs/edge-developer/pull/3476 -->
For instructions, see <a href="https://learn.microsoft.com/microsoft-edge/progressive-web-apps/samples/temperature-converter"
target="_blank">Temperature convertor sample</a>.</p>
<button class="install-button">Install</button>
</article>

Expand Down
2 changes: 1 addition & 1 deletion pwa-pwastore/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ <h2>Instructions</h2>
<p><strong>Some additional details for demos to work:</strong></p>
<ul>
<li>Check if you need to enable any experimental features in <code>about://flags</code>.</li>
<li><a href="https://developer.microsoft.com/en-us/microsoft-edge/origin-trials/trials" target="_blank">List of active Origin Trials on Microsoft Edge.</a></li>
<li><a href="https://developer.microsoft.com/microsoft-edge/origin-trials/trials" target="_blank">List of active Origin Trials on Microsoft Edge.</a></li>
<li>This app uses the <a href="https://aka.ms/webinstall">Web Install API</a> to install demos and the <a href="https://developer.chrome.com/blog/masonry" target="_blank">Masonry layout</a> to arrange items.</li>
</ul>
</article>
Expand Down
24 changes: 18 additions & 6 deletions pwa-timer/README.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,27 @@
# Timer PWA demo

➡️ **[Open the demo](https://microsoftedge.github.io/Demos/pwa-timer/)** ⬅️

<!-- ====================================================================== -->
## About the sample

The Timer PWA demo webpage has a **Set timer** button, and you can set the duration of the timer.

This demo is a Progressive Web App (PWA).

<!--
For instructions, see []().
todo: not found in Docs repo: pwa-timer
-->

See also:
<!-- ====================================================================== -->
## Open the sample

To open this sample:

1. Go to [Timer PWA demo](https://microsoftedge.github.io/Demos/pwa-timer/).

1. In the Address bar, click the **App available** button.

1. Open the installed app in its own window.


<!-- ====================================================================== -->
## See also

* [Progressive Web Apps (PWAs) documentation](https://learn.microsoft.com/microsoft-edge/progressive-web-apps/landing/)
38 changes: 32 additions & 6 deletions pwa-to-do/README.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,46 @@
# PWA To Do (under construction)
# PWA To Do

➡️ **[Open the demo](https://microsoftedge.github.io/Demos/pwa-to-do/)** ⬅️

<!-- ====================================================================== -->
## About the sample

**PWA To Do** is a simple To Do list app that lets you create lists of tasks locally in your browser, or by installing the app.

The data storage is done by using the [WebAssembly build of SQLite3](https://sqlite.org/wasm/) and origin-private file system.

Check out the code in the `db.js` file if you're interested in learning more about how to use SQLite3 in your own web app.
This application serves as a browser storage demo for applications that need to store user data locally and query it in interesting ways.

This application uses:
* The WebAssembly build of SQLite3.
* The Origin-Private File System (OPFS) API.

To learn how to use SQLite3, see `db.js`.


<!-- ====================================================================== -->
## TODO
## Open the sample

To open this sample:

1. Go to [PWA file handlers demo](https://microsoftedge.github.io/Demos/pwa-to-do/).

1. In the Address bar, click the **App available** button.

The app is installed.

Possible enhancements for this demo:
1. Open the installed app in its own window.

* Add a way to import DB from file.

<!-- ====================================================================== -->
## Possible enhancements for this demo<!-- todo -->

* Add a way to import the database via a file.
* Escape strings before inserting into SQLite.
* Sort tasks by most recent tasks, and separate completed tasks vs. todo tasks.
* Allow manually sorting the tasks.


<!-- ====================================================================== -->
## See also

* [Progressive Web Apps (PWAs) documentation](https://learn.microsoft.com/microsoft-edge/progressive-web-apps/landing/)
Loading