Merge pull request #28 from css-ch/feature/PWA-download-function

feature/pwa-download-function

.firebase/hosting.ZGlzdC9QV0FCYXktQW5n.cache

@@ -1,24 +1,26 @@
-polyfills-es2015.d3e61f0dd2b58e518eca.js,1579262603211,cf1c253ad4103f33e584a90a983330fdd45a36e7567849324bb84bfb277d7619
-polyfills-es5.b4e31e2e7a7bb90c273c.js,1579262606033,9c819fe82b88f1ac6c87853b57b8b24796311cce135255d717acf3b253cd9ac4
-runtime-es2015.b948044840398824f16e.js,1579262603541,c4aa0a348c0dcf9c6af4b7b3f066d0599bcec97472ed96ab232c8dceb70607cb
-runtime-es5.b948044840398824f16e.js,1579262603541,c4aa0a348c0dcf9c6af4b7b3f066d0599bcec97472ed96ab232c8dceb70607cb
-manifest.webmanifest,1580718649493,21189250d0490c733c3f5af766fdb2676ad15b017dda8ed9007ac83e4b412463
-index.html,1580718678367,8374d6e90bf074b0ae6c362ae3937e3e72d8c67256561828cd80ae59f73be209
-ngsw.json,1580718678395,81a076a2e5dbc95daaf42baa3fa76e9c890c53a00e0cf1a5e28202bd82198259
-safety-worker.js,1580718678398,70f226c01620bfeb85ba94aef9a23338f1da71a30d43e98456c821a3cc41f65b
-worker-basic.min.js,1580718678398,70f226c01620bfeb85ba94aef9a23338f1da71a30d43e98456c821a3cc41f65b
-favicon.ico,1580718649493,3c8f1dca744007357393e9228949f1d36e0865c21c06cb504be0fa21e397df5f
-3rdpartylicenses.txt,1580718649493,3d54c553faafe32d94e04891f7c29fa63a57ec4c684d2c324737c7d02ac8a3f2
-assets/img/icons/icon-16.png,1580718649494,d8c5f262b67fa790c14c431816c3d1bc72fef5cd682a14c711a782f08a24f8e7
-assets/img/icons/icon-128.png,1580718649495,0a6d6b758ef08f2a59f37de60fe446901558211934250c73b67b72163ed692f6
-styles.8545d10a161d471fdfa5.css,1580718649493,4437738f9f0ddadc98d89b165fc5b11336a615a4227270c013216f104ce0fcfb
-assets/img/icons/icon-24.png,1580718649494,5928184d539f3ff3f29d79955aa42146670f23d5a4ecd415978555d16b917579
-assets/img/icons/icon-32.png,1580718649494,59fa13050619f75d66f4a2c0d1521ac570de6cc4d24b5f468ba183fc142a07fd
-assets/img/icons/icon-64.png,1580718649495,aa98d4d0216f12feaeaed00e3d60c763df48a47859af7c8b0a37d74ca57122ae
-assets/img/icons/icon-256.png,1580718649495,10cf66110a4b54d894edc0fe3a360a209bbca30512f973c3003250a45c75a5af
-assets/img/icons/icon-192.png,1580718649495,e25612479f1e68b6d146b4723bb807f55c4f0b8b71cd0c15f7275a3ba75cdd9f
-assets/img/icons/icon-512.png,1580718649494,7884b186ae27a1e23e9b39fd72a90cb67a495b813dee4ff55156b6ec765ca31a
-assets/img/background.jpg,1580718649494,09f0211cd99307ccbecaab958d612b92813dc6e45715a2dbccaed1655f383afc
-ngsw-worker.js,1580718678397,6bf20150890103869d80403dde2958cc84921c5459d8f42ab9ff9c7ebaedbab9
-main-es2015.ef1e563b9dfe1bdd64c9.js,1580718678287,0c19a1ccd0c312f9a4cd48b3d8eb43662814ecafd31b1bc17d929978e0a51bcc
-main-es5.ef1e563b9dfe1bdd64c9.js,1580718678350,f358c2ec30b063ad6b73aee3d729fbc5afd86aa87647418375f352d72b0660a4
+manifest.webmanifest,1597741413376,062d1e15f5207b15d5631e15876e7cd145f1da0a91ca0fa659d166fd7bc7e969
+index.html,1597741446440,5d8c1d1b07e29b7acde466fa111e4fbae17a708565fe7c222acc8758e4673797
+favicon.ico,1597741413375,3c8f1dca744007357393e9228949f1d36e0865c21c06cb504be0fa21e397df5f
+ngsw.json,1597741446515,f65f97b9310a16124607d96f348318c78ce2ba1a3070b033203e437dd626fa71
+runtime-es2015.b948044840398824f16e.js,1597741413765,c4aa0a348c0dcf9c6af4b7b3f066d0599bcec97472ed96ab232c8dceb70607cb
+runtime-es5.b948044840398824f16e.js,1597741413807,c4aa0a348c0dcf9c6af4b7b3f066d0599bcec97472ed96ab232c8dceb70607cb
+safety-worker.js,1597741446654,70f226c01620bfeb85ba94aef9a23338f1da71a30d43e98456c821a3cc41f65b
+polyfills-es2015.d3e61f0dd2b58e518eca.js,1597741413839,cf1c253ad4103f33e584a90a983330fdd45a36e7567849324bb84bfb277d7619
+worker-basic.min.js,1597741446612,70f226c01620bfeb85ba94aef9a23338f1da71a30d43e98456c821a3cc41f65b
+3rdpartylicenses.txt,1597741413371,ab0071b3868ca50e645aeb656111ad10b3c3adad76dbe54d823855ef7b38dbda
+assets/img/icons/icon-128.png,1597741413401,0a6d6b758ef08f2a59f37de60fe446901558211934250c73b67b72163ed692f6
+assets/img/icons/icon-16.png,1597741413504,d8c5f262b67fa790c14c431816c3d1bc72fef5cd682a14c711a782f08a24f8e7
+assets/img/icons/icon-24.png,1597741413504,5928184d539f3ff3f29d79955aa42146670f23d5a4ecd415978555d16b917579
+assets/img/icons/icon-32.png,1597741413427,59fa13050619f75d66f4a2c0d1521ac570de6cc4d24b5f468ba183fc142a07fd
+assets/img/icons/icon-64.png,1597741413504,aa98d4d0216f12feaeaed00e3d60c763df48a47859af7c8b0a37d74ca57122ae
+assets/img/icons/icon-256.png,1597741413504,10cf66110a4b54d894edc0fe3a360a209bbca30512f973c3003250a45c75a5af
+assets/img/accepted.png,1597741413401,9605f3b7573f05b7593836c8916bae6e1bbbdf026f22b4e94e1ec5be19132ba5
+assets/img/icons/icon-192.png,1597741413504,e25612479f1e68b6d146b4723bb807f55c4f0b8b71cd0c15f7275a3ba75cdd9f
+styles.facf4aacaf69593d4cee.css,1597741413375,dd1220f6ab96894e63df0ae58ceec3bd2c8f16ade60162f25cb1e6c75d22c659
+assets/img/icons/maskable_icon.png,1597741413593,a481082566df116e732cc33cec10bb983334630a82d93d9ed17d6bce994b305f
+assets/img/icons/icon-512.png,1597741413427,7884b186ae27a1e23e9b39fd72a90cb67a495b813dee4ff55156b6ec765ca31a
+assets/img/background.jpg,1597741413504,09f0211cd99307ccbecaab958d612b92813dc6e45715a2dbccaed1655f383afc
+ngsw-worker.js,1597741446560,6bf20150890103869d80403dde2958cc84921c5459d8f42ab9ff9c7ebaedbab9
+polyfills-es5.ae84f4898e3855151c8e.js,1597741413812,9c819fe82b88f1ac6c87853b57b8b24796311cce135255d717acf3b253cd9ac4
+main-es2015.4a3995f71a586d73a9cf.js,1597741446308,98a003dce0ac5320269c317141d50c902952d306f08c0c7812657fc9ca9647c1
+main-es5.4a3995f71a586d73a9cf.js,1597741446367,5dea2426fdb21be54e8211850971a6c94ce60d6a2435a49dab82587108706a57

