feat(electron): Added notifications sample

package.js

@@ -19,7 +19,7 @@ const DEFAULT_OPTS = {
     ].concat(devDeps.map(name => `/node_modules/${name}($|/)`))
 };
 
-const icon = './src/app/app-icon';
+const icon = './src/app/dist/assets/app-icon';
 
 if (icon) {
     DEFAULT_OPTS.icon = icon;

package.json

@@ -37,8 +37,10 @@
     "@angular/router": "^3.3.0",
     "@ngrx/core": "^1.2.0",
     "@ngrx/store": "^2.2.1",
+    "copy-webpack-plugin": "^4.0.1",
     "core-js": "^2.4.1",
     "electron": "^1.4.3",
+    "hammerjs": "^2.0.8",
     "rxjs": "^5.0.0-rc.1",
     "webpack-target-electron-renderer": "^0.4.0",
     "zone.js": "^0.7.2"

src/app/components/app.component.ts

@@ -2,7 +2,7 @@ import { AppState } from './../store/appState.store';
 /**
  * Import decorators and services from angular
  */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 
 /*
  * App Component
@@ -12,12 +12,15 @@ import { Component, OnInit } from '@angular/core';
     // The selector is what angular internally uses
     selector: 'ae-app', // <app></app>
     styleUrls: ['./app.theme.scss'],
+    encapsulation: ViewEncapsulation.None,
     template: `
     <div [class.m2app-dark]="isDarkTheme">
         <main>
             <router-outlet></router-outlet>
             <br/>
-            <button md-raised-button color="primary" (click)="isDarkTheme = !isDarkTheme">TOGGLE THEME</button>
+            <md-slide-toggle (change)="isDarkTheme = !isDarkTheme" [checked]="isDarkTheme" color="primary">
+                Set Dark theme
+            </md-slide-toggle>
         </main>
     </div>
     `

src/app/components/home/home.component.html

@@ -1,4 +1,6 @@
 <div [formGroup]="messageForm">
   <h1>{{messageForm.controls['messageText'].value}}</h1>
   <input type="text" formControlName="messageText"/><br/>
+  <br/>
+  <button md-raised-button color="primary" (click)="doNotify();">NOTIFICATION</button>
 </div>

src/app/components/home/home.component.ts

@@ -9,6 +9,11 @@ import { FormControl, FormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '../../store/appState.store';
 
+import * as path from 'path';
+
+// Allow us to use Notification API here.
+declare var Notification: any;
+
 @Component({
   selector: 'ae-home',
   templateUrl: './home.component.html',
@@ -21,11 +26,18 @@ export class HomeComponent implements OnInit {
     messageText: new FormControl('Angular2'),
   });
 
-  constructor(public store: Store<AppState>) {}
+  constructor(public store: Store<AppState>) { }
 
   ngOnInit() {
     let state = this.store.select('authStore').subscribe((state: any) => {
       this.name = state.username;
     });
   }
+  doNotify() {
+    let message = {
+      title: "Content-Image Notification",
+      body: "Short message plus a custom content image",
+    };
+    new Notification(message.title, message);
+  }
 }

src/vendor.ts

@@ -13,3 +13,6 @@ import '@angular/http';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/filter';
 import 'rxjs/add/operator/mergeMap';
+
+// Hammer
+import 'hammerjs';

webpack.config.js

@@ -7,6 +7,7 @@ const webpack = require('webpack');
 const helpers = require('./helpers');
 const path = require('path');
 
+var CopyWebpackPlugin = require('copy-webpack-plugin');
 const webpackTargetElectronRenderer = require('webpack-target-electron-renderer');
 const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
 
@@ -103,6 +104,13 @@ var config = {
         // See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
         // See: https://github.com/webpack/docs/wiki/optimization#multi-page-app
         new webpack.optimize.CommonsChunkPlugin({ name: ['vendor', 'polyfills'], minChunks: Infinity }),
+        // Plugin: CopyWebpackPlugin
+        // Description: Copy files and directories in webpack.
+        //
+        // Copies project static assets.
+        //
+        // See: https://www.npmjs.com/package/copy-webpack-plugin
+        new CopyWebpackPlugin([{ from: 'src/assets', to: 'assets' }]),
         /**
        * Plugin LoaderOptionsPlugin (experimental)
        *