Skip to content

Commit 6d8c936

Browse files
captainbrossetcaptainbrosset
committed
<install> element unsupported message and cleanups
1 parent b6f768b commit 6d8c936

File tree

4 files changed

+133
-86
lines changed

4 files changed

+133
-86
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,7 @@ sync'd Oct. 17, 2025
120120
| Application Title Meta Tag | Showcases the `application-title` meta tag. | [/pwa-application-title/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-application-title/) | [application-title](https://microsoftedge.github.io/Demos/pwa-application-title/) demo |
121121
| PWA Background Sync | 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/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-background-sync/) | [PWA Background Sync API demo](https://microsoftedge.github.io/Demos/pwa-background-sync/) |
122122
| PWA file handlers | Handles `*.txt` files like a native application does. | [/pwa-file-handlers/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-file-handlers/) | [PWA file handlers demo](https://microsoftedge.github.io/Demos/pwa-file-handlers/) |
123+
| Install element demos - `<install>` | Demos that showcase the use of the `<install>` HTML element to declaratively install web apps. | [/pwa-install-element/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-install-element/) | [The `<install>` Element Store](https://microsoftedge.github.io/Demos/pwa-install-element/) |
123124
| PWA installer | A PWA that uses the Web Install API to install other PWAs. Also uses CSS Masonry. | [/pwa-installer/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-installer/) | [pwa-installer](https://microsoftedge.github.io/Demos/pwa-installer/) demo |
124125
| Manifest Localization | A PWA that demonstrates localized app metadata in the web app manifest, supporting English, German, and Arabic. | [/pwa-manifest-localization/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-manifest-localization/) | [Manifest Localization demo](https://microsoftedge.github.io/Demos/pwa-manifest-localization/) |
125126
| Edge demos (pwastore) | A PWA that uses the Web Install API to install other PWAs. Also uses CSS Masonry. An earlier copy of `/pwa-installer/` directory, pointed to by Dev Trial docs. | [/pwa-pwastore/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-pwastore/) | [Edge demos](https://microsoftedge.github.io/Demos/pwa-pwastore/) |

‎pwa-install-element/app.js‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,25 @@
11
if ('HTMLInstallElement' in window) {
2-
const installElements = document.querySelectorAll('install');
2+
const installElements = document.querySelectorAll('install');
33

4-
installElements.forEach((button) => {
5-
button.addEventListener('promptaction', (event) => {
6-
const label = button.id || button.getAttribute('installurl') || 'same-origin';
7-
console.log(`Install succeeded: ${label}`);
8-
});
4+
installElements.forEach((button) => {
5+
button.addEventListener('promptaction', (event) => {
6+
const label = button.id || button.getAttribute('installurl') || 'same-origin';
7+
console.log(`Install succeeded: ${label}`);
8+
});
99

10-
button.addEventListener('promptdismiss', (event) => {
11-
const label = button.id || button.getAttribute('installurl') || 'same-origin';
12-
console.log(`Install failed: ${label}`);
13-
});
10+
button.addEventListener('promptdismiss', (event) => {
11+
const label = button.id || button.getAttribute('installurl') || 'same-origin';
12+
console.log(`Install failed: ${label}`);
13+
});
1414

15-
button.addEventListener('validationstatuschanged', (event) => {
16-
if (event.target.invalidReason === 'install_data_invalid') {
17-
const label = button.id || button.getAttribute('installurl') || 'same-origin';
18-
console.log(`Install data invalid: ${label}`);
19-
}
20-
});
15+
button.addEventListener('validationstatuschanged', (event) => {
16+
if (event.target.invalidReason === 'install_data_invalid') {
17+
const label = button.id || button.getAttribute('installurl') || 'same-origin';
18+
console.log(`Install data invalid: ${label}`);
19+
}
2120
});
21+
});
2222
} else {
23-
console.warn('HTMLInstallElement not supported');
23+
console.error('HTMLInstallElement not supported');
24+
document.body.classList.add('unsupported');
2425
}

‎pwa-install-element/index.html‎

Lines changed: 70 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,72 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<link rel="manifest" href="manifest.json" />
7-
<link rel="icon" type="image/png" href="144x144.png" />
8-
<title>The &lt;install&gt; store</title>
9-
<link rel="stylesheet" href="style.css" />
10-
<script src="app.js" defer></script>
11-
</head>
12-
<body>
13-
<header>
14-
<h1>The <code>&lt;install&gt;</code> Element Store</h1>
15-
<install id="install-self" tabindex="0">Install the Store</install>
16-
</header>
17-
18-
<main>
19-
<article class="app_entry">
20-
<img src="https://microsoftedge.github.io/Demos/pwa-pwastore/images/app-icons/pwinter.png"
21-
width="75" height="75" class="app_icon">
22-
<div class="app_info">
23-
<h2><a href="https://diek.us/pwinter" target="_blank">The PWinter</a></h2>
24-
<p class="app_descrip">The PWinter is your custom PWA icon generator!</p>
25-
</div>
26-
<install installurl="https://diek.us/pwinter/" manifestid="https://diek.us/pwinter/index.html?randomize=true" tabindex="0">Install</install>
27-
</article>
28-
29-
<article class="app_entry">
30-
<img src="https://microsoftedge.github.io/Demos/pwa-pwastore/images/app-icons/pwamp.png"
31-
width="75" height="75" class="app_icon">
32-
<div class="app_info">
33-
<h2><a href="https://microsoftedge.github.io/Demos/pwamp/" target="_blank">PWAmp</a></h2>
34-
<p class="app_descrip">A music player PWA demo to play local audio files.</p>
35-
</div>
36-
<install installurl="https://microsoftedge.github.io/Demos/pwamp/" manifestid="https://microsoftedge.github.io/Demos/pwamp/" tabindex="0">Install</install>
37-
</article>
38-
39-
<article class="app_entry">
40-
<img src="https://microsoftedge.github.io/Demos/pwa-pwastore/images/app-icons/bubble.png"
41-
width="75" height="75" class="app_icon">
42-
<div class="app_info">
43-
<h2><a href="https://diek.us/bubble" target="_blank">Bubble</a></h2>
44-
<p class="app_descrip">360° equirectangular picture viewer. For images from 360 cameras.</p>
45-
</div>
46-
<install installurl="https://diek.us/bubble/" manifestid="https://diek.us/bubble/index.html" tabindex="0">Install</install>
47-
</article>
48-
49-
<article class="app_entry">
50-
<img src="https://mustjab.github.io/icon.png"
51-
width="75" height="75" class="app_icon">
52-
<div class="app_info">
53-
<h2><a href="https://mustjab.github.io/" target="_blank">Matrix PWA</a></h2>
54-
<p class="app_descrip">😎</p>
55-
</div>
56-
<install id="install-cross" installurl="https://mustjab.github.io/" tabindex="0">Install</install>
57-
</article>
58-
</main>
59-
</body>
60-
</html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="manifest" href="manifest.json">
8+
<link rel="icon" type="image/png" href="144x144.png">
9+
<title>The &lt;install&gt; store</title>
10+
<link rel="stylesheet" href="style.css">
11+
<script src="app.js" defer></script>
12+
</head>
13+
14+
<body>
15+
<header>
16+
<h1>The <code>&lt;install&gt;</code> Element Store</h1>
17+
<install id="install-self" tabindex="0">Install the Store</install>
18+
</header>
19+
20+
<section class="unsupported-message">
21+
<p>Your browser doesn't support the <code>&lt;install&gt;</code> element yet.<br>
22+
See <a
23+
href="https://github.com/MicrosoftEdge/Demos/blob/main/pwa-install-element/README.md#test-the-feature-locally">Test
24+
the feature locally</a>.</p>
25+
</section>
26+
27+
<main>
28+
<article class="app_entry">
29+
<img src="https://microsoftedge.github.io/Demos/pwa-pwastore/images/app-icons/pwinter.png" width="75" height="75"
30+
class="app_icon">
31+
<div class="app_info">
32+
<h2><a href="https://diek.us/pwinter" target="_blank">The PWinter</a></h2>
33+
<p class="app_descrip">The PWinter is your custom PWA icon generator!</p>
34+
</div>
35+
<install installurl="https://diek.us/pwinter/" manifestid="https://diek.us/pwinter/index.html?randomize=true"
36+
tabindex="0">Install</install>
37+
</article>
38+
39+
<article class="app_entry">
40+
<img src="https://microsoftedge.github.io/Demos/pwa-pwastore/images/app-icons/pwamp.png" width="75" height="75"
41+
class="app_icon">
42+
<div class="app_info">
43+
<h2><a href="https://microsoftedge.github.io/Demos/pwamp/" target="_blank">PWAmp</a></h2>
44+
<p class="app_descrip">A music player PWA demo to play local audio files.</p>
45+
</div>
46+
<install installurl="https://microsoftedge.github.io/Demos/pwamp/"
47+
manifestid="https://microsoftedge.github.io/Demos/pwamp/" tabindex="0">Install</install>
48+
</article>
49+
50+
<article class="app_entry">
51+
<img src="https://microsoftedge.github.io/Demos/pwa-pwastore/images/app-icons/bubble.png" width="75" height="75"
52+
class="app_icon">
53+
<div class="app_info">
54+
<h2><a href="https://diek.us/bubble" target="_blank">Bubble</a></h2>
55+
<p class="app_descrip">360° equirectangular picture viewer. For images from 360 cameras.</p>
56+
</div>
57+
<install installurl="https://diek.us/bubble/" manifestid="https://diek.us/bubble/index.html" tabindex="0">Install
58+
</install>
59+
</article>
60+
61+
<article class="app_entry">
62+
<img src="https://mustjab.github.io/icon.png" width="75" height="75" class="app_icon">
63+
<div class="app_info">
64+
<h2><a href="https://mustjab.github.io/" target="_blank">Matrix PWA</a></h2>
65+
<p class="app_descrip">😎</p>
66+
</div>
67+
<install id="install-cross" installurl="https://mustjab.github.io/" tabindex="0">Install</install>
68+
</article>
69+
</main>
70+
</body>
71+
72+
</html>

‎pwa-install-element/style.css‎

Lines changed: 44 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -31,21 +31,24 @@
3131
}
3232
}
3333

34-
* { box-sizing: border-box; }
34+
* {
35+
box-sizing: border-box;
36+
}
3537

36-
html, body {
38+
html,
39+
body {
3740
margin: 0;
3841
padding: 0;
39-
min-height: 100dvh;
42+
min-block-size: 100dvh;
4043
background: var(--bg);
4144
color: var(--text);
42-
font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
45+
font-family: system-ui;
4346
}
4447

4548
body {
4649
display: grid;
47-
grid-template: min-content auto / 1fr;
48-
min-height: 100dvh;
50+
grid-template: min-content min-content auto / 1fr;
51+
min-block-size: 100dvh;
4952
}
5053

5154
/* Header */
@@ -74,7 +77,7 @@ header h1 code {
7477
/* Main grid */
7578
main {
7679
padding: 1em 2em;
77-
max-width: 700px;
80+
max-inline-size: 700px;
7881
margin: 0 auto;
7982
display: flex;
8083
flex-direction: column;
@@ -91,7 +94,7 @@ main {
9194
flex-direction: row;
9295
align-items: center;
9396
gap: 1rem;
94-
text-align: left;
97+
text-align: start;
9598
transition: box-shadow ease-in-out 0.3s;
9699
box-shadow: 0 0 0 var(--shadow);
97100
}
@@ -108,7 +111,7 @@ main {
108111

109112
.app_info {
110113
flex: 1;
111-
min-width: 0;
114+
min-inline-size: 0;
112115
}
113116

114117
.app_entry h2 {
@@ -144,7 +147,6 @@ install {
144147
color: var(--accent);
145148
cursor: pointer;
146149
user-select: none;
147-
font-family: "Segoe UI", sans-serif;
148150
font-size: 1.05em;
149151
font-weight: 600;
150152
transition: background ease-in 0.2s;
@@ -155,12 +157,43 @@ install:hover {
155157
color: var(--surface);
156158
}
157159

160+
.unsupported install,
161+
.unsupported install:hover {
162+
border-color: var(--error);
163+
background: var(--surface);
164+
color: var(--error);
165+
cursor: not-allowed;
166+
opacity: 0.5;
167+
}
168+
169+
.unsupported-message {
170+
font-size: 1.1em;
171+
text-align: center;
172+
padding: 1em;
173+
max-inline-size: 700px;
174+
margin: 1em 2em;
175+
display: none;
176+
border-radius: 1rem;
177+
border: 1px solid var(--error);
178+
background: hsl(from var(--error) h s 95);
179+
justify-self: center;
180+
}
181+
182+
.unsupported-message p {
183+
margin: 0;
184+
}
185+
186+
.unsupported .unsupported-message {
187+
display: block;
188+
}
189+
158190
@media only screen and (max-width: 600px) {
159191
main {
160192
grid-template-columns: 1fr;
161193
}
194+
162195
header {
163196
flex-direction: column;
164197
text-align: center;
165198
}
166-
}
199+
}

0 commit comments

Comments
 (0)