dev #14384 Правка ошибок отображения WPA КофеЛайк: fix app install button

angular/src/app/app.component.ts

@@ -1,8 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, HostListener, OnInit } from '@angular/core';
 import { RouteConfigLoadStart, Router } from '@angular/router';
 import { AuthService } from './services/auth.service';
 import { CookiesService } from './services/cookies.service';
 import { JsonrpcService, RpcService } from './services/jsonrpc.service';
+import { pwaInstalled } from './utils';
 
 @Component({
   selector: 'app-root',
@@ -11,12 +12,14 @@ import { JsonrpcService, RpcService } from './services/jsonrpc.service';
 })
 export class AppComponent implements OnInit {
   title = 'Coffee Like Test';
+  public static pwaPrompt: any;
+  public static pwaInstalled: boolean = true;
 
   constructor(
     private router: Router,
     private cookiesService: CookiesService,
     private jsonRpcService: JsonrpcService,
-    private authService: AuthService,
+    private authService: AuthService
   ) {
     this.router.events.subscribe((x) => {
       if (x instanceof RouteConfigLoadStart && x.route.path === '') {
@@ -37,6 +40,24 @@ export class AppComponent implements OnInit {
     });
   }
 
+  @HostListener('window:beforeinstallprompt', ['$event'])
+  onBeforeInstallPrompt(e: any) {
+    e.preventDefault();
+    AppComponent.pwaPrompt = e;
+    if (AppComponent.pwaPrompt) {
+      AppComponent.pwaInstalled = false;
+    }
+  }
+
+  @HostListener('window:appinstalled', ['$event'])
+  onAppInstalled(e: any) {
+    // Prevent Chrome 67 and earlier from automatically showing the prompt
+    e.preventDefault();
+    // Stash the event so it can be triggered later.
+    AppComponent.pwaPrompt = e;
+    AppComponent.pwaInstalled = true;
+  }
+
   getAdditionalInfo() {
     return this.jsonRpcService.rpc(
       {
@@ -49,16 +70,22 @@ export class AppComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    pwaInstalled().then((res) => {
+      AppComponent.pwaInstalled = res;
+    });
     if (this.authService.authorized) {
       this.authService.getUserInfo();
     }
     this.getAdditionalInfo().subscribe({
       next: (value) => {
-        this.cookiesService.setCookie('presentation-option', value?.data?.interface_id || 'default')
+        this.cookiesService.setCookie(
+          'presentation-option',
+          value?.data?.interface_id || 'default'
+        );
       },
       error: (err) => {
         console.error(err);
-      }
+      },
-    })
+    });
   }
 }

angular/src/app/directives/download-app.directive.ts

@@ -7,57 +7,27 @@ import {
 } from '@angular/core';
 
 import { MessageService } from 'primeng/api';
-import { getTypeDevice, pwaInstalled } from 'src/app/utils';
+import { AppComponent } from '../app.component';
 
 @Directive({
   selector: '[appDownloadApp]',
 })
 export class DownloadAppDirective implements OnInit {
-  public deviceType: 'ios' | 'android' | null = null;
-  public deferredPrompt: any;
-
   constructor(
     private messageService: MessageService,
     public renderer: Renderer2,
-    private el: ElementRef,
+    private el: ElementRef
-  ) { }
+  ) {}
 
   ngOnInit(): void {
-    getTypeDevice();
+    if (AppComponent.pwaInstalled) {
-    if (this.deviceType === 'ios') {
-      this.el.nativeElement.style.display = 'block';
-    }
-    this.checkInstalled();
-  }
-
-  async checkInstalled(): Promise<void> {
-    if (window.matchMedia('(display-mode: standalone)').matches
-      || await pwaInstalled()) {
       this.el.nativeElement.style.display = 'none';
     }
   }
 
-  @HostListener('window:beforeinstallprompt', ['$event'])
-  onBeforeInstallPrompt(e: any) {
-    e.preventDefault();
-    this.deferredPrompt = e;
-    if (this.deferredPrompt) {
-      this.el.nativeElement.style.display = 'block';
-    }
-  }
-
-  @HostListener('window:appinstalled', ['$event'])
-  onAppInstalled(e: any) {
-    // Prevent Chrome 67 and earlier from automatically showing the prompt
-    e.preventDefault();
-    // Stash the event so it can be triggered later.
-    this.deferredPrompt = e;
-    this.el.nativeElement.style.display = 'none';
-  }
-
   @HostListener('click', ['$event'])
   async downloadApp(event: MouseEvent) {
-    if (!this.deferredPrompt) {
+    if (!AppComponent.pwaPrompt) {
       this.messageService.clear();
       this.messageService.add({
         severity: 'error',
@@ -65,8 +35,8 @@ export class DownloadAppDirective implements OnInit {
       });
       return;
     }
-    this.deferredPrompt.prompt();
+    AppComponent.pwaPrompt.prompt();
-    this.deferredPrompt.userChoice.then((res: any) => {
+    AppComponent.pwaPrompt.userChoice.then((res: any) => {
       if (res.outcome === 'accepted') {
         this.messageService.clear();
         this.messageService.add({
@@ -74,8 +44,7 @@ export class DownloadAppDirective implements OnInit {
           summary: 'Спасибо за установку!',
         });
       }
-      this.deferredPrompt = null;
+      AppComponent.pwaPrompt = null;
     });
   }
-
 }

angular/src/app/utils.ts

@@ -12,6 +12,8 @@ export function getTypeDevice(): DeviceType {
 }
 
 export async function pwaInstalled(): Promise<boolean> {
+  if (window.matchMedia('(display-mode: standalone)').matches) return true;
+
   if ('getInstalledRelatedApps' in navigator) {
     const apps = await (window.navigator as any).getInstalledRelatedApps();
     for (const app of apps) {