Configurando Push Notifications

Clase 25 de 31 • Curso de PWA con Angular 2018

Mario Alejandro Cortez Salinas

student•

Se tiene que modificar las importaciones por actualizaciones, en mi proyecto las importe así y se solucionaron los problemas. fecha: 3 de Octubre 2018

`import { Injectable } from ‘@angular/core’;
import { AngularFireDatabase } from ‘@angular/fire/database’;
import { AngularFireAuth } from ‘@angular/fire/auth’;
import * as firebase from ‘firebase’;

import 'rxjs/add/operator/take’
import { BehaviorSubject } from ‘rxjs/internal/BehaviorSubject’;`

ademas rxjs se actualizo pero no pude encontrar la nueva manera de importar, pero el problema se puede solucionar ejecutando el siguiente comando

npm install rxjs-compat@6 --save

Carlos Enrique Ramírez Flores

student•

gracias, me ayudo mucho!

andres felipe robin gonzalez

student•

para angular superior al 6 debe quedar así el message.services.ts: import { Injectable } from '@angular/core'; import { AngularFireDatabase } from '@angular/fire/database'; import { AngularFireAuth } from '@angular/fire/auth/'; import * as firebase from 'firebase';

import * as Rx from "rxjs"; import { take } from 'rxjs/operators';

@Injectable() export class MessagingService {

messaging = firebase.messaging(); currentMessage = new Rx.BehaviorSubject(null);

constructor(private db: AngularFireDatabase, private afAuth: AngularFireAuth) { }

updateToken(token) { this.afAuth.authState.pipe(take(1)).subscribe(user => { if (!user) return;

  const data = { [user.uid]: token }
  this.db.object('fcmTokens/').update(data)
})

}

getPermission() { this.messaging.requestPermission() .then(() => { console.log('Notification permission granted.'); return this.messaging.getToken() }) .then(token => { console.log(token) this.updateToken(token) }) .catch((err) => { console.log('Unable to get permission to notify.', err); }); }

receiveMessage() { this.messaging.onMessage((payload) => { console.log("Message received.", payload); this.currentMessage.next(payload) });

} }

IA Interactive

student•

Por fin, todo el curso había estado esperando este capitulo.

Carlos Uriel de Jesus Sánchez González

student•

hay que revisar los imports para la version 6 de angular

Sebastian Torres

student•

angular-cli.json es angular.json para angular 6.x

Jose Giovanni Vargas Rueda

student•

De donde sale el gcm_sender_id ?

Json Alzate

student•

ve a tu proyecto de firebase->configuración del proyecto->Mensajería en la nube
y lo encontrarás como id del remitente

Roberto Bock

student•

jaja eso fue brusco lo del gcm_sender_id

Mateo Santiago Zapata Maldonado

student•

Explico algo que no explico el profesor, no descarto lo bueno que sea pero:

El token que se genera, es por pestaña, es un hash especifico por pestaña abierta, por eso tiene la notificacion distintos contextos: 1. Fuera de pestaña que es esa que se muestra fuera del navegador. 2. Dentro de la pestaña, puedes utilizar otra herramienta o libreria de animacion para mostrar una animacion diferente a la que se muestra por fuera.

Por eso facebook cuando estas dentro de una pestaña te mostraba una notificacion del lado izquierdo y cuando estas fuera de el te muestra otra.

Luis Alberto Zapata Zepeda

student•

Me aparece esto al hacer ng build --prod , no encuentro la manera de resolverlo, Alguien que le haya ocurrido?

