Check app updates

Frontend/src/app/app.component.ts

@@ -1,5 +1,7 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { SwUpdate } from '@angular/service-worker';
+import { NotificationsService } from './services/notifications.service';
 
 @Component({
     selector: 'app-root',
@@ -9,5 +11,30 @@ import { RouterOutlet } from '@angular/router';
     imports: [RouterOutlet]
 })
 export class AppComponent {
-  title = 'DiunaBI';
+  constructor(
-}
+    private readonly _swUpdate: SwUpdate,
+    private _notifications: NotificationsService
+  ) {
+    this._swUpdate.versionUpdates.subscribe((evt) => {
+      console.log('Version update', evt);
+      if (evt.type === 'VERSION_READY') {
+        this._swUpdate.activateUpdate().then(() => {
+          this._notifications.add({
+            text: "New version available. DiunaBI will restart in 10 seconds.",
+            duration: 10000,
+            dismiss: () => {
+              window.location.reload()
+            },
+            btn: 'Cancel',
+            action: () => {
+              this._notifications.add({
+                text: "Restart canceled.",
+                btn: "Hide"
+              });
+            }
+          })
+        });
+      }
+    })
+  }
+ }

Frontend/src/app/modules/layers/layers-list/layers-list.component.ts

@@ -27,7 +27,6 @@ export class LayersListComponent implements OnInit {
 
   constructor(
     private _http: HttpClient,
-    private notifications$: NotificationsService
   ) { }
 
   async ngOnInit() {

Frontend/src/app/services/notifications.service.ts

@@ -37,8 +37,14 @@ export class NotificationsService {
     }
     return message.id;
   }
-  private remove(id: string|undefined) {
+  private remove(id: string | undefined, checkDismiss: boolean = true) {
-    this.messages = this.messages.filter(x => x.id!==id);
+    if (checkDismiss) {
+      const message = this.messages.find(x => x.id === id);
+      if (message && message.dismiss) {
+        message.dismiss();
+      }
+    }
+    this.messages = this.messages.filter(x => x.id !== id);
     this.sortMessages();
     if (this.messages.length === 0 && this.handler) {
       this.handler.dismiss();
@@ -51,7 +57,7 @@ export class NotificationsService {
   }
   doAction(message: Message) {
     if (message.action) { message.action(); }
-    this.remove(message.id);
+    this.remove(message.id, false);
   }
 }
 
@@ -62,6 +68,8 @@ interface Message {
   btn?: string;
   // eslint-disable-next-line @typescript-eslint/ban-types
   action?: Function;
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  dismiss?: Function;
   createdAt?: Moment,
   parentId?: string;
 }

Frontend/src/main.ts

@@ -1,7 +1,7 @@
 import { enableProdMode, LOCALE_ID, isDevMode, importProvidersFrom } from '@angular/core';
 import { environment } from './environments/environment';
 import { AppComponent } from './app/app.component';
-import { ServiceWorkerModule } from '@angular/service-worker';
+import { provideServiceWorker } from '@angular/service-worker';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { AppRoutingModule } from './app/app-routing.module';
 import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
@@ -16,18 +16,15 @@ import { registerLocaleData } from '@angular/common';
 registerLocaleData(localePl);
 
 if (environment.production) {
-  enableProdMode();
+    enableProdMode();
 }
 
 bootstrapApplication(AppComponent, {
     providers: [
-        importProvidersFrom(BrowserModule, AppRoutingModule, ServiceWorkerModule.register('ngsw-worker.js', {
+        importProvidersFrom(
-            enabled: !isDevMode(),
+            BrowserModule,
-            // Register the ServiceWorker as soon as the application is stable
+            AppRoutingModule,
-            // or after 30 seconds (whichever comes first).
+            MatBottomSheetModule),
-            registrationStrategy: 'registerWhenStable:30000'
-        }),
-        MatBottomSheetModule),
         { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS] },
         { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } },
         { provide: LOCALE_ID, useValue: 'pl' },
@@ -42,7 +39,11 @@ bootstrapApplication(AppComponent, {
             multi: true
         },
         provideAnimations(),
-        provideHttpClient(withInterceptorsFromDi())
+        provideHttpClient(withInterceptorsFromDi()),
+        provideServiceWorker('ngsw-worker.js', {
+            enabled: !isDevMode(),
+            registrationStrategy: 'registerWhenStable:30000'
+        })
     ]
 })
-  .catch(err => console.error(err));
+    .catch(err => console.error(err));