Basic test case for same-origin Web Install

amandabaker · Jul 19, 2024 · ba42f52 · ba42f52
1 parent 8e46aed
commit ba42f52
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 0 deletions.
diff --git a/web_install/144x144.png b/web_install/144x144.png
diff --git a/web_install/48x48.png b/web_install/48x48.png
diff --git a/web_install/app.js b/web_install/app.js
@@ -0,0 +1,26 @@
+const registerServiceWorker = async () => {
+  try {
+    await navigator.serviceWorker.register("./sw.js");
+    console.log("Service worker registered");
+  } catch (e) {
+    console.log(`Registration failed: ${e}`);
+  }
+};
+
+if (navigator.serviceWorker) {
+  registerServiceWorker();
+}
+
+// Handle install buttons.
+const installPreset = (e) => {
+  // Make sure to update the visible code sample in index.html when updating
+  // this.
+  let manifest_id = "https://amandabaker.github.io/pwa/web_install.html";
+  let install_url = manifest_id;
+  navigator.install(manifest_id, install_url);
+};
+
+// const installCustom = (e) => {}
+
+document.getElementById("installPreset").addEventListener("click", installPreset);
+// document.getElementById("installCustom").addEventListener("click", installCustom);
diff --git a/web_install/index.html b/web_install/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Web Install Sample</title>
+    <link rel="manifest" href="./manifest.webmanifest" />
+  </head>
+  <body>
+    <h1>Web Install Sample</h1>
+    <p>
+      A debugging tool for the Web Install API. See more info in the
+      <a
+        href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/WebInstall/explainer.md"
+        >explainer</a
+      >
+      and to-do's in this
+      <a href="https://github.com/amandabaker/pwa/issues/22">GitHub issue</a>.
+    </p>
+
+    <h2>Install same-origin with preset id</h2>
+    <p>Executes:</p>
+    <pre><code>
+      let manifest_id = "https://amandabaker.github.io/pwa/web_install.html";
+      let install_url = manifest_id;
+      navigator.install(manifest_id, install_url);
+    </code></pre>
+    <button id="installPreset">Install</button>
+
+    <!-- <h2>Install with custom info</h2>
+    <p>Executes <code>navigator.install(manifest_id, install_url)</code> using:</p>
+    <p><code>manifest_id = </code><input></p>
+    <p><code>install_url = </code><input></p>
+    <button id="installCustom">Install</button> -->
+  </body>
+  <script src="app.js"></script>
+</html>
diff --git a/web_install/manifest.webmanifest b/web_install/manifest.webmanifest
@@ -0,0 +1,16 @@
+{
+  "name": "Web Install Sample",
+  "display": "standalone",
+  "start_url": "./index.html",
+  "theme_color": "#296f78",
+  "icons": [
+    {
+      "src": "48x48.png",
+      "sizes": "48x48"
+    },
+    {
+      "src": "144x144.png",
+      "sizes": "144x144"
+    }
+  ]
+}
diff --git a/web_install/sw.js b/web_install/sw.js
@@ -0,0 +1,12 @@
+
+this.addEventListener('install', async (event) => {
+  return;
+});
+
+self.addEventListener('fetch', e => {
+  e.respondWith(
+    fetch(e.request).catch(() => {
+      return new Response('Hello offline page');
+    })
+  );
+});