Introducción a Capacitor

Capacitor es una herramienta que fue creada por el equipo de Ionic para proporcionar una forma moderna y flexible de integrar aplicaciones web con plataformas nativas. Permite escribir tu aplicación con cualquier marco web, como React, Angular o Vue, y luego ejecutarla en iOS, Android o la web. También admite aplicaciones web progresivas (PWA).

Nos proporciona un conjunto de APIs que permiten que una aplicación se acerque lo más posible a los estándares web y, al mismo tiempo, acceda a funciones nativas del dispositivo en plataformas que las admiten.

En resumen, es una herramienta que permite empaquetar aplicaciones web para su utilización en sistemas iOS y Android.

Primeros pasos

Para exportar un proyecto de Nuxt 3 a una app móvil, puedes seguir estos pasos:

Preparar el proyecto web

Asegúrate de tener tu proyecto Nuxt 3 listo y funcionando.
Instala los IDE necesarios para los respectivos desarrollos.
Añade los siguientes scripts a tu package.json para generar un proyecto Nuxt e instalar las dependencias necesarias para la generación de tus apps.

"scripts": {
  "generate": "nuxt generate",
  "capacitor-ios": "npm install @capacitor/core @capacitor/ios @capacitor/push-notifications @capacitor/splash-screen && npx cap add ios && npx cap open ios",
  "capacitor-android": "npm install @capacitor/core @capacitor/android && npx cap add android && npx cap open andorid && cd android && ./gradlew assembleDebug",
}

generate: Esto creará una carpeta “dist” con tu aplicación web lista para ser empaquetada.
capacitor-ios: Instalará las dependencias necesarias para crear un proyecto iOS y nos abrirá el mismo en Xcode. Incluye notificaciones push y pantalla de inicio.
capacitor-android: Instalará las dependencias necesarias para crear un proyecto Android y el archivo .apk de nuestra app, nos abrirá el mismo en Android Studio. Incluye notificaciones push y pantalla de inicio.

Creación del proyecto Capacitor

En el directorio principal de tu proyecto:

Ejecuta npm i.
Ejecuta npm run generate para generar tu proyecto.

Añadir Capacitor a tu proyecto

Instala Capacitor CLI como una dependencia de desarrollo:

npm install -D @capacitor/cli

Inicializa Capacitor en tu proyecto Nuxt:

npx cap init

Elige el nombre de la app.
Elige el nombre del package ID. Si desarrollaremos apps para iOS y Android, es importante chequear primero que el package ID o Bundle Identifier en iOS esté disponible en la plataforma de desarrollo de Apple, ya que si no luego deberemos cambiarlo y para ello tendremos que eliminar la app y repetir todo este paso.
Elige el directorio. Es importante que sea dist para que tenga la estructura de nuestro proyecto web.
Veremos que se creó el fichero capacitor.config.ts, en este haremos las configuraciones que involucren a plugins de Capacitor.

Creación de mobile-apps

AQUÍ SEGUIMOS LOS PASOS DEPENDIENDO LA APP:

iOS: Ejecutamos el script “capacitor-ios” con el comando npm run capacitor-ios.
Android: Ejecutamos el script “capacitor-android” con el comando npm run capacitor-android.

Configuración de plugin de notificaciones push

Luego de ejecutar los scripts, también se ejecutará el comando para instalar el plugin @capacitor/push-notifications, el cual será necesario para activar las notificaciones push en nuestras apps, tanto a nivel nativo como para notificaciones web.

Necesitamos agregar a nuestro fichero index.vue lo siguiente:

<script setup>
import { PushNotifications } from "@capacitor/push-notifications";

// Registering notifications and adding listeners when mounting the component
onMounted(async () => {
  await checkIsLogin();
  if (getToken.value) {
    view.value = "home";
    await registerPushNotifications();
    await addListeners();
    // Optional: Get delivered notifications
    await getDeliveredNotifications();
  }
});

