IDK why the main.js and styles.css changed but if it works, it works.

also remove one / no. 4

Author: NellowTCS

Build/package.json

@@ -1,6 +1,6 @@
 {
   "name": "htmlrunner",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A small live HTML/JS runner with console capture.",
   "main": "index.js",
   "scripts": {

Build/src/index.html

@@ -4,6 +4,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>HTMLRunner</title>
+    <link rel="shortcut icon" type="image/x-icon" href="favicon.png">
+    <link rel="apple-touch-icon" href="favicon.png">
+    <link rel="manifest" href="manifest.json">
     <!-- Font Awesome CDN -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
     <!-- CodeMirror CSS -->
@@ -25,6 +28,7 @@
         <div class="header">
             <div class="logo">HTMLRunner</div>
             <div class="controls">
+                <button class="btn" id="install-button" hidden>Install App</button>
                 <button class="btn btn-run" onclick="runCode()"><i class="fas fa-play"></i> Run</button>
                 <button class="btn btn-format" onclick="formatCode()"><i class="fas fa-code"></i> Format</button>
                 <button class="btn btn-reset" onclick="resetCode()"><i class="fas fa-undo"></i> Reset</button>
@@ -60,6 +64,45 @@
             </div>
         </div>
     </div>
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            // Register the service worker
+            if ("serviceWorker" in navigator) {
+                navigator.serviceWorker.register("service-worker.js");
+            }
+    
+            let deferredPrompt;
+            const installButton = document.getElementById("install-button");
+    
+            // Listen for the install prompt
+            window.addEventListener("beforeinstallprompt", (e) => {
+                e.preventDefault();
+                deferredPrompt = e;
+                installButton.hidden = false;
+            });
+    
+            // Handle install button click
+            installButton.addEventListener("click", async () => {
+                const isStandalone = window.matchMedia("(display-mode: standalone)").matches || window.navigator.standalone;
+    
+                if (isStandalone) {
+                    console.log("App is already installed");
+                    return;
+                }
+    
+                if (deferredPrompt) {
+                    deferredPrompt.prompt();
+                    const { outcome } = await deferredPrompt.userChoice;
+                    deferredPrompt = null;
+                    console.log(outcome === "accepted" ? "User accepted install prompt" : "User dismissed install prompt");
+                } else {
+                    if (window.matchMedia("(display-mode: browser)").matches) {
+                        window.location.assign("chrome://apps/");
+                    }
+                }
+            });
+        });
+    </script>
     <script src="main.js"></script>
 </body>
 </html>

index.html

@@ -4,6 +4,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>HTMLRunner</title>
+    <link rel="shortcut icon" type="image/x-icon" href="favicon.png">
+    <link rel="apple-touch-icon" href="favicon.png">
+    <link rel="manifest" href="manifest.json">
     <!-- Font Awesome CDN -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
     <!-- CodeMirror CSS -->
@@ -25,6 +28,7 @@
         <div class="header">
             <div class="logo">HTMLRunner</div>
             <div class="controls">
+                <button class="btn" id="install-button" hidden>Install App</button>
                 <button class="btn btn-run" onclick="runCode()"><i class="fas fa-play"></i> Run</button>
                 <button class="btn btn-format" onclick="formatCode()"><i class="fas fa-code"></i> Format</button>
                 <button class="btn btn-reset" onclick="resetCode()"><i class="fas fa-undo"></i> Reset</button>
@@ -60,6 +64,45 @@
             </div>
         </div>
     </div>
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            // Register the service worker
+            if ("serviceWorker" in navigator) {
+                navigator.serviceWorker.register("service-worker.js");
+            }
+    
+            let deferredPrompt;
+            const installButton = document.getElementById("install-button");
+    
+            // Listen for the install prompt
+            window.addEventListener("beforeinstallprompt", (e) => {
+                e.preventDefault();
+                deferredPrompt = e;
+                installButton.hidden = false;
+            });
+    
+            // Handle install button click
+            installButton.addEventListener("click", async () => {
+                const isStandalone = window.matchMedia("(display-mode: standalone)").matches || window.navigator.standalone;
+    
+                if (isStandalone) {
+                    console.log("App is already installed");
+                    return;
+                }
+    
+                if (deferredPrompt) {
+                    deferredPrompt.prompt();
+                    const { outcome } = await deferredPrompt.userChoice;
+                    deferredPrompt = null;
+                    console.log(outcome === "accepted" ? "User accepted install prompt" : "User dismissed install prompt");
+                } else {
+                    if (window.matchMedia("(display-mode: browser)").matches) {
+                        window.location.assign("chrome://apps/");
+                    }
+                }
+            });
+        });
+    </script>
     <script src="main.js"></script>
 </body>
 </html>