From 86c913b4c1e93e43c50c528c564d1a871b73eed5 Mon Sep 17 00:00:00 2001 From: nikolay Date: Mon, 24 Jul 2023 10:41:41 +0400 Subject: [PATCH] =?UTF-8?q?dev=20#14384=20=D0=9F=D1=80=D0=B0=D0=B2=D0=BA?= =?UTF-8?q?=D0=B0=20=D0=BE=D1=88=D0=B8=D0=B1=D0=BE=D0=BA=20=D0=BE=D1=82?= =?UTF-8?q?=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD=D0=B8=D1=8F=20WPA=20?= =?UTF-8?q?=D0=9A=D0=BE=D1=84=D0=B5=D0=9B=D0=B0=D0=B9=D0=BA:=20fix=20app?= =?UTF-8?q?=20install=20button?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- angular/src/app/app.component.ts | 37 +++++++++++++-- .../app/directives/download-app.directive.ts | 47 ++++--------------- angular/src/app/utils.ts | 2 + 3 files changed, 42 insertions(+), 44 deletions(-) diff --git a/angular/src/app/app.component.ts b/angular/src/app/app.component.ts index b85d6ff..45dbc33 100644 --- a/angular/src/app/app.component.ts +++ b/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); - } - }) + }, + }); } } diff --git a/angular/src/app/directives/download-app.directive.ts b/angular/src/app/directives/download-app.directive.ts index 18f7b1d..410f49f 100644 --- a/angular/src/app/directives/download-app.directive.ts +++ b/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 (this.deviceType === 'ios') { - this.el.nativeElement.style.display = 'block'; - } - this.checkInstalled(); - } - - async checkInstalled(): Promise { - if (window.matchMedia('(display-mode: standalone)').matches - || await pwaInstalled()) { + if (AppComponent.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(); - this.deferredPrompt.userChoice.then((res: any) => { + AppComponent.pwaPrompt.prompt(); + 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; }); } - } diff --git a/angular/src/app/utils.ts b/angular/src/app/utils.ts index 223a836..46fd5ec 100644 --- a/angular/src/app/utils.ts +++ b/angular/src/app/utils.ts @@ -12,6 +12,8 @@ export function getTypeDevice(): DeviceType { } export async function pwaInstalled(): Promise { + 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) {