El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Notificacions Push

Següent ►
►

Les notificacions push són una eina poderosa per mantenir els usuaris compromesos amb la teva aplicació. En aquest tema, aprendrem com integrar notificacions push en una aplicació Ionic utilitzant Firebase Cloud Messaging (FCM) i el plugin de Cordova per a notificacions push.

Objectius del Tema

  • Entendre què són les notificacions push i com funcionen.
  • Configurar Firebase per a notificacions push.
  • Integrar el plugin de Cordova per a notificacions push en una aplicació Ionic.
  • Enviar i rebre notificacions push.

Què són les Notificacions Push?

Les notificacions push són missatges que es poden enviar des d'un servidor a una aplicació mòbil, fins i tot quan l'aplicació no està activa. Aquestes notificacions poden contenir informació important, com ara actualitzacions, recordatoris o ofertes especials.

Configuració de Firebase per a Notificacions Push

Pas 1: Crear un Projecte a Firebase

  1. Visita Firebase Console.
  2. Crea un nou projecte o selecciona un projecte existent.
  3. Afegeix la teva aplicació Android o iOS al projecte.

Pas 2: Configurar Firebase Cloud Messaging (FCM)

  1. A la consola de Firebase, navega a la secció de Cloud Messaging.
  2. Genera les claus de servidor necessàries per a l'enviament de notificacions.

Pas 3: Descarregar el fitxer google-services.json o GoogleService-Info.plist

  1. Descarrega el fitxer de configuració corresponent (google-services.json per a Android o GoogleService-Info.plist per a iOS).
  2. Afegeix aquest fitxer a la carpeta del teu projecte Ionic.

Integració del Plugin de Cordova per a Notificacions Push

Instal·lació del Plugin

Executa les següents comandes per instal·lar el plugin de Cordova per a notificacions push i el plugin de Firebase:

ionic cordova plugin add phonegap-plugin-push
npm install @ionic-native/push

Configuració del Plugin

Afegeix el plugin a la teva aplicació Ionic. Obre el fitxer app.module.ts i afegeix les següents línies:

import { Push } from '@ionic-native/push/ngx';

@NgModule({
  ...
  providers: [
    Push,
    ...
  ],
  ...
})
export class AppModule { }

Inicialització del Plugin

Inicialitza el plugin en el fitxer app.component.ts:

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { Push, PushObject, PushOptions } from '@ionic-native/push/ngx';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor(private platform: Platform, private push: Push) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.initPushNotification();
    });
  }

  initPushNotification() {
    const options: PushOptions = {
      android: {
        senderID: 'YOUR_SENDER_ID'
      },
      ios: {
        alert: 'true',
        badge: true,
        sound: 'false'
      },
      windows: {}
    };

    const pushObject: PushObject = this.push.init(options);

    pushObject.on('notification').subscribe((notification: any) => {
      console.log('Received a notification', notification);
    });

    pushObject.on('registration').subscribe((registration: any) => {
      console.log('Device registered', registration);
    });

    pushObject.on('error').subscribe(error => console.error('Error with Push plugin', error));
  }
}

Enviament de Notificacions Push

Utilitzant la Consola de Firebase

  1. Navega a la secció de Cloud Messaging a la consola de Firebase.
  2. Crea un nou missatge.
  3. Selecciona els destinataris i configura el contingut del missatge.
  4. Envia la notificació.

Utilitzant una API

També pots enviar notificacions push utilitzant l'API de Firebase Cloud Messaging. Aquí tens un exemple utilitzant curl:

curl -X POST -H "Authorization: key=YOUR_SERVER_KEY" -H "Content-Type: application/json" -d '{
  "to": "DEVICE_REGISTRATION_ID",
  "notification": {
    "title": "Hello",
    "body": "World"
  }
}' https://fcm.googleapis.com/fcm/send

Exercici Pràctic

Objectiu

Configurar i enviar una notificació push a la teva aplicació Ionic.

Passos

  1. Configura Firebase i descarrega el fitxer de configuració.
  2. Instal·la i configura el plugin de Cordova per a notificacions push.
  3. Inicialitza el plugin i registra el dispositiu.
  4. Envia una notificació push des de la consola de Firebase.

Solució

Segueix els passos detallats en aquesta secció per completar l'exercici.

Errors Comuns i Consells

  • Error de configuració de Firebase: Assegura't que el fitxer google-services.json o GoogleService-Info.plist està en la ubicació correcta.
  • Problemes de registre del dispositiu: Verifica que el senderID és correcte i que el dispositiu té connexió a Internet.
  • Notificacions no rebudes: Revisa la configuració de permisos de notificació en el dispositiu.

Conclusió

En aquesta secció, hem après com configurar i integrar notificacions push en una aplicació Ionic utilitzant Firebase Cloud Messaging i el plugin de Cordova per a notificacions push. Les notificacions push són una eina essencial per mantenir els usuaris compromesos i informats. Amb aquesta base, pots explorar més funcionalitats avançades i personalitzacions per adaptar les notificacions a les necessitats específiques de la teva aplicació.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats