Fix #75: Implement web app installing

index.html

@@ -6,8 +6,9 @@
   <!-- Origin trial token needed for Web USB -->
   <meta http-equiv="origin-trial" content="AsxscPRBb7U1KJIlQrsFrZ3ea0LHwRhNkbqBKsSuLP5y3sqIqnanjKbGk4oe5+/HkownaJhI2wP6m1S70Y8xkQsAAABUeyJvcmlnaW4iOiAiaHR0cHM6Ly9wZXJtaXNzaW9uLnNpdGU6NDQzIiwgImZlYXR1cmUiOiAiV2ViVVNCIiwgImV4cGlyeSI6IDE0NjUzODkxOTd9">
   <title>permission.site</title>
-  <link rel="shortcut icon" href="favicon.ico">
-  <link rel="apple-touch-icon" href="app-icon.png"/>
+  <link rel="shortcut icon" href="icon-512x512.png">
+  <link rel="apple-touch-icon" href="icon-512x512.png">
+  <link rel="manifest" href="manifest.json">
   <link rel="stylesheet" href="style.css">
   <script src="index.js"></script>
 </head>
@@ -32,6 +33,7 @@
   </a>
 </div>
 
+<button id="install">Install</button>
 <button id="notifications">Notifications</button>
 <button id="location">Location</button>
 <button id="camera">Camera</button>
@@ -98,7 +100,7 @@
 <tr>
   <td>Async Clipboard</td>
   <td>
-    These buttons test the new <a href="https://w3c.github.io/clipboard-apis/">Async Clipboard API</a>.
+    These buttons test the new <a href="https://w3c.github.io/clipboard-apis/" target="_blank">Async Clipboard API</a>.
     <br>
     Note that these tests are different from the "Copy" button on this page, which uses the old
     (synchronous) <code>execCommand</code> method to write to the clipboard.
@@ -123,6 +125,15 @@
     May succeed without permission request depending on the implementation.
   </td>
 </tr>
+<tr>
+  <td>Notifications</td>
+  <td>
+    On iOS and iPadOS, to request notification permission, web apps must first be added to the Home Screen.
+    <br>
+    In Meta Quest Browser, to request notification permission, web apps must be
+    <a href="https://web.dev/pwas-on-oculus-2/#packaging-pwas-with-pwabuilder" target="_blank">packaged</a>.
+  </td>
+</tr>
 </table>
 
 </div>

index.js

@@ -3,6 +3,16 @@
 //  - Indicate if permissions are already granted, if the relevant API allows it.
 
 window.addEventListener("load", function() {
+  var deferredInstallEvent;
+
+  window.addEventListener("beforeinstallprompt", (event) => {
+    event.preventDefault();
+    deferredInstallEvent = event;
+  });
+
+  window.addEventListener("appinstalled", (event) => {
+    displayOutcome("install", "success")();
+  });
 
   var toggle = document.querySelector("#toggle");
   toggle.classList.add("instant");
@@ -93,6 +103,26 @@ window.addEventListener("load", function() {
   );
 
   var register = {
+    "install": function() {
+      if ("BeforeInstallPromptEvent" in window) {
+        if (deferredInstallEvent) {
+          deferredInstallEvent.prompt();
+          deferredInstallEvent.userChoice
+            .then((choiceResult) => {
+              if (choiceResult.outcome === "accepted") {
+                displayOutcome("install", "success")();
+              }
+              // If install prompt is dismissed, closed or ignored, it can be requested again.
+            })
+            .catch((error) => {
+              displayOutcome("install", "error")(error);
+            });
+          deferredInstallEvent = null;
+        }
+      } else {
+        displayOutcome("install", "error")("Install is not supported");
+      }
+    },
     "notifications": function () {
       Notification.requestPermission(
         displayOutcomeForNotifications

manifest.json

@@ -0,0 +1,81 @@
+{
+  "name": "permission.site",
+  "short_name": "permission.site",
+  "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+  "start_url": "./?utm_source=web_app_manifest",
+  "scope": "./",
+  "display": "standalone",
+  "theme_color": "#eeeeee",
+  "background_color": "#eeeeee",
+  "icons": [
+    {
+      "src": "./icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "./icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "./icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "./icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "screenshots": [
+    {
+      "src": "./screenshot-1.png",
+      "type": "image/png",
+      "sizes": "1080x1920",
+      "form_factor": "narrow"
+    },
+    {
+      "src": "./screenshot-2.png",
+      "type": "image/png",
+      "sizes": "1080x1920",
+      "form_factor": "narrow"
+    },
+    {
+      "src": "./screenshot-3.png",
+      "type": "image/png",
+      "sizes": "1080x1920",
+      "form_factor": "narrow"
+    },
+    {
+      "src": "./screenshot-4.png",
+      "type": "image/png",
+      "sizes": "1920x1080",
+      "form_factor": "wide"
+    },
+    {
+      "src": "./screenshot-5.png",
+      "type": "image/png",
+      "sizes": "1920x1080",
+      "form_factor": "wide"
+    },
+    {
+      "src": "./screenshot-6.png",
+      "type": "image/png",
+      "sizes": "1920x1080",
+      "form_factor": "wide"
+    }
+  ],
+  "prefer_related_applications": false,
+  "related_applications": [
+    {
+      "platform": "webapp",
+      "url": "./manifest.json"
+    }
+  ]
+}

one-time.html

@@ -4,8 +4,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=0.6" />
     <title>permission.site (one-time)</title>
-    <link rel="shortcut icon" href="favicon.ico" />
-    <link rel="apple-touch-icon" href="app-icon.png" />
+    <link rel="shortcut icon" href="icon-512x512.png">
+    <link rel="apple-touch-icon" href="icon-512x512.png">
     <link rel="stylesheet" href="style.css" />
     <script src="one-time.js"></script>
   </head>

other-page.html

@@ -4,8 +4,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=0.6" />
     <title>permission.site</title>
-    <link rel="shortcut icon" href="favicon.ico" />
-    <link rel="apple-touch-icon" href="app-icon.png" />
+    <link rel="shortcut icon" href="icon-512x512.png">
+    <link rel="apple-touch-icon" href="icon-512x512.png">
     <link rel="stylesheet" href="style.css" />
   </head>
 <body>