feat: update button

Author: emp74ark

src/app/components/update-button/update-button.css

@@ -0,0 +1,5 @@
+@if (updateFound$ | async) {
+  <button matIconButton (click)="updateHandler()">
+    <mat-icon>update</mat-icon>
+  </button>
+}

src/app/components/update-button/update-button.html

@@ -0,0 +1,21 @@
+import { Component, inject } from '@angular/core'
+import { AppUpdate } from '../../services/app-update'
+import { AsyncPipe } from '@angular/common'
+import { MatIconButton } from '@angular/material/button'
+import { MatIconModule } from '@angular/material/icon'
+
+@Component({
+  selector: 'app-update-button',
+  imports: [AsyncPipe, MatIconModule, MatIconButton],
+  templateUrl: './update-button.html',
+  styleUrl: './update-button.css',
+})
+export class UpdateButton {
+  private readonly appUpdates = inject(AppUpdate)
+
+  updateFound$ = this.appUpdates.updateFound
+
+  updateHandler() {
+    this.appUpdates.reloadApp()
+  }
+}

src/app/components/update-button/update-button.ts

@@ -13,3 +13,9 @@
   margin: 0;
   gap: 1rem;
 }
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}

src/app/pages/welcome-page/welcome-page.css

@@ -1,10 +1,11 @@
 <mat-card>
-  <mat-card-header>
+  <mat-card-header class="header">
     <mat-card-title>
       <h1>
         RSS Reader
       </h1>
     </mat-card-title>
+    <app-update-button/>
   </mat-card-header>
   <mat-card-content class="content">
     <ul class="details">

src/app/pages/welcome-page/welcome-page.html

@@ -12,6 +12,7 @@ import { MatIconModule } from '@angular/material/icon'
 import { HealthService } from '../../services/health-service'
 import { Subscription } from 'rxjs'
 import { environment } from '../../../environments/environment'
+import { UpdateButton } from '../../components/update-button/update-button'
 
 @Component({
   selector: 'app-welcome-page',
@@ -25,12 +26,14 @@ import { environment } from '../../../environments/environment'
     MatIconModule,
     MatFabButton,
     MatAccordion,
+    UpdateButton,
   ],
   templateUrl: './welcome-page.html',
   styleUrl: './welcome-page.css',
 })
 export class WelcomePage implements OnInit, OnDestroy {
   private readonly healthService = inject(HealthService)
+
   subscription: Subscription[] = []
 
   ngOnInit() {

src/app/pages/welcome-page/welcome-page.ts

@@ -0,0 +1,33 @@
+import { ApplicationRef, inject, Injectable } from '@angular/core'
+import { SwUpdate } from '@angular/service-worker'
+import { BehaviorSubject, concat, first, interval } from 'rxjs'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AppUpdate {
+  private appRef = inject(ApplicationRef)
+  private swu = inject(SwUpdate)
+
+  updateFound = new BehaviorSubject<boolean>(false)
+
+  constructor() {
+    const appIsStable$ = this.appRef.isStable.pipe(first((isStable) => isStable))
+    const schedule$ = interval(6 * 60 * 60 * 1000) // 6h
+    const scheduledEvent$ = concat(appIsStable$, schedule$)
+
+    scheduledEvent$.subscribe(async () => {
+      try {
+        console.info(`[${new Date().toLocaleString()}] Checking for updates...`)
+        const updateFound = await this.swu.checkForUpdate()
+        this.updateFound.next(updateFound)
+      } catch (err) {
+        console.error('Failed to check for updates:', err)
+      }
+    })
+  }
+
+  reloadApp() {
+    document.location.reload()
+  }
+}