El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Aplicaciones Web Progresivas (PWA) con Ionic

Siguiente ►
►

Introducción a las PWA

Las Aplicaciones Web Progresivas (PWA) son aplicaciones web que utilizan capacidades modernas para ofrecer una experiencia similar a la de una aplicación nativa. Las PWA son rápidas, confiables y pueden funcionar sin conexión a internet. Ionic facilita la creación de PWA al proporcionar herramientas y componentes que se integran perfectamente con las tecnologías web modernas.

Características Clave de las PWA

  • Responsivas: Funcionan en cualquier dispositivo y tamaño de pantalla.
  • Conectividad Independiente: Pueden funcionar sin conexión o con conexiones de red deficientes.
  • Seguras: Se sirven a través de HTTPS para evitar ataques y garantizar la privacidad de los datos.
  • Instalables: Los usuarios pueden agregar las PWA a sus pantallas de inicio sin necesidad de pasar por una tienda de aplicaciones.
  • Actualizables: Siempre están actualizadas gracias a los Service Workers.

Configuración de una PWA en Ionic

Paso 1: Crear un Proyecto Ionic

Primero, asegúrate de tener Ionic CLI instalado. Si no lo tienes, instálalo usando npm:

npm install -g @ionic/cli

Crea un nuevo proyecto Ionic:

ionic start myPWAApp blank --type=angular
cd myPWAApp

Paso 2: Configurar el Manifesto de la Web App

El archivo manifest.json proporciona información sobre la aplicación (nombre, iconos, tema, etc.) y es esencial para que una aplicación sea reconocida como PWA.

Ubica el archivo manifest.json en la carpeta src y configúralo de la siguiente manera:

{
  "name": "My PWA App",
  "short_name": "PWAApp",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#4e8ef7",
  "icons": [
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Paso 3: Configurar el Service Worker

El Service Worker es un script que el navegador ejecuta en segundo plano, separado de la página web, y permite características como el almacenamiento en caché y la sincronización en segundo plano.

Ionic proporciona una configuración predeterminada para el Service Worker. Asegúrate de que el archivo ngsw-config.json esté presente en la raíz del proyecto y configúralo según tus necesidades.

Paso 4: Habilitar el Service Worker en Angular

En el archivo angular.json, asegúrate de que la configuración del Service Worker esté habilitada:

"projects": {
  "myPWAApp": {
    "architect": {
      "build": {
        "configurations": {
          "production": {
            "serviceWorker": true,
            "ngswConfigPath": "ngsw-config.json"
          }
        }
      }
    }
  }
}

Paso 5: Construir y Servir la Aplicación

Construye la aplicación para producción:

ionic build --prod

Para servir la aplicación localmente y probar las capacidades de PWA, puedes usar un servidor HTTP simple:

npx http-server ./www

Ejemplo Práctico: Añadiendo Funcionalidad Offline

Paso 1: Crear un Servicio de Datos

Crea un servicio que simule la obtención de datos de una API:

// src/app/services/data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) {}

  getData(): Observable<any> {
    return this.http.get(this.apiUrl).pipe(
      catchError(error => {
        console.error('Error fetching data', error);
        return of([]);
      })
    );
  }
}

Paso 2: Usar el Servicio en un Componente

Inyecta el servicio en un componente y usa los datos:

// src/app/home/home.page.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from '../services/data.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
  data: any[] = [];

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getData().subscribe(data => {
      this.data = data;
    });
  }
}

Paso 3: Mostrar los Datos en la Vista

Actualiza la vista para mostrar los datos obtenidos:

<!-- src/app/home/home.page.html -->
<ion-header>
  <ion-toolbar>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let item of data">
      <ion-label>
        <h2>{{ item.title }}</h2>
        <p>{{ item.body }}</p>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>

Ejercicio Práctico

Ejercicio: Añadir Funcionalidad de Notificación Push

  1. Configura Firebase Cloud Messaging (FCM):

    • Crea un proyecto en Firebase.
    • Configura FCM y obtén el archivo google-services.json.

  2. Instala el Plugin de FCM:

    ionic cordova plugin add cordova-plugin-fcm-with-dependecy-updated
npm install @ionic-native/fcm

  3. Configura el Plugin en tu Proyecto:

    • Añade el archivo google-services.json a la carpeta platforms/android/app.

  4. Implementa la Funcionalidad de Notificación:

    • Inyecta el servicio FCM en tu aplicación y configura la recepción de notificaciones.

Solución del Ejercicio

// src/app/app.component.ts
import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { FCM } from '@ionic-native/fcm/ngx';

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

  initializeApp() {
    this.platform.ready().then(() => {
      this.fcm.getToken().then(token => {
        console.log('FCM Token:', token);
      });

      this.fcm.onNotification().subscribe(data => {
        if (data.wasTapped) {
          console.log('Received in background', data);
        } else {
          console.log('Received in foreground', data);
        }
      });
    });
  }
}

Conclusión

En esta sección, hemos aprendido cómo configurar y desarrollar una Aplicación Web Progresiva (PWA) utilizando Ionic. Hemos cubierto desde la configuración inicial hasta la implementación de funcionalidades offline y notificaciones push. Las PWA ofrecen una experiencia de usuario mejorada y pueden ser una excelente opción para aplicaciones que necesitan ser accesibles en múltiples plataformas sin la necesidad de pasar por las tiendas de aplicaciones tradicionales.

En el siguiente tema, exploraremos cómo usar Capacitor para acceder a funcionalidades nativas del dispositivo, lo que nos permitirá ampliar aún más las capacidades de nuestras aplicaciones Ionic.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados