Add PWA service and prompt component

src/app/app.component.ts

@@ -15,11 +15,13 @@ import { MatCardModule } from '@angular/material/card';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
 import { MatInputModule } from '@angular/material/input';
-import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar'; // Importiere MatSnackBar
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
 
 import { MtxColorpickerModule } from '@ng-matero/extensions/colorpicker';
 
 import { IconsClass } from './icons.class';
+import { PwaService } from './pwa.service';
 
 
 @Component({
@@ -36,6 +38,7 @@ import { IconsClass } from './icons.class';
     MatInputModule,
     MatSnackBarModule,
     MtxColorpickerModule,
+    MatBottomSheetModule,
     NavbarComponent,
     NgIf
   ],
@@ -57,11 +60,15 @@ export class AppComponent implements AfterViewInit, OnInit {
   constructor(
     public icons: IconsClass,
     private swUpdate: SwUpdate,
-    private snackBar: MatSnackBar
+    private snackBar: MatSnackBar,
+    private pwaService: PwaService
 
   ) { }
 
   ngOnInit(): void {
+    // Initialisiere die PWA-Aufforderung
+    this.pwaService.initPwaPrompt();
+
     // Prüfe, ob der Service Worker aktiviert ist
     if (this.swUpdate.isEnabled) {
       // Abonniere das versionUpdates Observable
@@ -78,7 +85,7 @@ export class AppComponent implements AfterViewInit, OnInit {
 
   // Zeige eine Snackbar, die auf ein Update hinweist
   showUpdateSnackBar(): void {
-    const snackBarRef = this.snackBar.open('Neue Version verfügbar!', 'Neu laden', {
+    const snackBarRef = this.snackBar.open('Es ist ein Update verfügbar.', 'Aktualisieren', {
       duration: 6000, // Zeigt die Snackbar für 6 Sekunden an
     });
 

src/app/navbar/navbar.component.ts

@@ -7,7 +7,7 @@ import { MatButtonModule } from '@angular/material/button';
 @Component({
   selector: 'app-navbar',
   standalone: true,
-  imports: [MatToolbarModule, MatIconModule, MatButtonModule,],
+  imports: [MatToolbarModule, MatIconModule, MatButtonModule],
   templateUrl: './navbar.component.html'
 })
 export class NavbarComponent {

src/app/prompt/prompt.component.html

@@ -0,0 +1,23 @@
+<mat-toolbar *ngIf="data.mobileType === 'android'" color="primary" class="android-prompt">
+    <button mat-button (click)="installPwa()">
+        App installieren
+    </button>
+    <button mat-icon-button (click)="close()" class="css-util position top-right">
+        <mat-icon svgIcon="close" color="warn"></mat-icon>
+    </button>
+</mat-toolbar>
+
+<div *ngIf="data.mobileType === 'ios'" class="ios-prompt">
+    <button mat-icon-button (click)="close()" class="css-util position top-right">
+        <mat-icon svgIcon="close" color="warn"></mat-icon>
+    </button>
+    <div class="css-util text-align center">
+        <p class="css-util m-32">
+            Um diese App auf deinem Gerät zu installieren, tippe auf das "Teilen"-Menü und dann auf "Zum
+            Home-Bildschirm".
+        </p>
+        <mat-icon svgIcon="ios_share"></mat-icon>
+        <mat-icon svgIcon="navigate_next" color="accent"></mat-icon>
+        <mat-icon svgIcon="add_box"></mat-icon>
+    </div>
+</div>

src/app/prompt/prompt.component.ts

@@ -0,0 +1,31 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_BOTTOM_SHEET_DATA, MatBottomSheetModule, MatBottomSheetRef } from '@angular/material/bottom-sheet';
+import { MatButtonModule } from '@angular/material/button';
+import { IconsClass } from '../icons.class';
+import { NgIf } from '@angular/common';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+  selector: 'app-prompt',
+  standalone: true,
+  imports: [MatToolbarModule, MatButtonModule, MatBottomSheetModule, MatIconModule, NgIf],
+  templateUrl: './prompt.component.html',
+  providers: [IconsClass],
+})
+export class PromptComponent {
+
+  constructor(
+    @Inject(MAT_BOTTOM_SHEET_DATA) public data: { mobileType: 'ios' | 'android', promptEvent?: any },
+    private bottomSheetRef: MatBottomSheetRef<PromptComponent>
+  ) {}
+
+  public installPwa(): void {
+    this.data.promptEvent.prompt();
+    this.close();
+  }
+
+  public close() {
+    this.bottomSheetRef.dismiss();
+  }
+}

src/app/pwa.service.ts

@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import { Platform } from '@angular/cdk/platform';
+import { MatBottomSheet } from '@angular/material/bottom-sheet';
+import { take, timer } from 'rxjs';
+import { PromptComponent } from './prompt/prompt.component';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PwaService {
+  private promptEvent: any;
+
+  constructor(
+    private bottomSheet: MatBottomSheet,
+    private platform: Platform
+  ) { }
+
+  public initPwaPrompt() {
+    if (this.platform.ANDROID) {
+      window.addEventListener('beforeinstallprompt', (event: any) => {
+        event.preventDefault();
+        this.promptEvent = event;
+        this.openPromptComponent('android');
+      });
+    }
+    if (this.platform.IOS) {
+      const isInStandaloneMode = ('standalone' in window.navigator) && (window.navigator['standalone']);
+      if (!isInStandaloneMode) {
+        this.openPromptComponent('ios');
+      }
+    }
+  }
+
+  private openPromptComponent(mobileType: 'ios' | 'android') {
+    timer(3000)
+      .pipe(take(1))
+      .subscribe(() => this.bottomSheet.open(PromptComponent, { data: { mobileType, promptEvent: this.promptEvent } }));
+  }
+}