.gitignore

@@ -4,6 +4,7 @@
 /dist
 /tmp
 /out-tsc
+/report
 
 # dependencies
 /node_modules
@@ -40,4 +41,4 @@ testem.log
 Thumbs.db
 
 # Local Netlify folder
-.netlify
+.netlify

lighthouse-batch.sh

@@ -0,0 +1 @@
+lighthouse-batch -s https://pwa-bay.web.app/,https://pwa-bay.web.app/login,https://pwa-bay.web.app/search,https://pwa-bay.web.app/registration,https://pwa-bay.web.app/success

package.json

@@ -5,6 +5,7 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
+    "build:prod": "ng build --prod",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",

src/app/app.module.ts

@@ -1,5 +1,5 @@
 import {BrowserModule} from '@angular/platform-browser';
-import {NgModule} from '@angular/core';
+import {APP_INITIALIZER, NgModule} from '@angular/core';
 
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
@@ -40,7 +40,9 @@ import {FaIconLibrary, FontAwesomeModule} from '@fortawesome/angular-fontawesome
 import {BottomSheetComponent} from './components/bottom-sheet/bottom-sheet.component';
 import {ProductGridComponent} from './components/product-grid/product-grid.component';
 import {faArrowLeft, faArrowRight, faSignOutAlt} from '@fortawesome/free-solid-svg-icons';
