Bugfixes and update polling

src/app/app.component.ts

@@ -1,6 +1,8 @@
-import { Component } from '@angular/core';
+import { ApplicationRef, Component } from '@angular/core';
 import { SwUpdate } from '@angular/service-worker';
 import { MessageService } from './services/message.service';
+import { concat, first, interval, takeWhile } from 'rxjs';
+import { config } from './config/config';
 
 @Component({
   selector: 'app-root',
@@ -11,23 +13,34 @@ export class AppComponent {
   title = 'music-tools';
   isStandalone: boolean = (navigator as any)?.standalone
   isIOSSafari = this.getIOSSafari()
+  updateFound: boolean
 
-  constructor(private swUpdate: SwUpdate, private messageService: MessageService) {
-    if (this.swUpdate.isEnabled) {
-      swUpdate.versionUpdates.subscribe((update) => {
-        switch (update.type) {
-          case 'VERSION_READY':
+  constructor(
+    private swUpdate: SwUpdate,
+    private messageService: MessageService,
+    appRef: ApplicationRef
+  ) {
+    // Allow the app to stabilize first, before starting
+    // polling for updates with `interval()`.
+    const appIsStable$ = appRef.isStable.pipe(first(isStable => isStable === true))
+    const secondsInterval: number = this.isLocal ? 5 : 120
+    const intervalOnceStable$ = concat(appIsStable$, interval(secondsInterval * 1000))
+    intervalOnceStable$.pipe(takeWhile(() => !this.updateFound)).subscribe(async () => {
+      // console.log("Checking for app updates...")
+      try {
+        this.updateFound = await swUpdate.checkForUpdate()
+        if (this.updateFound) {
+          if (this.isLocal) {
+            window.location.reload()
+          } else {
             this.messageService.open("New app version is available!", "center", true)
-            break
-          case 'VERSION_INSTALLATION_FAILED':
-            // this.messageService.open(`Failed to install app version`)
-            break
-        }
-      })
-    } else {
-      console.warn("swUpdate not enabled")
-    }
+          }
 
+        }
+      } catch (err) {
+        console.error('Failed to check for updates: ', err);
+      }
+    })
   }
 
   get showAddToHomescreen(): boolean {
@@ -37,6 +50,10 @@ export class AppComponent {
       localStorage.getItem("dismissAddToHomescreen") != "true"
   }
 
+  get isLocal(): boolean {
+    return config.spotify.redirectUri.includes("localhost")
+  }
+
   getIOSSafari(): boolean {
     const userAgent = navigator.userAgent;
     const isIOS = /iPad|iPhone|iPod/.test(userAgent) && !(window as any).MSStream;

src/app/components/add-to-homescreen/add-to-homescreen.component.html

@@ -3,7 +3,7 @@
         <img src="/assets/icons/icon-48x48.png">
         <span style="display: block; text-align: center; margin-top: -4px; font-weight: bold;">N.M.T</span>
     </span>
-    <span style="padding-left: 0.5rem;">For the best experience, install the app by clicking the <img src="/assets/img/share-icon-ios.jpeg" matTooltip="Share Button" style="width: auto; height: 18px; vertical-align: middle; border-radius: 2px;"> button below and selecting <strong>Add to Home Screen</strong>.</span>
+    <span style="padding-left: 0.5rem;">For the best experience, install the app by clicking the <img src="/assets/img/share-icon-ios.jpeg" matTooltip="Share Button" style="width: auto; height: 18px; vertical-align: middle; border-radius: 2px;"> button below (in <strong>Safari</strong>) and selecting <strong>Add to Home Screen</strong>.</span>
     <span style="min-width: 24px; padding-right: 0.75rem;" matTooltip="Dismiss" (click)="dismiss()" class="clickable">
         <mat-icon>close</mat-icon> 
     </span>

src/app/components/anniversify/anniversify.component.html

@@ -15,7 +15,7 @@ <h2>Summary</h2>
             <span *ngIf="!anniversifyDetails.lastRun">Your first run should occur within 24 hours. </span> 
             <span *ngIf="anniversifyDetails.libraryLastFetched">Your Spotify library is updated weekly, last fetched <span [matTooltip]="moment(anniversifyDetails.libraryLastFetched).format()" style="text-decoration: underline;">{{ moment(anniversifyDetails.libraryLastFetched).locale('en-US').fromNow() }}</span>.</span>
             <span *ngIf="!anniversifyDetails.libraryLastFetched">Your Spotify library will be updated weekly.</span>
-            <span *ngIf="moment().diff(moment(anniversifyDetails.registerDate), 'days') <= 3"><br><hr>If you enabled email notifications, a welcome email was sent from <u>{{ emailSender }}</u>.<br><strong>Please check your spam/junk and make sure to WHITELIST this email so that you'll recieve notifications properly!</strong></span>
+            <span *ngIf="anniversifyDetails.registerDate && moment().diff(moment(anniversifyDetails.registerDate), 'days') <= 3"><br><hr>If you enabled email notifications, a welcome email was sent from <u>{{ emailSender }}</u>.<br><strong>Please check your spam/junk and make sure to WHITELIST this email so that you'll recieve notifications properly!</strong></span>
             <ng-container *ngIf="showDeleteConfirmation">
                 <hr>
                 <span style="font-weight: bold;">Are you sure you want to stop Anniversify? If so, click the button below. You are always welcome to start notifications again at any time!</span>

src/app/components/anniversify/anniversify.component.ts

@@ -130,6 +130,7 @@ export class AnniversifyComponent implements OnInit {
       name: [null],
       libraryLastFetched: [null],
       notifyTime: [null, Validators.compose([Validators.required])],
+      registerDate: [null],
       pushNotificationObject: [null],
     })
   }

src/app/services/message.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { MatSnackBar, MatSnackBarHorizontalPosition } from '@angular/material/snack-bar'
+import { MatSnackBar, MatSnackBarHorizontalPosition, MatSnackBarVerticalPosition } from '@angular/material/snack-bar'
 
 @Injectable({
   providedIn: 'root',
@@ -23,25 +23,23 @@ export class MessageService {
     if (message.toLowerCase().includes("app version")) {
       this.snackBar.open(message, "Update", {
         horizontalPosition: this.positions[position],
+        verticalPosition: "bottom",
         duration: 0
       }).onAction().subscribe(() => {
-        if ('serviceWorker' in navigator) {
-          navigator.serviceWorker.getRegistrations().then(function(registrations) {
-            // registrations.map(r => { r.update() })
-            window.location.reload()
-           })
-          localStorage.setItem("dismissAddToHomescreen", "false")
-        }
+        window.location.reload()
+        localStorage.setItem("dismissAddToHomescreen", "false")
       })
     } else {
       if (persistent) {
         this.snackBar.open(message, undefined, {
           horizontalPosition: this.positions[position],
+          verticalPosition: "bottom",
           duration: 0
         })
       } else {
         this.snackBar.open(message, "Dismiss", {
           horizontalPosition: this.positions[position],
+          verticalPosition: "bottom",
           duration: 5000
         })
       }