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 ()”}
Es un problema de permisos en Firebase, revisa que tengas los permisos bien configurados, revisa con detenimiento las clases donde se implementa Firebase.
¿Como lo resolviste? a mi me pasó lo mismo y ya chequé el video de la configuración de Firebase
Alguien tiene el comando de curl para las push notificaciont?
Comparto el comando (reemplazar los “…” por sus respectivos keys):
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'],})exportclassAppComponentimplementsOnInit{private title ='pwa'; categories =['personal','work'];note: any ={};constructor(privateswUpdate:SwUpdate,privatenotesService:NotesService,privatefireMessaging:AngularFireMessaging,privatesnackbar: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});});}}
buena implementacion
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
Alguien tuvo este error ?
firebase__WEBPACK_IMPORTED_MODULE_3__.messaging is not a function
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 firebasefrom'firebase';import{ map }from'rxjs/operators';import{ take }from'rxjs/operators';import{BehaviorSubject}from'rxjs';@Injectable()exportclassMessagingService{ messaging = firebase.messaging(); currentMessage =newBehaviorSubject(null);constructor(privatedb:AngularFireDatabase,privateafAuth:AngularFireAuth){}updateToken(token){conststateAtuhVar: 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.');returnthis.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);});}}
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 firebasefrom'firebase';import{BehaviorSubject}from'rxjs';@Injectable()exportclassMessagingService{ messaging = firebase.messaging(); currentMessage =newBehaviorSubject(null);constructor(privatedb:AngularFireDatabase,privateafAuth: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.');returnthis.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)});}}
Métodos del servicio Push Notification:
Pedir permiso al usuario para recibir la PushNotification
Generar un token único
Recibir la Push Notification
Si no aparece la opción directamente en el menú info de la url, pudiera verse algo como lo siguiente …
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.
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
