Prompt refresh when build UUID changes (#24)

package.json

@@ -18,6 +18,7 @@
     "@angular/forms": "~10.1.5",
     "@angular/platform-browser": "~10.1.5",
     "@angular/platform-browser-dynamic": "~10.1.5",
+    "@angular/pwa": "^0.1001.7",
     "@angular/router": "~10.1.5",
     "@circlon/angular-tree-component": "^10.0.0",
     "@fortawesome/fontawesome-free": "^5.15.1",

src/app/app.component.ts

@@ -1,6 +1,13 @@
 import {AfterViewInit, Component, ElementRef, OnInit, ViewChild, HostListener, Host} from '@angular/core';
 
-import {AlertController, ModalController, Platform, PopoverController, LoadingController} from '@ionic/angular';
+import {
+  AlertController,
+  ModalController,
+  Platform,
+  PopoverController,
+  LoadingController,
+  ToastController
+} from '@ionic/angular';
 import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';
 import { ApiService } from './service/api.service';
@@ -70,7 +77,8 @@ export class AppComponent implements OnInit {
   public darkMode = false;
   protected loader?: any;
   protected hasSearchOpen = false;
-
+  protected versionInterval?: any;
+  protected showedNewVersionAlert = false;
   protected initialized$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
 
   constructor(
@@ -85,6 +93,7 @@ export class AppComponent implements OnInit {
     protected session: SessionService,
     protected loading: LoadingController,
     protected navService: NavigationService,
+    protected toasts: ToastController,
   ) {
     this.initializeApp();
   }
@@ -96,9 +105,37 @@ export class AppComponent implements OnInit {
         this.loader.dismiss();
         this.menuTree.treeModel.expandAll();
       }, 10);
+
+      if ( !this.versionInterval ) {
+        this.versionInterval = setInterval(() => {
+          this.checkNewVersion();
+        }, 1000 * 60 * 5); // Check for new version every 5 mins
+      }
     });
   }
 
+  async checkNewVersion() {
+    if ( !this.showedNewVersionAlert && await this.session.newVersionAvailable() ) {
+      const toast = await this.toasts.create({
+        cssClass: 'compat-toast-container',
+        header: 'Update Available',
+        message: `A new version of ${this.appName} is available. Please refresh to update.`,
+        buttons: [
+          {
+            side: 'end',
+            text: 'Refresh',
+            handler: () => {
+              window.location.reload();
+            },
+          },
+        ],
+      });
+
+      this.showedNewVersionAlert = true;
+      await toast.present();
+    }
+  }
+
   ngOnInit() {
     if ( !this.initialized$.getValue() ) {
       this.navService.sidebarRefresh$.subscribe(([_, quiet]) => {
@@ -376,7 +413,6 @@ export class AppComponent implements OnInit {
   }
 
   async initializeApp() {
-    console.log('session', this);
     this.loader = await this.loading.create({
       message: 'Starting up...',
       cssClass: 'noded-loading-mask',

src/app/service/api.service.ts

@@ -10,6 +10,7 @@ import ApiResponse from '../structures/ApiResponse';
 export class ApiService {
   protected baseEndpoint: string = environment.backendBase;
   protected statUrl: string = environment.statUrl;
+  protected versionUrl: string = environment.versionUrl;
 
   constructor(
       protected http: HttpClient,
@@ -31,6 +32,17 @@ export class ApiService {
     return this._request(this.statUrl);
   }
 
+  public version(): Promise<string> {
+    return new Promise((res, rej) => {
+      this._request(this.versionUrl).subscribe({
+        next: result => {
+          res(result.data.text.trim());
+        },
+        error: rej,
+      });
+    });
+  }
+
   protected _request(endpoint, params = {}, method: 'get'|'post' = 'get'): Observable<ApiResponse> {
     return new Observable<ApiResponse>(sub => {
       let data: any = {}

src/app/service/session.service.ts

@@ -11,6 +11,7 @@ export class SessionService {
     protected data: any = {};
     protected saveTriggered = false;
     protected saving = false;
+    protected loadedVersion = '';
     protected privTriggerSave = debounce(() => {
         if ( this.saving ) {
             this.triggerSave();
@@ -26,11 +27,21 @@ export class SessionService {
         this.privTriggerSave();
     }
 
+    public get version() {
+        return this.loadedVersion;
+    }
+
     constructor(
         protected readonly api: ApiService,
     ) { }
 
+    async newVersionAvailable() {
+        return (await this.api.version()) !== this.loadedVersion;
+    }
+
     async stat() {
+        this.loadedVersion = await this.api.version();
+
         return new Promise((res, rej) => {
             this.api.stat().subscribe(response => {
                 res(response.data);

src/environments/environment.prod.ts

@@ -2,4 +2,5 @@ export const environment = {
   production: true,
   backendBase: '/api/v1',
   statUrl: '/stat',
+  versionUrl: '/i/version.html',
 };

src/environments/environment.ts

@@ -6,6 +6,7 @@ export const environment = {
   production: false,
   backendBase: '/link_api/api/v1',
   statUrl: '/link_api/stat',
+  versionUrl: '/link_api/assets/version.html',
 };
 
 /*

src/global.scss

@@ -77,3 +77,12 @@ div.picker-wrapper {
 hr {
   background: darkgray;
 }
+
+.compat-toast-container {
+  color: white !important;
+}
+
+.compat-toast-container::part(header) {
+  font-size: 1.2em;
+  font-weight: bold;
+}