const addListeners = async () => {
  await PushNotifications.addListener("registration", (token) => {
    // It will show us the token we need to send push notifications from outside the console.
    // console.info('Registration token: ', token.value)
  });

  await PushNotifications.addListener("registrationError", (err) => {
    // Error
    console.error("Registration error: ", err.error);
  });

  await PushNotifications.addListener(
    "pushNotificationReceived",
    (notification) => {
      // Push notification in console
      // console.log('Push notification received: ', notification)
    }
  );

  await PushNotifications.addListener(
    "pushNotificationActionPerformed",
    (notification) => {
      console.log(
        "Push notification action performed",
        notification.actionId,
        notification.inputValue
      );
    }
  );
};
const PERMISSION_PROMPT = "prompt";
const PERMISSION_GRANTED = "granted";
const PERMISSION_RECEIVE = "receive";
const USER_DENIED_PERMISSIONS_MESSAGE = "User denied permissions!";

const registerPushNotifications = async () => {
  let permStatus = await PushNotifications.checkPermissions();
  // alert(JSON.stringify(permStatus));

  if (permStatus[PERMISSION_RECEIVE] === PERMISSION_PROMPT) {
    permStatus = await PushNotifications.requestPermissions().then((result) => {
      // console.log('result ' + JSON.stringify(result));
      PushNotifications.register();
    });
  }

  if (permStatus[PERMISSION_RECEIVE] !== PERMISSION_GRANTED) {
    // alert(USER_DENIED_PERMISSIONS_MESSAGE);
  }

  if (permStatus[PERMISSION_RECEIVE] === PERMISSION_GRANTED) {
    try {
      await PushNotifications.register();
    } catch (e) {
      // alert(JSON.stringify(e));
    }
  }
};

const getDeliveredNotifications = async () => {
  const notificationList = await PushNotifications.getDeliveredNotifications();
  // console.log('delivered notifications', notificationList)
};
</script>

Actualización o modificación de las apps

Tener en cuenta que para cada modificación que realicemos en nuestro proyecto web, necesitaremos sincronizar los cambios a nuestras apps. Para ello:

Realizamos los cambios a nivel web.
Eliminamos el directorio dist.
Ejecutamos nuevamente npm run generate. Se generará nuevamente el directorio dist con los cambios mencionados.
Ejecutamos el comando para sincronizar los cambios con nuestras apps:,

npx cap sync

Lista de Comandos de Capacitor

A continuación se presenta una lista de los comandos de Capacitor mencionados en el documento junto con su función:

npm install -D @capacitor/cli
- Instala Capacitor CLI como una dependencia de desarrollo.
npx cap init
- Inicializa Capacitor en tu proyecto, configurando el nombre de la app, el package ID y el directorio de salida.
npm run capacitor-ios
- Instala las dependencias necesarias para iOS, añade la plataforma iOS al proyecto y abre el proyecto en Xcode.
npm run capacitor-android
- Instala las dependencias necesarias para Android, añade la plataforma Android al proyecto y construye el archivo .apk.
npm install @capacitor/core @capacitor/ios @capacitor/android
- Instala los paquetes necesarios para las plataformas iOS y Android.
npx cap add ios
- Añade la plataforma iOS al proyecto.
npx cap add android
- Añade la plataforma Android al proyecto.
npx cap sync
- Sincroniza tu proyecto con los cambios realizados en capacitor.config.ts.
npx cap copy
- Copia los archivos web al directorio nativo de Capacitor.
npx cap open ios
- Abre el proyecto iOS en Xcode.
./gradlew assembleDebug
- Construye el archivo .apk en modo debug para Android.
npm install @capacitor/splash-screen
- Instala el plugin de pantalla de carga de Capacitor.
npm install @capacitor/push-notifications
- Instala el plugin de notificaciones push de Capacitor.
sudo xattr -w com.apple.xcode.CreatedByBuildSystem true /Users/administrador/Library/Developer/Xcode/DerivedData/App-ctkjeqixrpzwvcbmqkzakuydcrpc/SourcePackages/checkouts/nanopb/build
- Comando para solucionar problemas de permisos en macOS cuando iOS no permite actualizar con npx cap sync.