The firebase-messaging-sw.js asset path must start with the project source root.
Error: The firebase-messaging-sw.js asset path must start with the project source root.
    at assetPatterns.map.assetPattern (C:\Users\Luis Zapata\Desktop\pwa\node_modules\@angular-devkit\build-angular\src\utils\normalize-asset-patterns.js:32:23)
    at Array.map (<anonymous>)
    at Object.normalizeAssetPatterns (C:\Users\Luis Zapata\Desktop\pwa\node_modules\@angular-devkit\build-angular\src\utils\normalize-asset-patterns.js:25:10)
    at Object.normalizeBuilderSchema (C:\Users\Luis Zapata\Desktop\pwa\node_modules\@angular-devkit\build-angular\src\utils\normalize-builder-schema.js:28:48)
    at TapSubscriber.rxjs_1.from.pipe.operators_1.tap.opts [as _tapNext] (C:\Users\Luis Zapata\Desktop\pwa\node_modules\@angular-devkit\build-angular\src\dev-server\index.js:35:271)
    at TapSubscriber._next (C:\Users\Luis Zapata\Desktop\pwa\node_modules\@angular-devkit\build-angular\node_modules\rxjs\internal\operators\tap.js:59:27)
    at TapSubscriber.Subscriber.next (C:\Users\Luis Zapata\Desktop\pwa\node_modules\@angular-devkit\build-angular\node_modules\rxjs\internal\Subscriber.js:67:18)
    at MergeMapSubscriber.notifyNext (C:\Users\Luis Zapata\Desktop\pwa\node_modules\@angular-devkit\build-angular\node_modules\rxjs\internal\operators\mergeMap.js:92:26)
    at InnerSubscriber._next (C:\Users\Luis Zapata\Desktop\pwa\node_modules\@angular-devkit\build-angular\node_modules\rxjs\internal\InnerSubscriber.js:28:21)
    at InnerSubscriber.Subscriber.next (C:\Users\Luis Zapata\Desktop\pwa\node_modules\@angular-devkit\build-angular\node_modules\rxjs\internal\Subscriber.js:67:18)
    at SafeSubscriber.__tryOrUnsub (C:\Users\Luis Zapata\Desktop\pwa\node_modules\@angular-devkit\architect\node_modules\rxjs\internal\Subscriber.js:209:16)
    at SafeSubscriber.next (C:\Users\Luis Zapata\Desktop\pwa\node_modules\@angular-devkit\architect\node_modules\rxjs\internal\Subscriber.js:147:22)
    at Subscriber._next (C:\Users\Luis Zapata\Desktop\pwa\node_modules\@angular-devkit\architect\node_modules\rxjs\internal\Subscriber.js:90:26)
    at Subscriber.next (C:\Users\Luis Zapata\Desktop\pwa\node_modules\@angular-devkit\architect\node_modules\rxjs\internal\Subscriber.js:67:18)
    at SafeSubscriber.__tryOrUnsub (C:\Users\Luis Zapata\Desktop\pwa\node_modules\@angular-devkit\build-angular\node_modules\rxjs\internal\Subscriber.js:209:16)
    at SafeSubscriber.next (C:\Users\Luis Zapata\Desktop\pwa\node_modules\@angular-devkit\build-angular\node_modules\rxjs\internal\Subscriber.js:147:22)

Diego Forero

Team Platzi•

El error al parecer es en la definición de las rutas, puedes compartir tu código para poder ayudarte.

Wilson Alejandro Gonzalez Gaitan

student•

Te comparto el proyecto que vengo trabajando, espero que sea de utilidad es con angular 8

https://github.com/wilson1234567891962/PWA-Angular

Wilson Alejandro Gonzalez Gaitan

student•

Para el error del take debe quedar de la siguiente manera el services

<import {Injectable} from '@angular/core';
import {AngularFireDatabase} from '@angular/fire/database';
import {AngularFireAuth} from '@angular/fire/auth';
import * as firebase from 'firebase';
import {BehaviorSubject} from 'rxjs';
import 'rxjs/add/operator/take';

@Injectable({
  providedIn: 'root'
})
export class MessagingService {

  messaging = firebase.messaging();
  currentMessage = new BehaviorSubject(null);

  constructor(private db: AngularFireDatabase, private afAuth: AngularFireAuth) {
  }
  
  updateToken(token) {
    this.afAuth.authState.take(1).subscribe(user => {
      if (!user) {
        return;
      }

      const data = {[user.uid]: token};
      this.db.object('fcmTokens/').update(data);
    });
  }