+import {PwaService} from './services/pwa.service';
 
+const initializer = (pwaService: PwaService) => () => pwaService.initPwaPrompt();
 
 export const firebaseConfig = {
   apiKey: 'AIzaSyBYlCWINMXHIIpZ94hq4nSAA9WQoFLhXlU',
@@ -96,11 +98,19 @@ export const firebaseConfig = {
     AngularFireDatabaseModule,
     AngularFireAuthModule
   ],
-  providers: [AuthGuard,
+  providers: [
+    AuthGuard,
+    PwaService,
     {
       provide: HTTP_INTERCEPTORS,
       useClass: HttpInterceptorService,
       multi: true
+    },
+    {
+      provide: APP_INITIALIZER,
+      useFactory: initializer,
+      deps: [PwaService],
+      multi: true
     }
   ],
   bootstrap: [AppComponent],

src/app/checkout/checkout.component.ts

@@ -31,7 +31,6 @@ export class CheckoutComponent implements OnInit {
 
   async checkout() {
     await this.shoppingCartService.emptyCart();
-    console.log(this.personalData.stripeId);
     this.paymentService.pay(this.sum * 100, this.personalData.stripeId).then(() => {
       this.router.navigateByUrl('/checkout-loading');
     });

src/app/components/bottom-sheet/bottom-sheet.component.ts

@@ -14,7 +14,6 @@ export class BottomSheetComponent {
   }
 
   openReceipt() {
-    console.log(this.data);
     const receipt = window.open(this.data.receipt_url, '_blank');
     receipt.focus();
   }

src/app/product-detail/product-detail.component.html

@@ -1,24 +1,26 @@
 <app-toolbar></app-toolbar>
 
-<mat-grid-list rowHeight="2:1" [cols]="1" class="grid-list">
-  <mat-grid-tile>
-    <img [src]="product.image" alt="product-image" style="object-fit: cover; height: inherit; width: inherit;">
-  </mat-grid-tile>
-</mat-grid-list>
+<div class="grid-wrapper">
+  <mat-grid-list rowHeight="2:1" [cols]="1" class="grid-list">
+    <mat-grid-tile>
+      <img [src]="product.image" alt="product-image" style="object-fit: cover; height: inherit; width: inherit;">
+    </mat-grid-tile>
+  </mat-grid-list>
 
-<div class="product-info-wrapper">
-  <div class="product-info">
-    <h1>{{product.name}}</h1>
-    <mat-chip-list aria-label="Fish selection">
-      <mat-chip>{{product.type}}</mat-chip>
-      <mat-chip>{{product.color}}</mat-chip>
-    </mat-chip-list>
-    <p>Marke: {{product.brand}}</p>
-    <p>Preis: {{product.price.toFixed(2)}} CHF</p>
-    <button mat-raised-button (click)="addProductToCart()">In den Warenkorb</button>
-    <button mat-raised-button (click)="toggleFavorite()" class="favorite-button" [disabled]="!authenticated">
-      <mat-icon>favorite_border</mat-icon>
-    </button>
+  <div class="product-info-wrapper">
+    <div class="product-info">
+      <h1>{{product.name}}</h1>
+      <mat-chip-list aria-label="Fish selection">
+        <mat-chip>{{product.type}}</mat-chip>
+        <mat-chip>{{product.color}}</mat-chip>
+      </mat-chip-list>
+      <p>Marke: {{product.brand}}</p>
+      <p>Preis: {{product.price.toFixed(2)}} CHF</p>
+      <button mat-raised-button (click)="addProductToCart()">In den Warenkorb</button>
+      <button mat-raised-button (click)="toggleFavorite()" class="favorite-button" [disabled]="!authenticated">
+        <mat-icon>favorite_border</mat-icon>
+      </button>
+    </div>
   </div>
 </div>
 

src/app/product-detail/product-detail.component.scss

@@ -1,24 +1,53 @@
-@media screen and (min-width: 1090px) {
-  .grid-list {
-    margin-left: 27.5%;
-    width: 45%;
-    padding-bottom: 23% !important;
+@media screen and (max-width: 599px) {
+  .grid-wrapper {
+    grid-template-columns: 5% auto 5%;
+    grid-template-areas: ". product-image ." ". product-info .";
   }
 }
 
-.product-info-wrapper {
-  width: 100%;
+@media screen and (min-width: 600px) {
+  .grid-wrapper {
+    grid-template-columns: 5% 15% auto 15% 5%;
+    grid-template-areas: ". product-image product-image product-image ." ". product-info product-info product-info .";
+  }
 }
 
-.product-info {
-  display: table;
-  margin: 0 auto;
+@media screen and (min-width: 840px) {
+  .grid-wrapper {
+    grid-template-columns: 5% 30% auto 30% 5%;
+    grid-template-areas: ". product-image product-image product-info ." ". product-image product-image product-info .";
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .grid-wrapper {
+    grid-template-columns: 5% 30% auto 30% 5%;
+    grid-template-areas: ". product-image product-image product-info ." ". product-image product-image product-info .";
+  }
+}
+
+.grid-wrapper {
+  display: grid;
+  grid-template-rows: auto;
+}
+
+.grid-list {
+  grid-area: product-image;
+}
+
+.product-info-wrapper {
+  grid-area: product-info;
 }
 
 .favorite-button {
   margin-left: 10px;
 }
 
+.product-info {
+  display: table;
+  margin: 0 auto;
+}
+
 ::ng-deep .mat-chip.mat-standard-chip {
   background-color: rgb(0, 0, 0, 0);
   background-image: linear-gradient(to right top, #12005e, #6a1b9a 40%, #9c27b0);

src/app/services/pwa.service.ts

@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PwaService {
+  promptEvent: any;
+  installed = false;
+
+  constructor() { }
+
+  public initPwaPrompt() {
+      window.addEventListener('appinstalled', (evt) => {
+        this.installed = true;
+      });
+      window.addEventListener('beforeinstallprompt', (event: any) => {
+        event.preventDefault();
+        this.promptEvent = event;
+      });
+  }
+
+  public addToHomeScreen() {
+    if (!this.promptEvent) {
+      return;
+    }
+
+    this.promptEvent.prompt();
+  }
+}

src/app/settings/settings.component.html

@@ -23,6 +23,12 @@
       <p>Zahlungen anzeigen</p>
     </mat-list-item>
     <mat-divider></mat-divider>
+    <div *ngIf="!pwaService.installed">
+      <mat-list-item role="listitem" (click)="pwaService.addToHomeScreen()">
+        <p>App installieren</p>
+      </mat-list-item>
+      <mat-divider></mat-divider>
+    </div>
   </mat-list>
 </div>
 

src/app/settings/settings.component.ts

@@ -3,6 +3,7 @@ import {Router} from '@angular/router';
 import {AuthService} from '../_core/auth.service';
 import {PaymentService} from '../services/payment.service';
 import {PersonalDataService} from '../services/personal.data.service';
+import {PwaService} from '../services/pwa.service';
 
 @Component({
   selector: 'app-settings',
@@ -13,8 +14,7 @@ export class SettingsComponent implements OnInit {
 
   constructor(private router: Router,
               private authService: AuthService,
-              private paymentService: PaymentService,
-              private userService: PersonalDataService) {
+              public pwaService: PwaService) {
   }
 
   ngOnInit() {

src/environments/environment.prod.ts

@@ -1,4 +1,4 @@
 export const environment = {
   production: true,
-  apiUrl: 'http://138.201.159.47:3000'
+  apiUrl: 'https://localhost:3000'
 };

src/environments/environment.ts

@@ -4,7 +4,7 @@
 
 export const environment = {
   production: false,
-  apiUrl: 'http://localhost:3000'
+  apiUrl: 'https://localhost:3000'
 };
 
 /*

src/manifest.webmanifest

@@ -32,6 +32,12 @@
       "type": "image/png",
       "sizes": "192x192"
     },
+    {
+       "src": "/assets/img/icons/maskable_icon.png",
+       "type": "image/png",
+       "sizes": "192x192",
+       "purpose": "any maskable"
+    },
     {
       "src": "/assets/img/icons/icon-256.png",
       "type": "image/png",
@@ -47,8 +53,8 @@
   "scope": ".",
   "display": "standalone",
   "orientation": "portrait-primary",
-  "background_color": "#81b8f7",
-  "theme_color": "#30cde6",
+  "background_color": "#40317E",
+  "theme_color": "#40317E",
   "description": "A PWA testing app",
   "lang": "de-CH",
   "prefer_related_applications": false