Skip to content

Commit ec6a1db

Browse files
diekusdiekus
authored
Merge pull request #108 from Kbhlee2121/user/kristinlee/update-web-install-readme-for-OT
Update Web Install API README for OT and add OT Token to PWA Installer Site
2 parents 67809a3 + 8c570ec commit ec6a1db

File tree

2 files changed

+95
-8
lines changed

2 files changed

+95
-8
lines changed

‎pwa-installer/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<link href="styles/pwa-installer.css" rel="stylesheet">
99
<link rel="icon" type="image/x-icon" href="images/favicon.png">
1010
<link rel="manifest" href="manifest.json" />
11+
<meta http-equiv="origin-trial" content="AthySR4m3PGpZ6oyEGFA7F+Ybuid1SQLBqIrmlSv6lQbmeMIBplKTTHPx+fXiIHdbkYQfVGj1NUjFA6NqeRNvw4AAAB2eyJvcmlnaW4iOiJodHRwczovL21pY3Jvc29mdGVkZ2UuZ2l0aHViLmlvOjQ0MyIsImZlYXR1cmUiOiJXZWJBcHBJbnN0YWxsYXRpb24iLCJleHBpcnkiOjE3ODM5ODcyMDAsImlzU3ViZG9tYWluIjp0cnVlfQ==">
1112
<meta name="application-title" content="PWA installer by the Microsoft Edge team">
1213
<title>PWA installer</title>
1314
<link rel="stylesheet" href="styles/pwa-installer-dark.css" media="(prefers-color-scheme: dark)" />

‎pwa-web-install-api/README.md‎

Lines changed: 94 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,102 @@ This directory contains demos that showcase the use of [navigator.install](https
44

55
## Demos
66

7-
* [PWA Store](https://microsoftedge.github.io/Demos/pwa-pwastore)
7+
* [PWA Installer](https://microsoftedge.github.io/Demos/pwa-pwastore)
88
* [Web Install Sample](https://kbhlee2121.github.io/pwa/web-install/index.html)
99

10-
## Try the feature and share feedback
10+
## How to Use It
1111

12-
To try the feature, follow these steps:
12+
### Install the current loaded document
1313

14-
1. Use a Chromium-based browser, such as Microsoft Edge or Chrome, and make sure the version is at least 139.0.3402.0 in Edge, or 139.0.7258.0 in Chrome.
15-
1. In the browser, open a new tab and go to `about:flags`.
16-
1. Search for "web-app-installation-api" in the search box.
17-
1. Set the **Web App Installation API** flag to **Enabled**, and then restart the browser.
14+
**`install()`Requirements**:
15+
* The current document must link to a manifest file.
16+
* The manifest file must have an `id` field defined.
1817

19-
To share feedback, please [open an issue on the MSEdgeExplainers repository](https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/new?template=web-install-api.md).
18+
```javascript
19+
/* Current Document: 0-param Signature*/
20+
const installApp = async () => {
21+
if (!navigator.install) return; // api not supported
22+
try {
23+
await navigator.install();
24+
} catch(err) {
25+
switch(err.name){
26+
case 'AbortError':
27+
/* Operation was aborted*/
28+
break;
29+
}
30+
}
31+
};
32+
```
33+
### Install a background document (any app that's not the current document)
34+
35+
**`install(<install_url>)` Requirements:**
36+
* The document at `install_url` must link to a manifest file.
37+
* The manifest file must have an `id` field defined.
38+
39+
```javascript
40+
/*Background Document: 1-param Signature*/
41+
const installApp = async (install_url) => {
42+
if (!navigator.install) return; // api not supported
43+
try {
44+
await navigator.install(install_url);
45+
} catch(err) {
46+
switch(err.name){
47+
case 'AbortError':
48+
/* Operation was aborted*/
49+
break;
50+
case 'DataError':
51+
/*issue with manifest file or id*/
52+
break;
53+
}
54+
}
55+
};
56+
```
57+
**`install(<install_url>, <manifest_id>)` Requirements:**
58+
* The document at `install_url` must link to a manifest file.
59+
* `manifest_id` must match the computed id after parsing the manifest.
60+
61+
```javascript
62+
/*Background Document: 2-param Signature*/
63+
const installApp = async (install_url, manifest_id) => {
64+
if (!navigator.install) return; // api not supported
65+
try {
66+
await navigator.install(install_url, manifest_id);
67+
} catch(err) {
68+
switch(err.name){
69+
case 'AbortError':
70+
/* Operation was aborted*/
71+
break;
72+
case 'DataError':
73+
/*issue with manifest file or id*/
74+
break;
75+
}
76+
}
77+
};
78+
```
79+
80+
## Try it with Origin Trials!
81+
82+
The Web Install API is currently available as an [Origin Trial](https://developer.chrome.com/docs/web-platform/origin-trials/) in Chrome and Microsoft Edge versions 143-148. This allows you to use the feature on your production site and provide valuable feedback to browser vendors before it's finalized.
83+
84+
To participate, you'll need to:
85+
1. **Register for the Origin Trial:** [Web Install registration page link](https://developer.chrome.com/origintrials/#/view_trial/2367204554136616961)
86+
2. **Add the Origin Trial Token:** Once you have your token, add it to your pages via a `<meta>` tag or an HTTP header.
87+
88+
```html
89+
<!-- Example of adding the token via a meta tag -->
90+
<meta http-equiv="origin-trial" content="YOUR_TOKEN_HERE">
91+
```
92+
See [Origin Trials Guide for Web Developers](https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md) to learn more about Origin Trials.
93+
94+
## Provide Feedback
95+
96+
Your feedback is crucial to the development of this feature. If you encounter any issues, have suggestions, or want to share how you're using the Web Install API, please:
97+
98+
**Log an issue here:** [Web Install Feedback Link](https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/new?template=web-install-api.md)
99+
100+
We look forward to hearing from you!
101+
102+
## Further Reading and References
103+
* [Explainer](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/WebInstall/explainer.md)
104+
* [Chrome Platform Status Entry](https://chromestatus.com/feature/5183481574850560)
105+
* [Origin Trials Guide for Web Developers](https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md)

0 commit comments

Comments
 (0)