  getPermission() {
    this.messaging.requestPermission()
      .then(() => {
        console.log('Notification permission granted.');
        return this.messaging.getToken();
      })
      .then(token => {
        console.log(token);
        this.updateToken(token);
      })
      .catch((err) => {
        console.log('Unable to get permission to notify.', err);
      });
  }

  receiveMessage() {
    this.messaging.onMessage((payload) => {
      console.log('Message received.', payload);
      this.currentMessage.next(payload);
    });

  }
}
>

Christian Michelle Torres Martínez

student•

Hola que tal, oye utilizo el mismo código de tu servicio y me marca error en el take, tienes que instalar algo mas?

Miguel Herreros Cejas

student•

Buenas! ¿Entiendo entonces de que se puede enviar un Push Notification incluso si el usuario no está logueado en la App, para avisarle de una alarma o de un evento? Estoy haciendo una PWA con Vue.js pero estoy siguiendo el curso para entender conceptos. Si alguien tiene un buen tutorial sobre PWA en Vue.js (hasta que salga el esperado curso en Platzi), lo agradecería. Gracias!

carlos emmanuel arcos novelo

student•

![](

copie le código que veo en los comentarios pero aun así me da ese error, no sé si hay que instalar alguna dependencia. por favor ayuda!!!

Francisco Samuel Lesmes Fajardo

student•

necesite instalalar sudo npm install --save rxjs-compat, para el error que genera take(1) en angular 8

Gerardo Sotelo Arellano

student•

Hey !
Los archivos estan incompletos, en la carpeta ‘app’ solo esta app.component.ts y faltan los demas…

Diego Forero

Team Platzi•

Aquí tienes todo el repositorio completo del curso lo mejor es que escribas el código y si tienes dudas consultas el repositorio.

Wilson Fabian Pérez Sucuzhañay

student•

Cambio algo en la ultima actulización de Angular la copiar y pegar el messaging.service.ts y compilar da este eroor

ERROR in src/services/messaging.service.ts(5,18): error TS2307: Cannot find module ‘rxjs/add/operator’.
src/services/messaging.service.ts(18,27): error TS2339: Property ‘take’ does not exist on type ‘Observable<User>’.

tambien da el de import {BehaviorSubject} from ‘rxjs’; pero lo solucione quitando la parte final despeus de rxjs pero en take no se como solucionar

Alex Fabian Moreno Acero

student•

tampoco he podido solucionar el error del take

Wilson Fabian Pérez Sucuzhañay

student•

perdón ya lo solucione, creo que puse en el siguiente video como, si no comentame y pego el código

The firebase-messaging-sw.js asset path must start with the project source root.
Error: The firebase-messaging-sw.js asset path must start with the project source root.
    at assetPatterns.map.assetPattern (C:\Users\Luis Zapata\Desktop\pwa\node_modules\@angular-devkit\build-angular\src\utils\normalize-asset-patterns.js:32:23)
    at Array.map (<anonymous>)
    at Object.normalizeAssetPatterns (C:\Users\Luis Zapata\Desktop\pwa\node_modules\@angular-devkit\build-angular\src\utils\normalize-asset-patterns.js:25:10)
    at Object.normalizeBuilderSchema (C:\Users\Luis Zapata\Desktop\pwa\node_modules\@angular-devkit\build-angular\src\utils\normalize-builder-schema.js:28:48)
    at TapSubscriber.rxjs_1.from.pipe.operators_1.tap.opts [as _tapNext] (C:\Users\Luis Zapata\Desktop\pwa\node_modules\@angular-devkit\build-angular\src\dev-server\index.js:35:271)
    at TapSubscriber._next (C:\Users\Luis Zapata\Desktop\pwa\node_modules\@angular-devkit\build-angular\node_modules\rxjs\internal\operators\tap.js:59:27)
    at TapSubscriber.Subscriber.next (C:\Users\Luis Zapata\Desktop\pwa\node_modules\@angular-devkit\build-angular\node_modules\rxjs\internal\Subscriber.js:67:18)
    at MergeMapSubscriber.notifyNext (C:\Users\Luis Zapata\Desktop\pwa\node_modules\@angular-devkit\build-angular\node_modules\rxjs\internal\operators\mergeMap.js:92:26)
    at InnerSubscriber._next (C:\Users\Luis Zapata\Desktop\pwa\node_modules\@angular-devkit\build-angular\node_modules\rxjs\internal\InnerSubscriber.js:28:21)
    at InnerSubscriber.Subscriber.next (C:\Users\Luis Zapata\Desktop\pwa\node_modules\@angular-devkit\build-angular\node_modules\rxjs\internal\Subscriber.js:67:18)
    at SafeSubscriber.__tryOrUnsub (C:\Users\Luis Zapata\Desktop\pwa\node_modules\@angular-devkit\architect\node_modules\rxjs\internal\Subscriber.js:209:16)
    at SafeSubscriber.next (C:\Users\Luis Zapata\Desktop\pwa\node_modules\@angular-devkit\architect\node_modules\rxjs\internal\Subscriber.js:147:22)
    at Subscriber._next (C:\Users\Luis Zapata\Desktop\pwa\node_modules\@angular-devkit\architect\node_modules\rxjs\internal\Subscriber.js:90:26)
    at Subscriber.next (C:\Users\Luis Zapata\Desktop\pwa\node_modules\@angular-devkit\architect\node_modules\rxjs\internal\Subscriber.js:67:18)
    at SafeSubscriber.__tryOrUnsub (C:\Users\Luis Zapata\Desktop\pwa\node_modules\@angular-devkit\build-angular\node_modules\rxjs\internal\Subscriber.js:209:16)
    at SafeSubscriber.next (C:\Users\Luis Zapata\Desktop\pwa\node_modules\@angular-devkit\build-angular\node_modules\rxjs\internal\Subscriber.js:147:22)

<import {Injectable} from '@angular/core';
import {AngularFireDatabase} from '@angular/fire/database';
import {AngularFireAuth} from '@angular/fire/auth';
import * as firebase from 'firebase';
import {BehaviorSubject} from 'rxjs';
import 'rxjs/add/operator/take';

@Injectable({
  providedIn: 'root'
})
export class MessagingService {

  messaging = firebase.messaging();
  currentMessage = new BehaviorSubject(null);

  constructor(private db: AngularFireDatabase, private afAuth: AngularFireAuth) {
  }
  
  updateToken(token) {
    this.afAuth.authState.take(1).subscribe(user => {
      if (!user) {
        return;
      }

      const data = {[user.uid]: token};
      this.db.object('fcmTokens/').update(data);
    });
  }

  getPermission() {
    this.messaging.requestPermission()
      .then(() => {
        console.log('Notification permission granted.');
        return this.messaging.getToken();
      })
      .then(token => {
        console.log(token);
        this.updateToken(token);
      })
      .catch((err) => {
        console.log('Unable to get permission to notify.', err);
      });
  }

  receiveMessage() {
    this.messaging.onMessage((payload) => {
      console.log('Message received.', payload);
      this.currentMessage.next(payload);
    });

  }
}
>

Configurando Push Notifications

Introducción

¡Vamos a renovar este curso!

Qué son las PWAs?

PWA vs SPA

Setup del Proyecto en Mac, Windows y Linux

Presentando el Editor de Código

Generando nuestro primer PWA

Service Worker

Correr nuestro app en modo de producción

Qué es el service worker de Angular?

Gestión de versiones del Service Worker

Configuración del Service Worker y Caching Policy

Propiciando el Click to Install banner

Estilo

Comprendiendo el concepto de responsividad

Introducción a Angular Material

Instalación de Angular Material

Configuración de Angular Material en el proyecto

Datos Dinámicos

Introducción a Acceso a Datos

Implementando Firebase

Creando un servicio de conexión a Firebase

Creando vista de lista y detalle

Guardando notas en Firebase

Obteniendo notas de Firebase

Editando notas

Implementando Caching

Push Notifications

Implementando Login

Configurando Push Notifications

Cómo instalar curl en Mac, Windows y/o Linux

Configurando Firebase Hosting y subiendo nuestro proyecto a producción

Implementando Push Notifications

Cloud Functions

NativeScript: Características Nativas en un Web App con Angular

¿Dónde Aprender Más?