fix: app not automatically updating on iOS (#97)

src/client/src/app/components/app/menu/menu.component.ts

@@ -10,12 +10,13 @@ import { MenuModule } from 'primeng/menu';
 import { MenubarModule } from 'primeng/menubar';
 import { OverlayPanelModule } from 'primeng/overlaypanel';
 import { TooltipModule } from 'primeng/tooltip';
-import { filter, fromEvent, map, merge } from 'rxjs';
+import { filter, map, merge } from 'rxjs';
 
 import { selectAppTitle } from '../../../+state/app';
 import { AuthService } from '../../../services/auth.service';
 import { RealtimeEventsService } from '../../../services/realtime-events.service';
 import { TranslateService, TranslationKey } from '../../../services/translate.service';
+import { onDocumentVisibilityChange$ } from '../../../utils/event.utils';
 import { chainSignals } from '../../../utils/signal.utils';
 
 @Component({
@@ -102,13 +103,14 @@ export class MenuComponent {
 
   constructor() {
     if (this._swUpdate.isEnabled) {
-      merge(fromEvent(document, 'visibilitychange'), this._realtimeEventsService.onReconnected$)
+      merge(
+        onDocumentVisibilityChange$().pipe(filter(isVisible => isVisible)),
+        this._realtimeEventsService.onReconnected$
+      )
         .pipe(takeUntilDestroyed())
         .subscribe(() => {
-          if (!document.hidden) {
-            console.info('Checking for updates...');
-            this._swUpdate.checkForUpdate().then(x => console.info('Update check result:', x));
-          }
+          console.info('Checking for updates...');
+          this._swUpdate.checkForUpdate().then(x => console.info('Update check result:', x));
         });
     }
   }

src/client/src/app/services/auth.service.ts

@@ -9,7 +9,7 @@ import {
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Router } from '@angular/router';
-import { fromEvent } from 'rxjs';
+import { filter } from 'rxjs';
 
 import {
   AuthTokenInfo,
@@ -20,6 +20,7 @@ import {
 } from './storage';
 import { AuthenticationService } from '../api/services';
 import { environment } from '../environments/environment';
+import { onDocumentVisibilityChange$ } from '../utils/event.utils';
 import { assertBody } from '../utils/http.utils';
 
 export type SignInResult = 'success' | 'invalid-token' | 'error';
@@ -50,12 +51,13 @@ export class AuthService implements OnDestroy {
       }
     });
 
-    fromEvent(document, 'visibilitychange')
-      .pipe(takeUntilDestroyed())
+    onDocumentVisibilityChange$()
+      .pipe(
+        takeUntilDestroyed(),
+        filter(isVisible => isVisible)
+      )
       .subscribe(() => {
-        if (!document.hidden) {
-          this.ensureTokenNotExpired();
-        }
+        this.ensureTokenNotExpired();
       });
   }
 

src/client/src/app/utils/event.utils.ts

@@ -0,0 +1,20 @@
+import { EMPTY, fromEvent, map } from 'rxjs';
+
+export function onDocumentVisibilityChange$() {
+  let hidden: string;
+  let visibilityChange: string;
+  if ('hidden' in document) {
+    hidden = 'hidden';
+    visibilityChange = 'visibilitychange';
+  } else if ('msHidden' in document) {
+    hidden = 'msHidden';
+    visibilityChange = 'msvisibilitychange';
+  } else if ('webkitHidden' in document) {
+    hidden = 'webkitHidden';
+    visibilityChange = 'webkitvisibilitychange';
+  } else {
+    return EMPTY;
+  }
+
+  return fromEvent(document, visibilityChange).pipe(map(() => !(document as any)[hidden]));
+}