feat: Service worker, perf tuning (#356)

Client/angular.json

@@ -72,18 +72,9 @@
                   "with": "src/environments/environment.prod.ts"
                 }
               ],
-              "optimization": {
-                "styles": {
-                  "minify": true,
-                  "inlineCritical": true
-                },
-                "scripts": true,
-                "fonts": {
-                  "inline": true
-                }
-              },
+              "optimization": true,
               "outputHashing": "all",
-              "sourceMap": true,
+              "sourceMap": false,
               "namedChunks": false,
               "extractLicenses": true,
               "budgets": [

Client/package.json

@@ -19,6 +19,7 @@
     "@angular/platform-browser": "18.2.0",
     "@angular/platform-browser-dynamic": "18.2.0",
     "@angular/router": "18.2.0",
+    "@angular/service-worker": "18.2.0",
     "@ctrl/tinycolor": "4.1.0",
     "@ng-matero/extensions": "18.2.0",
     "chart.js": "4.4.4",

Client/src/app/app.module.ts

@@ -3,7 +3,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { CommonModule } from '@angular/common';
 
-import { MatButtonModule as MatButtonModule } from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';

Client/src/app/chart/chart.module.ts

@@ -13,19 +13,27 @@ import { ChartComponent } from './chart.component';
 
 import { ChartService } from '../services/chart.service';
 
-@NgModule({ declarations: [
-        ChartComponent
-    ],
-    exports: [
-        ChartComponent
-    ],
-    bootstrap: [ChartComponent], imports: [CommonModule,
-        MatButtonModule,
-        MatDialogModule,
-        MatIconModule,
-        MatToolbarModule,
-        MatTooltipModule], providers: [
-        ChartService,
-        provideHttpClient(withInterceptorsFromDi())
-    ] })
+@NgModule({
+  declarations: [
+    ChartComponent
+  ],
+  exports: [
+    ChartComponent
+  ],
+  bootstrap: [
+    ChartComponent
+  ],
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatIconModule,
+    MatToolbarModule,
+    MatTooltipModule
+  ],
+  providers: [
+    ChartService,
+    provideHttpClient(withInterceptorsFromDi())
+  ]
+})
 export class ChartModule { }

Client/src/app/picker/settings.module.ts

@@ -32,34 +32,43 @@ import { PickConfigComponent } from './pick-config.component';
 import { ChartService } from '../services/chart.service';
 import { ApiService } from '../services/api.service';
 
-@NgModule({ declarations: [
-        SettingsComponent,
-        PickConfigComponent
-    ],
-    exports: [
-        SettingsComponent,
-        PickConfigComponent
-    ],
-    bootstrap: [], imports: [CommonModule,
-        FormsModule,
-        MatBottomSheetModule,
-        MatButtonModule,
-        MatCheckboxModule,
-        MatDialogModule,
-        MatFormFieldModule,
-        MatIconModule,
-        MatInputModule,
-        MatListModule,
-        MatSelectModule,
-        MatSlideToggleModule,
-        MatTabsModule,
-        MatToolbarModule,
-        MatTooltipModule,
-        MtxColorpickerModule,
-        ColorCompactModule], providers: [
-        ChartService,
-        ApiService,
-        { provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher },
-        provideHttpClient(withInterceptorsFromDi())
-    ] })
+@NgModule({
+  declarations: [
+    SettingsComponent,
+    PickConfigComponent
+  ],
+  exports: [
+    SettingsComponent,
+    PickConfigComponent
+  ],
+  bootstrap: [],
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatBottomSheetModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatListModule,
+    MatSelectModule,
+    MatSlideToggleModule,
+    MatTabsModule,
+    MatToolbarModule,
+    MatTooltipModule,
+    MtxColorpickerModule,
+    ColorCompactModule
+  ],
+  providers: [
+    ChartService,
+    ApiService,
+    {
+      provide: ErrorStateMatcher,
+      useClass: ShowOnDirtyErrorStateMatcher
+    },
+    provideHttpClient(withInterceptorsFromDi())
+  ]
+})
 export class SettingsModule { }

Client/src/ngsw-config.json

@@ -0,0 +1,44 @@
+{
+  "version": "YYYY.MM.DD",
+  "index": "/index.html",
+  "assetGroups": [
+    {
+      "name": "app",
+      "installMode": "prefetch",
+      "resources": {
+        "files": [
+          "/favicon.ico",
+          "/index.html",
+          "/*.css",
+          "/*.js"
+        ]
+      }
+    },
+    {
+      "name": "assets",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "/assets/**",
+          "/*.(png|jpg|jpeg|svg)"
+        ]
+      }
+    }
+  ],
+  "dataGroups": [
+    {
+      "name": "reference-data",
+      "urls": [
+        "https://stock-charts-api.azurewebsites.net/indicators",
+        "https://localhost:44392/indicators"
+      ],
+      "cacheConfig": {
+        "strategy": "performance",
+        "maxSize": 10,
+        "maxAge": "1h",
+        "timeout": "10s"
+      }
+    }
+  ]
+}

Server/WebApi/Controllers/MainController.cs

@@ -24,7 +24,13 @@ public async Task<IActionResult> GetQuotes()
 
     [HttpGet("indicators")]
     public IActionResult GetIndicators()
-        => Ok(Metadata.IndicatorList($"{Request.Scheme}://{Request.Host}"));
+    {
+        Response.Headers.CacheControl = "public, max-age=3600"; // 1 hour TTL
+        Response.Headers.ETag = "YYYY.MM.DD"; // only changes with deployment
+        Response.Headers.LastModified = DateTime.UtcNow.ToString("R");
+
+        return Ok(Metadata.IndicatorList($"{Request.Scheme}://{Request.Host}"));
+    }
 
 
     //////////////////////////////////////////