Add "Install App" button

src/app/app.component.css

@@ -101,3 +101,23 @@ button:hover {
   font-size: 1.2rem;
   color: #666;
 }
+
+.install-button {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  padding: 12px 24px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 24px;
+  cursor: pointer;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+  z-index: 1000;
+  transition: transform 0.2s ease;
+}
+
+.install-button:hover {
+  transform: scale(1.05);
+  background-color: #0056b3;
+}

src/app/app.component.html

@@ -30,4 +30,10 @@
   }
 </div>
 
+@if (showInstallButton) {
+  <button class="install-button" (click)="installPwa()">
+    Install App
+  </button>
+}
+
 <router-outlet />

src/app/app.component.ts

@@ -15,6 +15,12 @@ export class AppComponent {
   blurredImageUrl: string | null = null;
   isProcessing = false;
   blurAmount = 100; // Default blur amount
+  private deferredPrompt: any;
+  showInstallButton = false;
+
+  constructor() {
+    this.handleInstallPrompt();
+  }
 
   onDragOver(event: DragEvent) {
     event.preventDefault();
@@ -148,6 +154,32 @@ export class AppComponent {
     });
   }
 
+  private handleInstallPrompt() {
+    window.addEventListener('beforeinstallprompt', (e) => {
+      e.preventDefault();
+      this.deferredPrompt = e;
+      this.showInstallButton = true;
+    });
+
+    window.addEventListener('appinstalled', () => {
+      this.showInstallButton = false;
+      this.deferredPrompt = null;
+    });
+  }
+
+  async installPwa() {
+    if (!this.deferredPrompt) return;
+
+    this.deferredPrompt.prompt();
+    const { outcome } = await this.deferredPrompt.userChoice;
+
+    if (outcome === 'accepted') {
+      this.showInstallButton = false;
+    }
+
+    this.deferredPrompt = null;
+  }
+
   downloadImage() {
     if (this.blurredImageUrl) {
       const link = document.createElement('a');