build

.github/workflows/azure-static-web-apps-icy-bush-0912f3610.yml

@@ -30,7 +30,8 @@ jobs:
           # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
           app_location: "/" # App source code path
           api_location: "" # Api source code path - optional
-          output_location: "dist/ng-ai" # Built app content directory - optional
+          output_location: "dist/ng-ai/browser" # Built app content directory - optional
+          app_build_command: 'npm run build-pwa'
           ###### End of Repository/Build Configurations ######
 
   close_pull_request_job:

src/app/navigation/navigation.component.ts

@@ -11,6 +11,7 @@ import { map, shareReplay } from 'rxjs/operators';
 import { RouterOutlet } from '@angular/router';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { showError, showSuccess } from './../ui.utils';
+import { Workbox, messageSW } from 'workbox-window';
 
 @Component({
   selector: 'app-navigation',
@@ -31,6 +32,50 @@ export class NavigationComponent {
   private breakpointObserver = inject(BreakpointObserver);
   constructor(private snackBar: MatSnackBar) {}
 
+  ngOnInit(): void {
+    if ('serviceWorker' in navigator) {
+      const wb = new Workbox('/sw.js');
+
+      const showSkipWaitingPrompt = (event: any) => {
+        let snackBarRef = this.snackBar.open(
+          'A new version of the website available',
+          'Reload page',
+          {
+            duration: 5000,
+          }
+        );
+
+        // Displaying prompt
+
+        snackBarRef.onAction().subscribe(() => {
+          // Assuming the user accepted the update, set up a listener
+          // that will reload the page as soon as the previously waiting
+          // service worker has taken control.
+          wb.addEventListener('controlling', () => {
+            window.location.reload();
+          });
+
+          // This will postMessage() to the waiting service worker.
+          wb.messageSkipWaiting();
+        });
+      };
+
+      // Add an event listener to detect when the registered
+      // service worker has installed but is waiting to activate.
+      wb.addEventListener('waiting', showSkipWaitingPrompt);
+
+      wb.register()
+        .then((reg) => {
+          console.log('Successful service worker registration', reg);
+        })
+        .catch((err) =>
+          console.error('Service worker registration failed', err)
+        );
+    } else {
+      console.error('Service Worker API is not supported in current browser');
+    }
+  }
+
   isHandset$: Observable<boolean> = this.breakpointObserver
     .observe(Breakpoints.Handset)
     .pipe(