Notificaciones push nativas con Angular 2

Las notificaciones push pueden ser de utilidad si estas desarrollando una aplicacion en la que necesitas mantener la usuario informado de eventos. En este articulo voy a mostrarte como desarrollar una pequena aplicacion en Angular 2 que mostrara una notificacion push.

La API de Notificaciones permite a las páginas web controlar la visualización de las notificaciones para el usuario final - las cuales exceden el nivel superior en el contexto de navegación, por tanto, puede aparecer incluso el usuario ha cambiado pestañas o se mueve a una aplicación diferente. La API está diseñada para ser compatible con los sistemas de notificación existentes en diferentes plataformas.                                                                                            - Mozilla

El API de notificaciones ha estado disponible desde hace algunos navegadores desde hace un tiempo, y con la reciente promoción de Angular 2 a Release Candidate (yay!), pensé traer este potente API para el mundo angular a manera de una biblioteca, haría más accesible y reutilizable este API para los desarrolladores. Puede ver ng2-notifications aqui

Demo

En el siguiente demo las notificaciones pueden ser personalizadas y mostradas utilizando ng2-notifications. Te invito a que lo intentes personalmente:

Empecemos

npm install ng2-notifications --save

La sentencia "import" puede ser incluida en cualquier componente de Angular 2

import { PushNotificationComponent } from 'ng2-notifications';

@Component({
 ...
 directives: [PushNotificationComponent]
})

Ahora la directiva de notificacion puede ser utilizada dentro del template del componente de esta forma:

<push-notification 
  title="Getting Started"
  body="A simple npm install can get you there"
  icon="https://goo.gl/3eqeiE">
</push-notification>

La sintaxis

Una de las caracteristicas mas poderosas de Angular 2 es su marcado declarativo. Con ng2-notifications una notificacion push puede ser escrita en Angular 2 con el uso de literals o mis favoritas data bindings.

<push-notification 
  title="notification.title"
  body="notification.body"
  icon="notification.icon">
</push-notification>

Donde en el componente de clase una propiedad de notificacion podria verse de esta manera:

export class AppComponent {
  public notification: any = {
    title: 'New Angular 2 Library!',
    body: 'ng2-notifications',
    icon: 'https://goo.gl/3eqeiE'
  };
}

No se ve tan mal, cierto? Otras propiedades incluyen las siguientes:

{
  tag: string, // optional, no default value
  dir: string, // defaults to 'auto', options: ['ltr','rtl']
  data: any,   // optional, no default value
  lang: string // defaults to browser's language, ['en-US', ...]
}

Construyendo la libreria

La libreria ng2-notifications es solamente un wrapper para el API de Notificaciones Web, es abstracto y simplifica el proceso de solicitar al usuario permiso para las notificaciones y expone una facil y predecible API en forma de un componente de Angular 2.

@Directive({
  selector: 'push-notification'
})

Puedes preguntarte, por que no utilizar en su lugar un componente?, bueno, un componente es solo una directiva mas una vista, en este caso una vista no es requerida desde que la interfaz de usuario, es por eso que se vera diferente en cada navegador.

Ademas, el library agrega dos propiedades utiles: [closeDelay] y [when]. El close delay hace exactamente lo que estas pensando, cierra la notificacion despues de "n" milisegundos. La propiedad when es utilizada para activar la notificacion dada una expresion booleana. Es como un "ng-show".

Entender el ciclo de vida de una directiva en Angular 2 es crucial para mostrar y ocultar notificaciones al momento adecuado: cuando la directiva compila, cuando las propiedades de los datos cambia y cuando la directiva es eliminada del componente padre.

import {
  Directive,
  EventEmitter,
  OnInit,
  OnChanges,
  OnDestroy,
  Input,
  Output
} from ‘@angular/core’;

 A partir de la declaracion de importacion anterior podemos ver tres importantes API de Angular que nos pueden ayudar a enlazar determinados estados de directivas implementando estas en nuestra declaracion de directivas en la clase.

export class PushNotificationComponent implements 
  OnInit, OnChanges, OnDestroy {
    ...
}

Al observar el nuevo API de directivas en Angular 2 era obvio que el API @input y @output podrian haber sido aprovechados para comunicacion bidireccional. Algunas de las entradas y salida se pueden definir de la siguiente manera:

@Input() public title: string;
@Input() public body: string;
@Input() public icon: string;

@Output() public onClick: EventEmitter<any> = new EventEmitter();
@Output() public onClose: EventEmitter<any> = new EventEmitter();

Estas entradas y salidas son las que nos permiten leer los datos de las propiedades y que ejecutan callbacks luego que los eventos son disparados. Este ultimo se puede expresar asi en el marcado:

<push-notification 
  ...
  (action)="notification.action($event)">
</push-notification>

Estas son solo algunas de las partes cruciales para construir directivas en Angular 2. Para ver el codigo completo, visita el proyecto en GitHub: https://github.com/alexcastillo/ng2-notifications