BM5 Diff | 16g-pwa (von 16-guards)

angular.json CHANGED Viewed

@@ -55,7 +55,8 @@
                   "maximumError": "8kB"
                 }
               ],
-              "outputHashing": "all"
             },
             "development": {
               "optimization": false,

                   "maximumError": "8kB"
                 }
               ],
+              "outputHashing": "all",
+              "serviceWorker": "ngsw-config.json"
             },
             "development": {
               "optimization": false,

ngsw-config.json ADDED Viewed

	@@ -0,0 +1,49 @@

+{
+  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
+  "index": "/index.html",
+  "appData": {
+    "version": "1.1.0",
+    "changelog": "Updated Version"
+  },
+  "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)"
+        ]
+      }
+    }
+  ],
+  "dataGroups": [
+    {
+      "name": "Books",
+      "urls": [
+        "/books",
+        "/books/search/**",
+        "/books/**"
+      ],
+      "cacheConfig": {
+        "strategy": "freshness",
+        "maxSize": 50,
+        "maxAge": "1d2h",
+        "timeout": "3s"
+      }
+    }
+  ]
+}

package.json CHANGED Viewed

@@ -20,6 +20,7 @@
     "@angular/platform-browser": "^19.1.0",
     "@angular/platform-browser-dynamic": "^19.1.0",
     "@angular/router": "^19.1.0",
     "angular-date-value-accessor": "^3.0.0",
     "book-monkey5-styles": "^1.0.4",
     "rxjs": "~7.8.0",
@@ -42,4 +43,4 @@
     "typescript": "~5.7.2",
     "typescript-eslint": "8.18.0"
   }
-}

     "@angular/platform-browser": "^19.1.0",
     "@angular/platform-browser-dynamic": "^19.1.0",
     "@angular/router": "^19.1.0",
+    "@angular/service-worker": "^19.1.0",
     "angular-date-value-accessor": "^3.0.0",
     "book-monkey5-styles": "^1.0.4",
     "rxjs": "~7.8.0",
     "typescript": "~5.7.2",
     "typescript-eslint": "8.18.0"
   }
+}

public/manifest.webmanifest ADDED Viewed

	@@ -0,0 +1,59 @@

+{
+  "name": "book-monkey",
+  "short_name": "book-monkey",
+  "theme_color": "#1976d2",
+  "background_color": "#fafafa",
+  "display": "standalone",
+  "scope": "./",
+  "start_url": "./",
+  "icons": [
+    {
+      "src": "icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable any"
+    }
+  ]
+}

src/app/app.component.html CHANGED Viewed

@@ -9,6 +9,12 @@
     <button class="red"
       (click)="auth.logout()"
       *ngIf="auth.isAuthenticated">Logout</button>
   </div>
 </nav>

     <button class="red"
       (click)="auth.logout()"
       *ngIf="auth.isAuthenticated">Logout</button>
+    <button
+      (click)="requestSubscription()"
+      [class.green]="permission === 'granted'"
+      [class.red]="permission === 'denied'"
+      [disabled]="!permission"
+      aria-label="Notifications">!</button>
   </div>
 </nav>

src/app/app.component.ts CHANGED Viewed

@@ -1,6 +1,13 @@
 import { Component } from '@angular/core';
 import { AuthService } from './shared/auth.service';
 @Component({
   selector: 'bm-root',
@@ -9,5 +16,62 @@ import { AuthService } from './shared/auth.service';
   styleUrl: './app.component.css'
 })
 export class AppComponent {
-  constructor(public auth: AuthService) {}
 }

 import { Component } from '@angular/core';
+import { SwUpdate } from '@angular/service-worker';
 import { AuthService } from './shared/auth.service';
+import { WebNotificationService } from './shared/web-notification.service';
+interface AppData {
+  version: string;
+  changelog: string;
+}
 @Component({
   selector: 'bm-root',
   styleUrl: './app.component.css'
 })
 export class AppComponent {
+  permission?: NotificationPermission;
+  constructor(
+    public auth: AuthService,
+    private swUpdate: SwUpdate,
+    private notificationService: WebNotificationService
+  ) {
+    this.swUpdate.versionUpdates.subscribe(e => {
+      switch (e.type) {
+        case 'VERSION_DETECTED': {
+          console.log(
+            'Downloading new app version:',
+            e.version.appData
+          );
+          break;
+        }
+        case 'VERSION_READY': {
+          const current = e.currentVersion.appData as AppData;
+          const latest = e.latestVersion.appData as AppData;
+          const from = current.version;
+          const to = latest.version;
+          const changes = latest.changelog;
+          const confirmText = `Update from ${from} to ${to}. Changes: ${changes}. Install?`;
+          if (window.confirm(confirmText)) {
+            window.location.reload();
+          }
+          break;
+        }
+        case 'VERSION_INSTALLATION_FAILED': {
+          console.log(
+            `Failed to install ${e.version.appData}:`,
+            e.error
+          );
+          break;
+        }
+      }
+    });
+    if (this.notificationService.isEnabled) {
+      this.setPermission();
+    }
+  }
+  private setPermission() {
+    if ('Notification' in window) {
+      this.permission = Notification.permission;
+    }
+  }
+  requestSubscription() {
+    this.notificationService.requestSubscription()
+      .subscribe(() => this.setPermission());
+  }
 }

src/app/app.module.ts CHANGED Viewed

@@ -1,6 +1,7 @@
-import { NgModule } from '@angular/core';
 import { provideHttpClient, withInterceptorsFromDi, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -17,6 +18,12 @@ import { AuthInterceptor } from './shared/auth.interceptor';
   imports: [
     BrowserModule,
     AppRoutingModule,
   ],
   providers: [
     provideHttpClient(withInterceptorsFromDi()),

+import { NgModule, isDevMode } from '@angular/core';
 import { provideHttpClient, withInterceptorsFromDi, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { BrowserModule } from '@angular/platform-browser';
+import { ServiceWorkerModule } from '@angular/service-worker';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
   imports: [
     BrowserModule,
     AppRoutingModule,
+    ServiceWorkerModule.register('ngsw-worker.js', {
+      enabled: !isDevMode(),
+      // Register the ServiceWorker as soon as the application is stable
+      // or after 30 seconds (whichever comes first).
+      registrationStrategy: 'registerWhenStable:30000'
+    })
   ],
   providers: [
     provideHttpClient(withInterceptorsFromDi()),

src/app/shared/web-notification.service.ts ADDED Viewed

	@@ -0,0 +1,43 @@

+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { SwPush } from '@angular/service-worker';
+import { concatMap, from, Observable } from 'rxjs';
+import { Router } from '@angular/router';
+@Injectable({
+  providedIn: 'root',
+})
+export class WebNotificationService {
+  readonly VAPID_PUBLIC_KEY = 'BGk2Rx3DEjXdRv9qP8aKrypFoNjISAZ54l-3V05xpPOV-5ZQJvVH9OB9Rz5Ug7H_qH6CEr40f4Pi3DpjzYLbfCA';
+  private baseUrl = 'https://api5.angular-buch.com/notifications';
+  constructor(private http: HttpClient, private swPush: SwPush, private router: Router) {
+    // when user clicks a notification
+    this.swPush.notificationClicks.subscribe(e => {
+      // if ISBN is given, navigate to detail page
+      const data = e.notification.data;
+      if (data?.book?.isbn) {
+        this.router.navigate(['/books', data.book.isbn])
+      }
+    });
+  }
+  get isEnabled() {
+    return this.swPush.isEnabled;
+  }
+  // request a subscription from the browser and register it on the server
+  requestSubscription(): Observable<unknown> {
+    const request = this.swPush.requestSubscription({
+      serverPublicKey: this.VAPID_PUBLIC_KEY
+    });
+    return from(request).pipe(
+      concatMap(sub => this.registerOnServer(sub))
+    );
+  }
+  private registerOnServer(params: PushSubscription) {
+    return this.http.post(this.baseUrl, params);
+  }
+}

src/index.html CHANGED Viewed

@@ -6,10 +6,18 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
   <bm-root>
     <div class="loader">Loading ...</div>
   </bm-root>
 </body>
 </html>

   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="manifest" href="manifest.webmanifest">
+  <meta name="theme-color" content="#1976d2">
+  <meta name="apple-mobile-web-app-status-bar-style" content="default">
+  <meta name="mobile-web-app-capable" content="yes">
+  <link rel="apple-touch-startup-image" href="assets/icons/apple-splash-screen.png">
+  <link rel="apple-touch-icon" href="assets/icons/icon-512x512.png">
+  <link rel="apple-touch-icon" sizes="152x152" href="assets/icons/icon-152x152.png">
 </head>
 <body>
   <bm-root>
     <div class="loader">Loading ...</div>
   </bm-root>
+  <noscript>Please enable JavaScript to continue using this application.</noscript>
 </body>
 </html>

Differenzansicht 16g-pwaim Vergleich zu 16-guards

Differenzansicht 16g-pwa
im Vergleich zu 16-guards