Capacitor

<< Openlayers

Capacitor es una plataforma para crear aplicaciones hibridas multiplataforma. Una aplicación híbrida implica que se crea una aplicación nativa pero el código principal (web) se ejecuta en un entorno de navegador integrado. Capacitor, mediante un sistema de plugins, proporciona una API de funciones JavaScript que ejecutan funciones nativas del dispositivo (cámara, portapapeles, cuadros de diálogo nativos, navegación GPS, sistema de archivos, SQLite, sensores, brujula, vibración, servicios de Google, Facebook, etc.).

Capacitor es una librería creada por el equipo de Ionic, y se instala por defecto en los proyectos de dicho framework. Sin embargo, se puede añadir capacitor a cualquier aplicación Angular con el comando ng add @capacitor/angular, e incluso a cualquier aplicación JavaScript/TypeScript (npm i @capacitor/core @capacitor/cli).

Configurar Capacitor

Lo primero que tenemos que hacer es configurar Capacitor creando el archivo capacitor.config.ts. Aquí configuramos el nombre de la aplicación y el appID. Es importante también, que si vamos a conectarnos a servicios web, o usar algún archivo, en un entorno que no se ejecuta bajo https (por ejemplo en local), activemos la opción de Android allowMixedContent.

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'es.fullstackpro.angular.capacitor',
  appName: 'My App',
  webDir: 'dist/mi-proyecto/browser', /* carpeta donde se encuentran los archivos compilados dentro de dist */
  android: {
    allowMixedContent: true
  }
};

export default config;

A partir de este punto el uso de Capacitor es igual que en un proyecto de Ionic, por lo que se puede continuar leyendo la guía de Capacitor del curso de Ionic de esta web.

Una diferencia fundamental en un entorno Angular es que en lugar de usar el servicio Platform de Ionic para saber si la aplicación se ejecuta en un entorno nativo (Android, iOS) o en web, podemos utilizar los métodos Capacitor.getPlatform o Capacitor.isNativePlatform.

Otra diferencia es que en lugar de hacer ionic build debemos realizar ng build antes de ejecutar cada npx cap sync.

<< Openlayers