Implementando Push Notifications

Clase 28 de 31 • Curso de PWA con Angular 2018

Jesus Sandrea

student•

Tengo este error AIUDDA

Notification permission granted.
A bad HTTP response code (404) was received when fetching the script.
Failed to load resource: net::ERR_INVALID_RESPONSE
messaging.service.ts:37 Unable to get permission to notify. FirebaseError {code: “messaging/failed-serviceworker-registration”, message: “Messaging: We are unable to register the default s…t. (messaging/failed-serviceworker-registration).”, browserErrorMessage: “Failed to register a ServiceWorker: A bad HTTP res…code (404) was received when fetching the script.”, stack: “FirebaseError: Messaging: We are unable to registe…Task ()”}

Diego Forero

Team Platzi•

Es un problema de permisos en Firebase, revisa que tengas los permisos bien configurados, revisa con detenimiento las clases donde se implementa Firebase.

Mario Alejandro Cortez Salinas

student•

¿Como lo resolviste? a mi me pasó lo mismo y ya chequé el video de la configuración de Firebase

Ludwring Liccien

student•

Alguien tiene el comando de curl para las push notificaciont?

Juan Antonio Baracat

student•

Comparto el comando (reemplazar los “…” por sus respectivos keys):

curl https://fcm.googleapis.com/fcm/send \
-H "Content-Type: application/json" \
	-H "Authorization: key=..." \
-d '{ "notification": { "title": "Nueva Feature!", "body": "Hay nuevas features","icon":"https://url-de-tu-icono", "click_action": "http://www.platzi.com"}, "to" : "..."
}'

Wilson Alejandro Gonzalez Gaitan

student•

Gracias

CIRO VLADIMIR ARREOLA CAMACHO

student•

ok, esto es lo que me sirvió.

Puedes utilizar AngularFireMessaging para facilitar la configuración de la suscripción y eventos de las notificaciones. doc
el gcm_sender_id es el mismo para cualquier app, es el id de Firebase Cloud Messaging (FCM). doc
tu app debe definir el service worker de mensajería de Firebase en firebase-messaging-sw.js o especificar otro. doc

algo de código ;)

app.component.ts

import {Component, OnInit} from '@angular/core';
import {SwUpdate} from '@angular/service-worker';
import {NotesService} from './services/notes.service';
import {AngularFireMessaging} from '@angular/fire/messaging';
import {mergeMapTo} from 'rxjs/operators';
import {MatSnackBar} from '@angular/material';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  private title = 'pwa';
  categories = ['personal', 'work'];
  note: any = {
  };

  constructor(private swUpdate: SwUpdate, private notesService: NotesService,
              private fireMessaging: AngularFireMessaging, private snackbar: MatSnackBar) {
  }

  ngOnInit(): void {
    this.swUpdate.available.subscribe(value => {
      window.location.reload();
    });
    this.requestPermission();
    this.listenNotifications();
  }

  save() {
    console.log('saving note', this.note);
    this.notesService.save(this.note).then(value => {
      console.log('note saved', value);
    }).catch(reason => {
      console.log('could not save note', reason);
    });
  }

  requestPermission() {
    this.fireMessaging.requestPermission
      .pipe(mergeMapTo(this.fireMessaging.tokenChanges))
      .subscribe(token => {
        console.log('notifications permission granted', token);
      }, error => {
        console.log('error granting permission', error);
      });
  }

  listenNotifications() {
    this.fireMessaging.messages.subscribe((message: any) => {
      console.log('message received', message);
      this.snackbar.open(message.notification.title, 'Close', {duration: 3000});
    });
  }
}

Carlos Uriel de Jesus Sánchez González

student•

buena implementacion

Ivan Alexander Flores Linares

student•

Alguien sabe por qué al momento de recibir la notificación no me llega la información de la misma ? Osea me llega la push peor no puedo manipular la info

Gonzalo Gras cantou

student•

Alguien tuvo este error ?
firebase__WEBPACK_IMPORTED_MODULE_3__.messaging is not a function

Gonzalo Gras cantou

student•

el error me lo genera el en service de messaging

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase';
import { map } from 'rxjs/operators';
import { take } from 'rxjs/operators';
import {BehaviorSubject} from 'rxjs';

@Injectable()
export class MessagingService {


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


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

  }


  updateToken(token) {
    const stateAtuhVar: any = this.afAuth.authState;
    stateAtuhVar.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);
    });

  }
}

Wilson Fabian Pérez Sucuzhañay

student•

es por la actualización de versiones Eduardo prueba con la versión 5 de RXJS mientras si instalaste ahora como fue mi caso ya te bajo la versión 6 del mismo.

Me toco sufrir buscando pero no se si esta ser la respuesta idonea para esto quita el take y solo deja suscribe comparto mi archivo como lo deje para que no diera el error del Observable y el subject

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase';
import {BehaviorSubject} from 'rxjs';


@Injectable()
export class MessagingService {

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

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


  updateToken(token) {
    this.afAuth.authState.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)
    });

  }
}

Julio J Yépez

student•

Métodos del servicio Push Notification:

Pedir permiso al usuario para recibir la PushNotification
Generar un token único
Recibir la Push Notification

Julio J Yépez

student•

Si no aparece la opción directamente en el menú info de la url, pudiera verse algo como lo siguiente …

Julio J Yépez

student•

Guao … siendo este uno de los temas más interesantes de las PWAs … me parece que ha quedado un tanto incompleto …

Quedan muchas dudas …

¿De dónde sale el código 103953800507 que debimos colocar fijo en el manifest.json?
¿qué es y por que es necesario el modulo de rxjs?
¿cómo obtengo el token del usuario si no tengo acceso al inspector?
¿cómo hacemos el manejo del curl y el envío de la notificación pero desde el backend, no desde la cónsola?
todo queda como Reto … pero como completar el reto si aún tenemos esas dudas …

Bueno.
Adelante.

Rodman M. Swanston C.

student•

Es el Sender ID del proyecto de FireBase
rxjs es una librería que necesitan los servicios de Angular (No quiero decir que solo lo utilice este)
Cuando acepte los permisos puedes guardar el token en la BD
Es una petición tipo POST -H para los headers -d para el body

curl https://fcm.googleapis.com/fcm/send \
-H "Content-Type: application/json" \
	-H "Authorization: key=..." \
-d '{ "notification": { "title": "Nueva Feature!", "body": "Hay nuevas features","icon":"https://url-de-tu-icono", "click_action": "http://www.platzi.com"}, "to" : "..."
}'

import {Component, OnInit} from '@angular/core';
import {SwUpdate} from '@angular/service-worker';
import {NotesService} from './services/notes.service';
import {AngularFireMessaging} from '@angular/fire/messaging';
import {mergeMapTo} from 'rxjs/operators';
import {MatSnackBar} from '@angular/material';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  private title = 'pwa';
  categories = ['personal', 'work'];
  note: any = {
  };

  constructor(private swUpdate: SwUpdate, private notesService: NotesService,
              private fireMessaging: AngularFireMessaging, private snackbar: MatSnackBar) {
  }

  ngOnInit(): void {
    this.swUpdate.available.subscribe(value => {
      window.location.reload();
    });
    this.requestPermission();
    this.listenNotifications();
  }

  save() {
    console.log('saving note', this.note);
    this.notesService.save(this.note).then(value => {
      console.log('note saved', value);
    }).catch(reason => {
      console.log('could not save note', reason);
    });
  }

  requestPermission() {
    this.fireMessaging.requestPermission
      .pipe(mergeMapTo(this.fireMessaging.tokenChanges))
      .subscribe(token => {
        console.log('notifications permission granted', token);
      }, error => {
        console.log('error granting permission', error);
      });
  }

  listenNotifications() {
    this.fireMessaging.messages.subscribe((message: any) => {
      console.log('message received', message);
      this.snackbar.open(message.notification.title, 'Close', {duration: 3000});
    });
  }
}

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase';
import { map } from 'rxjs/operators';
import { take } from 'rxjs/operators';
import {BehaviorSubject} from 'rxjs';

@Injectable()
export class MessagingService {


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


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

  }


  updateToken(token) {
    const stateAtuhVar: any = this.afAuth.authState;
    stateAtuhVar.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);
    });

  }
}

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase';
import {BehaviorSubject} from 'rxjs';


@Injectable()
export class MessagingService {

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

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


  updateToken(token) {
    this.afAuth.authState.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)
    });

  }
}

Implementando 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?