diff --git a/.angular-cli.json b/.angular-cli.json
index f7b4f9c..e3d65a1 100644
--- a/.angular-cli.json
+++ b/.angular-cli.json
@@ -28,7 +28,8 @@
         "prod": "environments/environment.prod.ts",
         "local": "environments/environment.local.ts",
         "ci": "environments/environment.ci.ts"
-      }
+      },
+        "serviceWorker": true
     }
   ],
   "e2e": {
diff --git a/.gitignore b/.gitignore
index 00dbdc8..ddb9e5b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -48,6 +48,9 @@ testem.log
 /src/environments/environment.ci.ts
 /src/environments/environments.tar
 
+# dist
+/dist/*
+
 # =========================
 # Operating System Files
 # =========================
diff --git a/package-lock.json b/package-lock.json
index 3ea83eb..3b45ab7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -89,6 +89,22 @@
         }
       }
     },
+    "@angular/animations": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-5.2.1.tgz",
+      "integrity": "sha512-f8viyt1xDC2NC2ap0lczw+AiL3S1WVSDOmNp3UKwA66gm+Hs9AdDX0PjpxgMR9KQY8c4P7mztNax55jj2Sbe1Q==",
+      "requires": {
+        "tslib": "1.8.0"
+      }
+    },
+    "@angular/cdk": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-5.2.3.tgz",
+      "integrity": "sha512-o95vQCJ1FpHLQj/ZfIrOya/rK0S7VwiY5vjEivpFnH25kHF5LNT4LTj6BOFkPbClMHTIM2wdKwWnuTfK0bg9WA==",
+      "requires": {
+        "tslib": "1.8.0"
+      }
+    },
     "@angular/cli": {
       "version": "1.6.4",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-1.6.4.tgz",
@@ -339,9 +355,9 @@
       }
     },
     "@angular/core": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@angular/core/-/core-5.2.0.tgz",
-      "integrity": "sha512-s2ne45DguNUubhC1YgybGECC4Tyx3G4EZCntUiRMDWWkmKXSK+6dgHMesyDo8R5Oat8VfN4Anf8l3JHS1He8kg==",
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-5.2.7.tgz",
+      "integrity": "sha512-DQuL6n7cjBfZmWX5RCV271g6PW9N8b93g2skWnM/zjm+BL9tfHPgvmsjMNB7QEHSxW8VBaaQ6gjj422O01A87g==",
       "requires": {
         "tslib": "1.8.0"
       }
@@ -354,6 +370,22 @@
         "tslib": "1.8.0"
       }
     },
+    "@angular/http": {
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@angular/http/-/http-5.2.7.tgz",
+      "integrity": "sha512-048+tCbsNYc9xVvIn5/sOvO4fXVkbB5b1IRYRGiRYXpTz6+JWIm5AwOqZIOeVDgqgZHFf96QllXDcFbdNVDgSA==",
+      "requires": {
+        "tslib": "1.8.0"
+      }
+    },
+    "@angular/material": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-5.2.3.tgz",
+      "integrity": "sha512-v6IGxGWaeALgBH8+kt2Q9K32zmJQH193bWdCeWmtXk0vJlj3NTiWYy+vLoZQ8aPIAtOqCKCmhf5VrerkS6pgww==",
+      "requires": {
+        "tslib": "1.8.0"
+      }
+    },
     "@angular/platform-browser": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-5.2.0.tgz",
@@ -378,6 +410,14 @@
         "tslib": "1.8.0"
       }
     },
+    "@angular/service-worker": {
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/@angular/service-worker/-/service-worker-5.2.4.tgz",
+      "integrity": "sha512-rGLKO9KWNSlBJizMTvv3lKMe9rI/lutd6eLFZag4VOVfp2W5THusPk+zNWqXKpelfm0DMrCK6qhAyl9MJkqZNw==",
+      "requires": {
+        "tslib": "1.8.0"
+      }
+    },
     "@angular/upgrade": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@angular/upgrade/-/upgrade-5.2.0.tgz",
@@ -622,6 +662,11 @@
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
       "dev": true
     },
+    "angular2-notifications": {
+      "version": "0.9.7",
+      "resolved": "https://registry.npmjs.org/angular2-notifications/-/angular2-notifications-0.9.7.tgz",
+      "integrity": "sha1-IQoAfWsVyS0/2bGxo+DiIVF8CeA="
+    },
     "ansi-html": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
@@ -978,6 +1023,11 @@
       "integrity": "sha1-R2iMuZu2gE8OBtPnY7HDLlfY5rY=",
       "dev": true
     },
+    "base64url": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/base64url/-/base64url-2.0.0.tgz",
+      "integrity": "sha1-6sFuA+oUOO/5Qj1puqNiYu0fcLs="
+    },
     "batch": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
@@ -1020,11 +1070,11 @@
     },
     "block-stream": {
       "version": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
-      "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=",
+      "integrity": "sha512-OorbnJVPII4DuUKbjARAe8u8EfqOmkEEaSFIyoQ7OjTHn6kafxWl0wLgoZ2rXaYd7MyLcDaU4TmhfxtwgcccMQ==",
       "dev": true,
       "optional": true,
       "requires": {
-        "inherits": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz"
+        "inherits": "2.0.3"
       }
     },
     "blocking-proxy": {
@@ -1250,6 +1300,11 @@
         "isarray": "1.0.0"
       }
     },
+    "buffer-equal-constant-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
+      "integrity": "sha1-+OcRMvf/5uAaXJaXpMbz5I1cyBk="
+    },
     "buffer-indexof": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/buffer-indexof/-/buffer-indexof-1.1.0.tgz",
@@ -1966,6 +2021,11 @@
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
       "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
     },
+    "corser": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz",
+      "integrity": "sha1-jtolLsqrWEDc2XXOuQ2TcMgZ/4c="
+    },
     "cosmiconfig": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-2.2.2.tgz",
@@ -2603,6 +2663,33 @@
         "jsbn": "0.1.1"
       }
     },
+    "ecdsa-sig-formatter": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.9.tgz",
+      "integrity": "sha1-S8kmJ07Dtau1AW5+HWCSGsJisqE=",
+      "requires": {
+        "base64url": "2.0.0",
+        "safe-buffer": "5.1.1"
+      }
+    },
+    "ecstatic": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/ecstatic/-/ecstatic-3.2.0.tgz",
+      "integrity": "sha512-Goilx/2cfU9vvfQjgtNgc2VmJAD8CasQ6rZDqCd2u4Hsyd/qFET6nBf60jiHodevR3nl3IGzNKtrzPXWP88utQ==",
+      "requires": {
+        "he": "1.1.1",
+        "mime": "1.6.0",
+        "minimist": "1.2.0",
+        "url-join": "2.0.5"
+      },
+      "dependencies": {
+        "mime": {
+          "version": "1.6.0",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+          "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
+        }
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -4474,8 +4561,7 @@
     "he": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/he/-/he-1.1.1.tgz",
-      "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=",
-      "dev": true
+      "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0="
     },
     "hmac-drbg": {
       "version": "1.0.1",
@@ -4714,6 +4800,28 @@
         }
       }
     },
+    "http-server": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/http-server/-/http-server-0.11.1.tgz",
+      "integrity": "sha512-6JeGDGoujJLmhjiRGlt8yK8Z9Kl0vnl/dQoQZlc4oeqaUoAKQg94NILLfrY3oWzSyFaQCVNTcKE5PZ3cH8VP9w==",
+      "requires": {
+        "colors": "1.0.3",
+        "corser": "2.0.1",
+        "ecstatic": "3.2.0",
+        "http-proxy": "1.16.2",
+        "opener": "1.4.3",
+        "optimist": "0.6.1",
+        "portfinder": "1.0.13",
+        "union": "0.4.6"
+      },
+      "dependencies": {
+        "colors": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/colors/-/colors-1.0.3.tgz",
+          "integrity": "sha1-BDP0TYCWgP3rYO0mDxsMJi6CpAs="
+        }
+      }
+    },
     "http-signature": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz",
@@ -4725,6 +4833,14 @@
         "sshpk": "1.13.1"
       }
     },
+    "http_ece": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/http_ece/-/http_ece-0.5.2.tgz",
+      "integrity": "sha1-VlTX7J2Za3Sc4AonbhjVS22PkF8=",
+      "requires": {
+        "urlsafe-base64": "1.0.0"
+      }
+    },
     "https-browserify": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-0.0.1.tgz",
@@ -4837,7 +4953,8 @@
       }
     },
     "inherits": {
-      "version": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
       "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
       "dev": true,
       "optional": true
@@ -5509,6 +5626,27 @@
         }
       }
     },
+    "jwa": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.1.5.tgz",
+      "integrity": "sha1-oFUs4CIHQs1S4VN3SjKQXDDnVuU=",
+      "requires": {
+        "base64url": "2.0.0",
+        "buffer-equal-constant-time": "1.0.1",
+        "ecdsa-sig-formatter": "1.0.9",
+        "safe-buffer": "5.1.1"
+      }
+    },
+    "jws": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-3.1.4.tgz",
+      "integrity": "sha1-+ei5M46KhHJ31kRLFGT2GIDgUKI=",
+      "requires": {
+        "base64url": "2.0.0",
+        "jwa": "1.1.5",
+        "safe-buffer": "5.1.1"
+      }
+    },
     "karma": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/karma/-/karma-1.7.1.tgz",
@@ -6170,6 +6308,11 @@
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz",
       "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk="
     },
+    "ng-push": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/ng-push/-/ng-push-0.2.1.tgz",
+      "integrity": "sha1-fTsLfpA6MHnyIzYRHjMJhQjg8iY="
+    },
     "ng2-charts": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/ng2-charts/-/ng2-charts-1.6.0.tgz",
@@ -6413,6 +6556,11 @@
         }
       }
     },
+    "node-snackbar": {
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/node-snackbar/-/node-snackbar-0.1.9.tgz",
+      "integrity": "sha512-56+RHp+F9mZSa/YcZnhfdpSvowoUs6X5hFzXX5C90UsyIoxXyiffgWgHLklth3swtU3iOo1nRxmcUDhyLkbHQw=="
+    },
     "nopt": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz",
@@ -6563,6 +6711,11 @@
         "wrappy": "1.0.2"
       }
     },
+    "opener": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/opener/-/opener-1.4.3.tgz",
+      "integrity": "sha1-XG2ixdflgx6P+jlklQ+NZnSskLg="
+    },
     "opn": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/opn/-/opn-5.1.0.tgz",
@@ -6572,6 +6725,22 @@
         "is-wsl": "1.1.0"
       }
     },
+    "optimist": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
+      "integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=",
+      "requires": {
+        "minimist": "0.0.10",
+        "wordwrap": "0.0.2"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "0.0.10",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
+          "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8="
+        }
+      }
+    },
     "options": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/options/-/options-0.0.6.tgz",
@@ -8427,13 +8596,6 @@
       "integrity": "sha512-v4Q5HDC0FHAQ7zcBX7T2IL6O5ltl1a2GX4ENjPXg6SjDY69Cmx9v4113C99a4wGF16ClPv5Z8mghuYorVkg/kg==",
       "requires": {
         "symbol-observable": "1.0.1"
-      },
-      "dependencies": {
-        "symbol-observable": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.1.tgz",
-          "integrity": "sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ="
-        }
       }
     },
     "safe-buffer": {
@@ -9306,6 +9468,11 @@
         "whet.extend": "0.9.9"
       }
     },
+    "symbol-observable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.1.tgz",
+      "integrity": "sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ="
+    },
     "tapable": {
       "version": "0.2.8",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-0.2.8.tgz",
@@ -9654,9 +9821,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.6.2.tgz",
-      "integrity": "sha1-PFtv1/beCRQmkCfwPAlGdY92c6Q=",
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.5.3.tgz",
+      "integrity": "sha512-ptLSQs2S4QuS6/OD1eAKG+S5G8QQtrU5RT32JULdZQtM1L3WTi34Wsu48Yndzi8xsObRAB9RPt/KhA9wlpEF6w==",
       "dev": true
     },
     "uglify-js": {
@@ -9719,6 +9886,21 @@
       "integrity": "sha1-rOEWq1V80Zc4ak6I9GhTeMiy5Po=",
       "dev": true
     },
+    "union": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/union/-/union-0.4.6.tgz",
+      "integrity": "sha1-GY+9rrolTniLDvy2MLwR8kopWeA=",
+      "requires": {
+        "qs": "2.3.3"
+      },
+      "dependencies": {
+        "qs": {
+          "version": "2.3.3",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-2.3.3.tgz",
+          "integrity": "sha1-6eha2+ddoLvkyOBHaghikPhjtAQ="
+        }
+      }
+    },
     "uniq": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
@@ -9791,6 +9973,11 @@
         }
       }
     },
+    "url-join": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/url-join/-/url-join-2.0.5.tgz",
+      "integrity": "sha1-WvIvGMBSoACkjXuCxenC4v7tpyg="
+    },
     "url-loader": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-0.6.2.tgz",
@@ -9826,6 +10013,11 @@
         }
       }
     },
+    "urlsafe-base64": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/urlsafe-base64/-/urlsafe-base64-1.0.0.tgz",
+      "integrity": "sha1-I/iQaabGL0bPOh07ABac77kL4MY="
+    },
     "user-home": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/user-home/-/user-home-1.1.1.tgz",
@@ -9982,6 +10174,18 @@
         "minimalistic-assert": "1.0.0"
       }
     },
+    "web-push": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/web-push/-/web-push-3.2.5.tgz",
+      "integrity": "sha512-ySLzNhXn2h5C7mRebgW83ezCeYaWSzcNsF7vUGwzADXBCB++Ejy/LbqRpxP+VtFzvQzJygGZPvIGHbqPuBvcvw==",
+      "requires": {
+        "asn1.js": "4.9.1",
+        "http_ece": "0.5.2",
+        "jws": "3.1.4",
+        "minimist": "1.2.0",
+        "urlsafe-base64": "1.0.0"
+      }
+    },
     "webdriver-js-extender": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/webdriver-js-extender/-/webdriver-js-extender-1.0.0.tgz",
diff --git a/package.json b/package.json
index c0f2c8b..cd54535 100644
--- a/package.json
+++ b/package.json
@@ -20,25 +20,33 @@
   "dependencies": {
     "@agm/core": "1.0.0-beta.2",
     "@agm/js-marker-clusterer": "1.0.0-beta.2",
+    "@angular/animations": "5.2.1",
+    "@angular/cdk": "5.2.3",
     "@angular/common": "5.2.0",
     "@angular/compiler": "5.2.0",
     "@angular/core": "5.2.0",
     "@angular/forms": "5.2.0",
+    "@angular/http": "5.2.7",
+    "@angular/material": "5.2.3",
     "@angular/platform-browser": "5.2.0",
     "@angular/platform-browser-dynamic": "5.2.0",
     "@angular/router": "5.2.0",
+    "@angular/service-worker": "5.2.4",
     "@angular/upgrade": "5.2.0",
     "@types/moment": "2.13.0",
     "chart.js": "2.7.1",
     "core-js": "2.5.1",
+    "http-server": "0.11.1",
     "js-marker-clusterer": "1.0.0",
-    "moment": "^2.19.2",
+    "moment": "2.19.2",
     "ng2-charts": "1.6.0",
     "ng2-validation-manager": "0.5.3",
     "ngx-bootstrap": "2.0.0-beta.8",
     "ngx-pagination": "3.0.3",
+    "node-snackbar": "0.1.9",
     "rxjs": "5.5.6",
     "ts-helpers": "1.1.2",
+    "web-push": "3.2.5",
     "webpack": "3.8.1",
     "webpack-dev-server": "2.9.4",
     "zone.js": "0.8.18"
@@ -61,6 +69,6 @@
     "protractor": "5.2.0",
     "ts-node": "3.3.0",
     "tslint": "5.8.0",
-    "typescript": "2.6.x"
+    "typescript": "2.5.3"
   }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 344f26c..b1076d4 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,6 +1,14 @@
-// Push Notifications
-import { ServiceWorkerModule } from '@angular/service-worker';
 
+import { ConfigService } from './config.service';
+import { PushService } from './push.service';
+import { PushComponent } from './push/push.component';
+import { HttpModule } from '@angular/http';
+
+
+import { ServiceWorkerModule } from '@angular/service-worker';
+import { environment } from '../environments/environment';
+
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { LocationStrategy, HashLocationStrategy } from '@angular/common';
@@ -45,19 +53,22 @@ import { DashboardModule } from './dashboard/dashboard.module';
 
 @NgModule({
   imports: [
+    BrowserAnimationsModule,
     BrowserModule,
     HttpClientModule,
+    HttpModule,
     NgxPaginationModule,
     BsDropdownModule.forRoot(),
     TabsModule.forRoot(),
     AuthModule,
     DashboardModule,
+    ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production}),
     // Loaded last to allow for 404 catchall
     AppRoutingModule,
   ],
   declarations: [
-    ServiceWorkerModule,
     AppComponent,
+    PushComponent,
     FullLayoutComponent,
     SimpleLayoutComponent,
     NAV_DROPDOWN_DIRECTIVES,
@@ -68,6 +79,8 @@ import { DashboardModule } from './dashboard/dashboard.module';
     P500Component,
   ],
   providers: [
+    ConfigService,
+    PushService,
     AuthGuard,
     OrgGuard,
     CustomerGuard,
diff --git a/src/app/config.service.ts b/src/app/config.service.ts
new file mode 100644
index 0000000..21d494f
--- /dev/null
+++ b/src/app/config.service.ts
@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+
+import { environment } from './../environments/environment';
+
+@Injectable()
+export class ConfigService {
+
+    private _config:any = environment.config;
+
+    constructor() {
+    }
+
+    get(key: any) {
+        return this._config[key];
+    }
+}
diff --git a/src/app/layouts/full-layout.component.html b/src/app/layouts/full-layout.component.html
index 6a3708f..26138f4 100644
--- a/src/app/layouts/full-layout.component.html
+++ b/src/app/layouts/full-layout.component.html
@@ -19,9 +19,8 @@
       </div>
     </li>
   </ul>
-  <push></push>
+  <app-push>HELLO</app-push>
 </header>
-
 <div class="app-body">
   <div class="sidebar">
     <nav class="sidebar-nav">
@@ -117,7 +116,6 @@
   </main>
 
 </div>
-
 <footer class="app-footer">
   <a href="http://www.peartrade.org" target="_blank">&copy; 2017 Pear Trading Ltd.</a>
   <span class="float-right">Powered by <a href="http://coreui.io">CoreUI</a></span>
diff --git a/src/app/push.service.ts b/src/app/push.service.ts
new file mode 100644
index 0000000..1cd36db
--- /dev/null
+++ b/src/app/push.service.ts
@@ -0,0 +1,73 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/observable/throw';
+
+import { ConfigService } from './config.service';
+
+@Injectable()
+export class PushService {
+
+  private API_URL: string
+
+  constructor(private http: HttpClient, private configService: ConfigService) {
+    this.API_URL = this.configService.get('API_URL')
+  }
+
+  // urlBase64ToUint8Array(base64String) {
+  //   const padding = '='.repeat((4 - base64String.length % 4) % 4);
+  //   const base64 = (base64String + padding).replace(/\-/g, '+').replace(/_/g, '/');
+  //   const rawData = window.atob(base64);
+  //   const outputArray = new Uint8Array(rawData.length);
+  //   for (let i = 0; i < rawData.length; ++i) {
+  //     outputArray[i] = rawData.charCodeAt(i);
+  //   }
+  //   return outputArray;
+  // }
+
+  addSubscriber(subscription) {
+
+    const url = `${this.API_URL}/webpush`;
+    console.log('[Push Service] Adding subscriber')
+
+    let body = {
+      action: 'subscribe',
+      subscription: subscription
+    }
+
+    return this.http
+      .post(url, body)
+      .catch(this.handleError);
+
+  }
+
+  deleteSubscriber(subscription) {
+
+    const url = `${this.API_URL}/webpush`;
+    console.log('[Push Service] Deleting subscriber')
+
+    let body = {
+      action: 'unsubscribe',
+      subscription: subscription
+    }
+
+    return this.http
+      .post(url, body)
+      .catch(this.handleError);
+
+  }
+
+  private handleError(error: Response | any) {
+    let errMsg: string;
+    if (error instanceof Response) {
+      errMsg = `${error.statusText || 'Network error'}`;
+    } else {
+      errMsg = error.message ? error.message : error.toString();
+    }
+    return Observable.throw(errMsg);
+  }
+
+}
diff --git a/src/app/push/push.component.css b/src/app/push/push.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/push/push.component.html b/src/app/push/push.component.html
index c9df174..ab95bd6 100644
--- a/src/app/push/push.component.html
+++ b/src/app/push/push.component.html
@@ -1,4 +1,3 @@
-<push-notification
-  title="hello"
-  body="hi">
-</push-notification>
+<button (click)="subscribeToPush()">Subscribe To Push</button>
+<button (click)="unsubscribeFromPush()">Unsubscribe From Push</button>
+{{target}}
diff --git a/src/app/push/push.component.spec.ts b/src/app/push/push.component.spec.ts
new file mode 100644
index 0000000..57bef29
--- /dev/null
+++ b/src/app/push/push.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PushComponent } from './push.component';
+
+describe('PushComponent', () => {
+  let component: PushComponent;
+  let fixture: ComponentFixture<PushComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PushComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PushComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/push/push.component.ts b/src/app/push/push.component.ts
index b5961ff..36018d7 100644
--- a/src/app/push/push.component.ts
+++ b/src/app/push/push.component.ts
@@ -1,19 +1,101 @@
-import { Component, OnInit} from '@angular/core'
-import { PushNotificationComponent } from 'ng2-notifications/ng2-notifications';
+import { Component, OnInit } from '@angular/core';
+import { ConfigService } from './../config.service';
+import { PushService } from './../push.service';
+import { SwPush } from '@angular/service-worker';
+import "rxjs/Rx";
+
 
 @Component({
-  selector: 'push',
+  selector: 'app-push',
   templateUrl: './push.component.html',
+  styleUrls: ['./push.component.css']
+})
+export class PushComponent implements OnInit {
 
-  })
+  private VAPID_PUBLIC_KEY: string;
+
+  tweets = []
+  target = ''
 
 
-export class PushComponent {
-
-  constructor(){}
-
-  ngOnInit(){
-
+  constructor(private pushService: PushService, private configService: ConfigService, private swPush: SwPush) {
   }
 
+  ngOnInit() {
+    this.VAPID_PUBLIC_KEY = this.configService.get('VAPID_PUBLIC_KEY')
+  }
+
+  subscribeToPush() {
+
+      // Requesting messaging service to subscribe current client (browser)
+
+      this.swPush.requestSubscription({
+        serverPublicKey: this.VAPID_PUBLIC_KEY
+      })
+        .then(pushSubscription => {
+
+          // Passing subscription object to our backend
+          console.log(pushSubscription.endpoint)
+          this.target = JSON.stringify(pushSubscription);
+          console.log(pushSubscription.getKey)
+          this.pushService.addSubscriber(pushSubscription)
+            .subscribe(
+
+            res => {
+              console.log('[App] Add subscriber request answer', res)
+            },
+            err => {
+              console.log('[App] Add subscriber request failed', err)
+            }
+
+            )
+        })
+        .catch(err => {
+          console.error(err);
+        })
+
+    }
+
+  showNotification(){
+      this.swPush.messages.subscribe(message => {
+          console.log('[App] Push message received', message)
+      })
+  }
+
+  unsubscribeFromPush(){
+
+    // Get active subscription
+
+    this.swPush.subscription
+      .take(1)
+      .subscribe(pushSubscription => {
+
+        console.log('[App] pushSubscription', pushSubscription)
+
+        // Delete the subscription from the backend
+
+        this.pushService.deleteSubscriber(pushSubscription)
+          .subscribe(
+
+          res => {
+            console.log('[App] Delete subscriber request answer', res)
+            // Unsubscribe current client (browser)
+
+            pushSubscription.unsubscribe()
+              .then(success => {
+                console.log('[App] Unsubscription successful', success)
+              })
+              .catch(err => {
+                console.log('[App] Unsubscription failed', err)
+              })
+
+          },
+          err => {
+            console.log('[App] Delete subscription request failed', err)
+          }
+
+          )
+
+      })
+    }
 }
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 725706a..cad06c7 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -4,7 +4,11 @@
 // The list of which env maps to which file can be found in `angular-cli.json`.
 
 export const environment = {
-  production: false,
+  production: true,
   apiUrl: 'https://dev.peartrade.org/api',
-  mapApiKey: 'CHANGEME',
+  mapApiKey: 'AIzaSyBhm0iaIGG0Ko5IsfZx-CpLt01YHkp4Y1w',
+  config: {
+    "API_URL": "https://pwa-workshop-api.herokuapp.com",
+    "VAPID_PUBLIC_KEY": "BMDZ6FANqsYRF9iGo3Ki0LdltGZZksgIFbgxBr_otO0H7jTFgcm3v2bGSgnVGJ5bidvLvuKStirfDNl4khVBiok"
+  }
 };
diff --git a/src/index.html b/src/index.html
index 3ea6f13..4bf8402 100644
--- a/src/index.html
+++ b/src/index.html
@@ -18,7 +18,6 @@
   <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 
 </head>
-
 <body class="app header-fixed sidebar-fixed">
   <!-- Enable bootstrap 4 theme -->
   <script>window.__theme = 'bs4';</script>
diff --git a/src/ngsw-config.json b/src/ngsw-config.json
new file mode 100644
index 0000000..6dd6ec3
--- /dev/null
+++ b/src/ngsw-config.json
@@ -0,0 +1,31 @@
+{
+  "index": "/index.html",
+  "assetGroups": [{
+    "name": "app",
+    "installMode": "prefetch",
+    "resources": {
+      "files": [
+        "/favicon.ico",
+        "/index.html"
+      ],
+      "versionedFiles": [
+        "/*.bundle.css",
+        "/*.bundle.js",
+        "/*.chunk.js"
+      ]
+    }
+  }, {
+    "name": "assets",
+    "installMode": "lazy",
+    "updateMode": "prefetch",
+    "resources": {
+      "files": [
+        "/assets/**"
+      ]
+    }
+  }],
+  "push": {
+    "showNotifications": true,
+    "backgroundOnly": false
+  }
+}
diff --git a/src/test.js b/src/test.js
new file mode 100644
index 0000000..cb768c2
--- /dev/null
+++ b/src/test.js
@@ -0,0 +1,28 @@
+const webpush = require('web-push');
+
+const options = {
+ vapidDetails: {
+   subject: 'http://127.0.0.1:8080',
+   publicKey: 'BMDZ6FANqsYRF9iGo3Ki0LdltGZZksgIFbgxBr_otO0H7jTFgcm3v2bGSgnVGJ5bidvLvuKStirfDNl4khVBiok',
+   privateKey: 'tZacTzAIA5W-B19SsaQ-4KGWrKPAAqth5HQfJsjyHYs'
+ },
+ TTL: 5000
+}
+
+// NgPushRegistration-Object from the browser
+const pushSubscription =  {"endpoint":"https://fcm.googleapis.com/fcm/send/dQn-7TOL3dM:APA91bHLuAR3G-XLxsSsjvo_P5UIEwrPS85Ho-fUZOFMpuuubEFgU6_dfgMZJvgvIOLCpSbRjPc_iWCdjgFz9snS3Rtg5H3H14RDeKt051CQp441PqqXrKHwR5ICpEyLV3x3jcEmGF8Q","expirationTime":null,"keys":{"p256dh":"BBq-RpOiUXSucWCUj8RrFy5jwKRZ6Rv9y7AHYqbE-0vIestbyRt8oxAC2yrbkwuKgPRYAElC32Sbs_Wo2mXNpJU=","auth":"sbIdhYisA6_Kc3_hDYJdog=="}};
+
+const payload = JSON.stringify({
+ notification: {
+   title: 'Info',
+   body: 'Hallo Welt!',
+   icon: './assets/angular.png',
+   data: 'additional data'
+ }
+});
+
+webpush.sendNotification(
+ pushSubscription,
+ payload,
+ options
+);