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

angular.json CHANGED Viewed

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

                   "maximumError": "4kB"
                 }
               ],
+              "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": "^18.2.0",
     "@angular/platform-browser-dynamic": "^18.2.0",
     "@angular/router": "^18.2.0",
     "angular-date-value-accessor": "^3.0.0",
     "book-monkey5-styles": "^1.0.4",
     "rxjs": "~7.8.0",
@@ -42,4 +43,4 @@
     "typescript": "~5.5.2",
     "typescript-eslint": "8.1.0"
   }
-}

     "@angular/platform-browser": "^18.2.0",
     "@angular/platform-browser-dynamic": "^18.2.0",
     "@angular/router": "^18.2.0",
+    "@angular/service-worker": "^18.2.0",
     "angular-date-value-accessor": "^3.0.0",
     "book-monkey5-styles": "^1.0.4",
     "rxjs": "~7.8.0",
     "typescript": "~5.5.2",
     "typescript-eslint": "8.1.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/admin/book-create/book-create.component.spec.ts ADDED Viewed

	@@ -0,0 +1,23 @@

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BookCreateComponent } from './book-create.component';
+describe('BookCreateComponent', () => {
+  let component: BookCreateComponent;
+  let fixture: ComponentFixture<BookCreateComponent>;
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BookCreateComponent ]
+    })
+    .compileComponents();
+    fixture = TestBed.createComponent(BookCreateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/admin/book-edit/book-edit.component.spec.ts ADDED Viewed

	@@ -0,0 +1,23 @@

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BookEditComponent } from './book-edit.component';
+describe('BookEditComponent', () => {
+  let component: BookEditComponent;
+  let fixture: ComponentFixture<BookEditComponent>;
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BookEditComponent ]
+    })
+    .compileComponents();
+    fixture = TestBed.createComponent(BookEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/admin/book-form/book-form.component.spec.ts ADDED Viewed

	@@ -0,0 +1,23 @@

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BookFormComponent } from './book-form.component';
+describe('BookFormComponent', () => {
+  let component: BookFormComponent;
+  let fixture: ComponentFixture<BookFormComponent>;
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BookFormComponent ]
+    })
+    .compileComponents();
+    fixture = TestBed.createComponent(BookFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/admin/form-errors/form-errors.component.spec.ts ADDED Viewed

	@@ -0,0 +1,23 @@

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormErrorsComponent } from './form-errors.component';
+describe('FormErrorsComponent', () => {
+  let component: FormErrorsComponent;
+  let fixture: ComponentFixture<FormErrorsComponent>;
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FormErrorsComponent ]
+    })
+    .compileComponents();
+    fixture = TestBed.createComponent(FormErrorsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/admin/shared/async-validators.service.spec.ts ADDED Viewed

	@@ -0,0 +1,16 @@

+import { TestBed } from '@angular/core/testing';
+import { AsyncValidatorsService } from './async-validators.service';
+describe('AsyncValidatorsService', () => {
+  let service: AsyncValidatorsService;
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AsyncValidatorsService);
+  });
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

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',
@@ -8,5 +15,62 @@ import { AuthService } from './shared/auth.service';
   styleUrls: ['./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',
   styleUrls: ['./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 { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -18,6 +19,12 @@ import { AuthInterceptor } from './shared/auth.interceptor';
     BrowserModule,
     AppRoutingModule,
     HttpClientModule,
   ],
   providers: [
     {

+import { NgModule, isDevMode } from '@angular/core';
 import { HttpClientModule, 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';
     BrowserModule,
     AppRoutingModule,
     HttpClientModule,
+    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: [
     {

src/app/books/book-details/book-details.component.spec.ts ADDED Viewed

	@@ -0,0 +1,23 @@

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BookDetailsComponent } from './book-details.component';
+describe('BookDetailsComponent', () => {
+  let component: BookDetailsComponent;
+  let fixture: ComponentFixture<BookDetailsComponent>;
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BookDetailsComponent ]
+    })
+    .compileComponents();
+    fixture = TestBed.createComponent(BookDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/books/book-list/book-list.component.spec.ts ADDED Viewed

	@@ -0,0 +1,23 @@

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BookListComponent } from './book-list.component';
+describe('BookListComponent', () => {
+  let component: BookListComponent;
+  let fixture: ComponentFixture<BookListComponent>;
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BookListComponent ]
+    })
+    .compileComponents();
+    fixture = TestBed.createComponent(BookListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/books/shared/loggedin-only.directive.spec.ts ADDED Viewed

	@@ -0,0 +1,8 @@

+import { LoggedinOnlyDirective } from './loggedin-only.directive';
+describe('LoggedinOnlyDirective', () => {
+  it('should create an instance', () => {
+    const directive = new LoggedinOnlyDirective();
+    expect(directive).toBeTruthy();
+  });
+});

src/app/home/home.component.spec.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { HomeComponent } from './home.component';
@@ -9,8 +8,7 @@ describe('HomeComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ HomeComponent ],
-      schemas: [NO_ERRORS_SCHEMA]
     })
     .compileComponents();

 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { HomeComponent } from './home.component';
   beforeEach(async () => {
     await TestBed.configureTestingModule({
+      declarations: [ HomeComponent ]
     })
     .compileComponents();

src/app/search/search.component.spec.ts ADDED Viewed

	@@ -0,0 +1,23 @@

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SearchComponent } from './search.component';
+describe('SearchComponent', () => {
+  let component: SearchComponent;
+  let fixture: ComponentFixture<SearchComponent>;
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SearchComponent ]
+    })
+    .compileComponents();
+    fixture = TestBed.createComponent(SearchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/book-store.service.spec.ts ADDED Viewed

	@@ -0,0 +1,16 @@

+import { TestBed } from '@angular/core/testing';
+import { BookStoreService } from './book-store.service';
+describe('BookStoreService', () => {
+  let service: BookStoreService;
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(BookStoreService);
+  });
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

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="apple-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