service worker update

angular.json

@@ -52,7 +52,8 @@
                   "maximumError": "8kb"
                 }
               ],
-              "outputHashing": "all"
+              "outputHashing": "all",
+              "serviceWorker": "ngsw-config.json"
             },
             "leave-prod": {
               "budgets": [
@@ -161,7 +162,8 @@
                   "replace": "src/dependencies/angularlib/environments/environment.ts",
                   "with":"src/dependencies/angularlib/environments/environment.t.ts"
                 }
-              ]
+              ],
+              "serviceWorker": "ngsw-config.json"
             }
           },
           "defaultConfiguration": "development"

ngsw-config.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
+  "index": "/index.html",
+  "assetGroups": [
+    {
+      "name": "app",
+      "installMode": "prefetch",
+      "resources": {
+        "files": [
+          "/favicon.ico",
+          "/index.html",
+          "/manifest.webmanifest",
+          "/*.css",
+          "/*.js"
+        ]
+      }
+    },
+    {
+      "name": "assets",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "/**/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
+        ]
+      }
+    }
+  ]
+}

package.json

@@ -26,6 +26,7 @@
     "@angular/platform-browser": "^18.2.2",
     "@angular/platform-browser-dynamic": "^18.2.2",
     "@angular/router": "^18.2.2",
+    "@angular/service-worker": "^18.2.2",
     "@ngxs/devtools-plugin": "^18.1.1",
     "@ngxs/storage-plugin": "^18.1.1",
     "@ngxs/store": "^18.1.1",
@@ -51,4 +52,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.4.5"
   }
-}
+}

public/manifest.webmanifest

@@ -0,0 +1,65 @@
+{
+  "name": "Financial Information System",
+  "short_name": "FIS",
+  "theme_color": "#1976d2",
+  "background_color": "#fafafa",
+  "display": "fullscreen",
+  "scope": "./",
+  "start_url": "./#/dashboard",
+  "icons": [
+    {
+      "src": "assets/icons/icon-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable any"
+    }
+  ],
+  "shortcuts": [
+    {
+      "name": "Apply New Leave",
+      "url": "/#/leave;type=new",
+      "icons": [{
+        "src": "https://cdn.swopt.com/media/icons/leave.png",
+        "sizes": "192x192"
+      }]
+    },
+    {
+      "name": "View Sales Tender",
+      "url": "/#/tender;type=sales",
+      "icons": [{
+        "src": "https://cdn.swopt.com/media/icons/quotation.png",
+        "sizes": "192x192"
+      }]
+    }
+  ]
+}

src/app/app.component.ts

@@ -106,8 +106,8 @@ export class AppComponent extends BaseComponent implements OnInit {
     });
 
     /**subsribe user changes and initiate timeout timer */
-    this.loginService.user$.pipe(untilDestroy(this)).subscribe(user => {
-      if (user) {
+    this.loginService.user$.pipe(untilDestroy(this)).subscribe((user:any) => {
+      if (user?.fisInfo) {
         this.timeout.pipe(untilDestroy(this),takeUntil(this.loginService.loggedOut)).subscribe();
         if (!this.leaveNotificationSubscription) {
           this.leaveNotificationSubscription = this.leaveNotification.subscribe({
@@ -116,6 +116,9 @@ export class AppComponent extends BaseComponent implements OnInit {
             }
           });
         }
+      } else {
+        if (this.leaveNotificationSubscription) this.leaveNotificationSubscription.unsubscribe();
+        this.leaveNotificationSubscription = undefined;
       }
     });
 

src/app/app.config.ts

@@ -20,8 +20,12 @@ export const appConfig: ApplicationConfig = {
     importProvidersFrom(DpModule),
     importProvidersFrom(Angularlib),
     importProvidersFrom(LoginModule),
-    provideServiceWorker('ngsw-worker.js'),
     provideRouter(routes,withHashLocation(),withRouterConfig({onSameUrlNavigation:'reload'})),
-    provideHttpClient()
+    provideHttpClient(), 
+    provideServiceWorker('ngsw-worker.js', {
+      enabled: true,
+      registrationStrategy: 'registerImmediately'
+      // registrationStrategy: 'registerWhenStable:30000'
+    })
   ]
 };

src/app/decorators/leave.notification.decorator.ts

@@ -22,7 +22,7 @@ export class LeaveNotificationDecorator<T> extends DecoratorSubject<T> {
     ) {
         super();
         this.empRoleId = component.loginService.user?.fisInfo?.defaultEmpRoleId;
-        this.messaging.Notification(request).pipe(untilDestroy(component)).subscribe({
+        this.messaging.Notification(request).pipe(untilDestroy(component),debounceNotification(200)).subscribe({
             next: (notif:any) => {
                 if (!this.subscriptionId) this.subscriptionId = notif?.data?.SubscriptionData?.subscriptionId;
                 this.onReceiveNotification(notif)

src/dependencies/angularlib

@@ -1 +1 @@
-Subproject commit 858e772f2756253b835fb7e5589b3c1f97dc8af0
+Subproject commit 202c35a8fb49a3a68689815963cc37a8d9858c9a

src/index.html

@@ -8,13 +8,14 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
-  <link rel="manifest" href="manifest.webmanifest">
   <meta name="theme-color" content="#1976d2">
-  <meta content='yes' name='apple-mobile-web-app-capable'/>
-  <meta content='yes' name='mobile-web-app-capable'/>
   <script>var exports={}</script>
+  <link rel="manifest" href="manifest.webmanifest">
+  <meta content="yes" name="apple-mobile-web-app-capable"/>
+  <meta content="yes" name="mobile-web-app-capable"/>
 </head>
 <body class="mat-app-background">
   <app-root></app-root>
+  <noscript>Please enable JavaScript to continue using this application.</noscript>
 </body>
 </html>