add content for demo

angular.json

@@ -60,6 +60,7 @@
               "projects/ngx-pwa-install-demo/src/manifest.webmanifest"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
               "projects/ngx-pwa-install-demo/src/styles.css"
             ],
             "scripts": []
@@ -128,6 +129,7 @@
               "projects/ngx-pwa-install-demo/src/manifest.webmanifest"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
               "projects/ngx-pwa-install-demo/src/styles.css"
             ],
             "scripts": []
@@ -159,6 +161,7 @@
           }
         }
       }
-    }},
+    }
+  },
   "defaultProject": "ngx-pwa-install"
 }

package.json

@@ -12,10 +12,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~8.2.9",
+    "@angular/cdk": "~8.2.3",
     "@angular/common": "~8.2.9",
     "@angular/compiler": "~8.2.9",
     "@angular/core": "~8.2.9",
     "@angular/forms": "~8.2.9",
+    "@angular/material": "^8.2.3",
     "@angular/platform-browser": "~8.2.9",
     "@angular/platform-browser-dynamic": "~8.2.9",
     "@angular/pwa": "^0.803.23",

projects/ngx-pwa-install-demo/src/app/app.component.css

@@ -1,20 +1,74 @@
+.content {
+  display: flex;
+  flex-direction: column;
+  max-width: 736px;
+  margin: 1rem auto 5rem ;
+  padding: 0 1rem;
+}
+.content mat-card-content {
+  line-height: 1.5;
+}
+
+.content blockquote {
+  position: relative;
+  font-style: italic;
+}
+
+.content blockquote:before {
+  content: open-quote;
+  position: absolute;
+  top: -1rem;
+  left: -2rem;
+  font-size: 4rem;
+  line-height: 5rem;
+  font-weight: lighter;
+  color: rgba(0, 0, 0, .77)
+}
+
+.toolbar-icon {
+  padding: 0 14px;
+}
+
+.toolbar-spacer {
+  flex: 1 1 auto;
+}
+
 .pwa-install-panel {
   position: fixed;
   bottom: 0;
   width: 100%;
-  box-shadow: 0px -3px 5px -1px rgba(0, 0, 0, 0.2),
-  0px -5px 8px 0px rgba(0, 0, 0, 0.14),
-  0px -1px 14px 0px rgba(0, 0, 0, 0.12);
-  background: #eeeaea;
-  color: #3e3e3e;
-  padding: 1.5rem;
-  user-select: none;
-  text-align: center;
-  transition: all ease-out .2s;
-}
-.pwa-install-panel:hover {
-  box-shadow: 0px -5px 5px -1px rgba(0, 0, 0, 0.2),
-  0px -7px 8px 0px rgba(0, 0, 0, 0.14),
-  0px -3px 14px 0px rgba(0, 0, 0, 0.12);
-  transform: translateY(-1px);
+  padding: 1rem;
+}
+
+.pwa-install-panel mat-card {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: baseline;
+  text-transform: uppercase;
+}
+.pwa-install-panel mat-card-actions {
+  display: flex;
+  justify-content: flex-start;
+}
+@media (max-width: 736px) {
+  .pwa-install-panel mat-card {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
+.logo {
+  background: url("../assets/pwa.png") no-repeat center;
+  background-size: contain;
+  border-radius: 0;
+}
+
+.logo img {
+  width: 100%;
+}
+
+pre {
+  margin: 0;
+  white-space: pre-wrap;
 }

projects/ngx-pwa-install-demo/src/app/app.component.html

@@ -1,3 +1,95 @@
+<mat-toolbar color="primary">
+  NgxPwaInstall
+  <span class="toolbar-spacer"></span>
+  <a href="https://github.com/alQlagin/ngx-pwa-install" mat-button target="_blank">
+    <img src="assets/github-circle-white-transparent.svg">&nbsp;<span class="mat-body-1">GitHub</span>
+  </a>
+</mat-toolbar>
+<div class="content">
+  <mat-card>
+    <mat-card-header>
+      <div mat-card-avatar class="logo"></div>
+      <mat-card-title>Progressive web app</mat-card-title>
+      <mat-card-subtitle>Add to Home Screen</mat-card-subtitle>
+    </mat-card-header>
+    <mat-card-content>
+      <blockquote>
+        <p>
+          Add to Home Screen, sometimes referred to as the web app install prompt, makes it easy for users to install
+          your
+          Progressive Web App on their mobile or desktop device. After the user accepts the prompt, your PWA will be
+          added
+          to their launcher, and it will run like any other installed app.
+        </p>
+        <p>
+          Chrome handles most of the heavy lifting for you:
+        </p>
+        <ul>
+          <li>On mobile, Chrome will generate a WebAPK, creating an even more integrated experience for your users.</li>
+          <li>On desktop, your app will installed, and run in an app window.</li>
+        </ul>
+        <p>
+          In order for a user to be able to install your Progressive Web App, it needs to meet the
+          <a class="mat-accent" href="https://developers.google.com/web/fundamentals/app-install-banners#criteria"
+             target="_blank">following
+            criteria</a>
+        </p>
+      </blockquote>
+    </mat-card-content>
+    <mat-card-content>
+      <p class="mat-title">
+        Show the Add to Home Screen dialog
+      </p>
+      <p>
+        In order to show the Add to Home Screen dialog, you need to:
+      </p>
+      <ol>
+        <li>Listen for the beforeinstallprompt event</li>
+        <li>Notify the user your app can be installed with a button or other element that will generate a user gesture
+          event.
+        </li>
+        <li>Show the prompt by calling prompt() on the saved beforeinstallprompt event</li>
+      </ol>
+    </mat-card-content>
+    <mat-card-content>
+      <p class="mat-title">Listen for beforeinstallprompt</p>
+      <p>
+        <a href="https://www.npmjs.com/package/ngx-pwa-install" target="_blank">NgxPwaInstall</a> handles
+        beforeinstallprompt on startup and allows to display install panel at any place
+      </p>
+      <p>
+        To setup NgxPwaInstallinstall it with
+      </p>
+      <pre>
+  npm install ngx-pwa-install
+      </pre>
+      and add to your AppModule
+      <pre>{{installExampleText}}</pre>
+      <p>Later you can wrap pwa install panes with
+        <strong style="white-space: nowrap">&lt;ngx-pwa-install #pwa&gt;&lt;/ngx-pwa-install&gt;</strong>
+      </p>
+      <pre>{{panelExampleText}}</pre>
+      <p>You just need to call <strong>pwa.install()</strong> when user ready to install</p>
+      <p>
+        This will call
+        <a href="https://developers.google.com/web/fundamentals/app-install-banners#show_the_prompt" target="_blank">
+          prompt
+        </a>
+        on the saved event. It will show a modal dialog, asking the user to to add your app to their home screen.
+      </p>
+    </mat-card-content>
+  </mat-card>
+</div>
 <ngx-pwa-install #pwa>
-  <div @installPwa class="pwa-install-panel" (click)="pwa.install()">Install me</div>
+  <div @installPwa class="pwa-install-panel" *ngIf="!dismissed">
+    <mat-card class="mat-elevation-z5">
+      <mat-card-content>
+        You can install this application to your device
+      </mat-card-content>
+      <mat-card-actions>
+        <button mat-raised-button color="primary" (click)="pwa.install()">INSTALL</button>
+        <button mat-button (click)="dismiss()">DISMISS</button>
+      </mat-card-actions>
+    </mat-card>
+  </div>
 </ngx-pwa-install>

projects/ngx-pwa-install-demo/src/app/app.component.ts

@@ -1,19 +1,14 @@
 import { Component } from '@angular/core';
 import { animate, style, transition, trigger } from '@angular/animations';
+import { SwUpdate } from '@angular/service-worker';
+import { mergeMap } from 'rxjs/operators';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
   animations: [
     trigger('installPwa', [
-      transition(':enter', [
-        style({
-          transform: 'translateY(50%)',
-          opacity: 0
-        }),
-        animate('.2s ease-out')
-      ]),
       transition(':leave', [
         animate('.2s ease-out', style({
           transform: 'translateY(50%)',
@@ -25,4 +20,46 @@ import { animate, style, transition, trigger } from '@angular/animations';
 })
 export class AppComponent {
   title = 'ngx-pwa-install-demo';
+  dismissed = false;
+
+  installExampleText = `
+  @Module({
+    ...
+    import: [
+      ...
+      NgxPwaInstall.forRoot()
+    ]
+  })
+  export class AppModule {}
+  `;
+
+  panelExampleText = `
+  <ngx-pwa-install #pwa>
+    <div class="pwa-install-panel">
+      <mat-card>
+        You can install this application to your device
+        <button mat-raised-button
+            color="primary"
+            (click)="pwa.install()">
+            INSTALL
+        </button>
+      </mat-card>
+    </div>
+  </ngx-pwa-install>
+  `;
+
+  constructor(
+    private swUpdate: SwUpdate
+  ) {
+    if (swUpdate.isEnabled) {
+      swUpdate.available.pipe(
+        mergeMap(() => swUpdate.activateUpdate())
+      ).subscribe(() => location.reload());
+      swUpdate.checkForUpdate();
+    }
+  }
+
+  dismiss() {
+    this.dismissed = true;
+  }
 }

projects/ngx-pwa-install-demo/src/app/app.module.ts

@@ -6,6 +6,10 @@ import { NgxPwaInstallModule } from 'ngx-pwa-install';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '../environments/environment';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatCardModule } from '@angular/material/card';
+import { MatButtonModule } from '@angular/material/button';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatIconModule } from '@angular/material/icon';
 
 @NgModule({
   declarations: [
@@ -15,7 +19,11 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
     BrowserModule,
     BrowserAnimationsModule,
     NgxPwaInstallModule.forRoot(),
-    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
+    ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production}),
+    MatCardModule,
+    MatButtonModule,
+    MatToolbarModule,
+    MatIconModule
   ],
   providers: [],
   bootstrap: [AppComponent]

projects/ngx-pwa-install-demo/src/index.html

@@ -8,6 +8,8 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link rel="manifest" href="manifest.webmanifest">
   <meta name="theme-color" content="#1976d2">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>

projects/ngx-pwa-install-demo/src/styles.css

@@ -13,3 +13,6 @@ html, body {
 * {
   box-sizing: border-box;
 }
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }