Publicación de PWA en la App Store

PWA ahora permite crear paquetes de aplicaciones iOS que se pueden publicar en la App Store de Apple. Sin embargo, hay algunos pasos adicionales para preparar tu PWA para la App Store.

¿Cómo funciona?

PWA crea una aplicación Swift nativa con un WebView que le permite cargar su PWA dentro de una aplicación iOS nativa.

Prerrequisitos

Hay algunas casillas que deberás marcar antes de que tu PWA esté lista para publicarse en la App Store.

• Una PWA válida con un manifiesto web, publicada en la web y protegida mediante HTTPS
• Un dispositivo macOS con Xcode instalado
• Xcode debería ser compatible con iOS 17 o posterior
• Una cuenta de desarrollador de Apple (disponible por una suscripción anual de $99)

Construyendo su aplicación

Antes de poder comenzar el proceso de envío, deberá compilar el proyecto Swift que cargará su PWA:

1. Descomprime la carpeta que descargaste de tu sitio.
2. Abra una terminal en el srcdirectorio.
3. Ejecute este comando:pod install

Nota: Si se produce un error al ejecutar [Nombre del programa pod install], intente ejecutarlo brew install cocoapodsprimero. (Si necesita instalar Homebrew, haga clic aquí ).

Nota: Si ya tiene instalado Cocoapods , compruebe que las especificaciones estén actualizadas; de lo contrario, podría recibir un error de manifiesto de privacidad faltante . Para solucionarlo, puede ejecutar [insertar nombre de usuario] pod repo updatey, pod updatesi ya lo ha hecho, [insertar nombre de usuario] pod install.

4. Abra el .xcworkspacearchivo en su directorio src.

Si abre e intenta compilar el .xcodeprojarchivo, la compilación fallará. El .xcworkspacearchivo es el correcto que necesita compilar.

5. Haga clic en Product> Builden Xcode para construir su proyecto.
6. Con el proyecto abierto en Xcode, haz clic en ▶️ para probar tu PWA en un simulador de iPhone. También puedes elegir otros simuladores de iOS para probar tu app en esos dispositivos.

Ajuste de capacidades

Seleccione la Project Navigatorpestaña. Seleccione su aplicación. En la Signing & Capabilitiespestaña, marque y desactive todas las funciones que su aplicación no necesita. Use solo las que realmente estén involucradas en su aplicación. Esto es importante para pasar la verificación de publicación.

Publicación

La siguiente parte del proceso para colocar tu PWA en la App Store es la más complicada y puede llevar algún tiempo completarla.

Repasaremos cada paso con más detalle, pero el proceso general es el siguiente:

1. Inicie sesión en su cuenta de desarrollador de Apple
2. Crear un ID de paquete
3. Crear una solicitud de firma de certificado (CSR)
4. Crear un nuevo certificado
5. Crear un perfil de aprovisionamiento
6. Crear una reserva de aplicación
7. Sube tu paquete de aplicación
8. Envíe su aplicación para revisión

1. Inicia sesión en tu cuenta de desarrollador de Apple

Para enviar su aplicación a la App Store de iOS, inicie sesión en su cuenta de desarrollador de Apple.

Si no tiene una cuenta de desarrollador de Apple, inscríbase aquí. La inscripción cuesta $99 USD al año, aunque se puede eximir esta tarifa a las organizaciones sin fines de lucro.

2. Crear un ID de paquete

A continuación, deberá crear un ID de paquete en su cuenta de desarrollador de Apple que coincida con el ID de paquete asociado con su paquete de PWA.

1. Vaya a la página de su cuenta de desarrollador de Apple y seleccioneCertificates, Identifiers & Profiles
2. Seleccione Identifiersy haga clic en el +símbolo para agregar un nuevo identificador.

3. Seleccione App IDsy luego elija Appel tipo.
4. Añade cualquier Descriptioncosa que creas conveniente.
5. Añade tu ID de paquete. Importante: Debe coincidir con el ID de paquete que creaste con PWA.
6. En la sección de capacidades, habilite Associated Domainsy Push Notifications.
7. Haga clic en Continuey luego Registerpara terminar de agregar el identificador.

Nota: Si no tomó nota de su ID de paquete en PWA, puede encontrarlo en el project.pbxprojarchivo.

3. Crear una solicitud de firma de certificado (CSR)

A continuación, deberá utilizar la aplicación Keychain Access para crear una solicitud de firma de certificado:

1. Inicie la Keychain Accessaplicación.
2. Desde la barra de menú superior, seleccione:Keychain Access > Certificate Assistant > Request a Certificate from a Certificate Authority
3. Introduce tu correo electrónico y tu nombre. Puedes dejarlo CA Email Addressen blanco.
4. Elige la Saved to diskopción y selecciona Continue.
5. Se le pedirá que guarde un .certSigningRequestarchivo en el disco.

4. Crear un certificado

Ahora, utilizará el CSR que creamos en el último paso para crear un certificado:

1. Regrese a la Certificates, Identifiers, & Profilessección en la página de su cuenta de desarrollador de Apple del Paso 2.
2. Seleccione Certificatesy seleccione el +símbolo para agregar un nuevo certificado.
3. Seleccione Apple Distributiony haga clic Continue.
4. Se le pedirá que cargue una solicitud de firma de certificado. Seleccione el archivo que creó en el paso anterior y haga clic en Continue.
5. En la pantalla final, elija Downloadguardar su .cerarchivo en su disco.

5. Instalar el certificado

Ahora solo necesitas instalar el certificado que descargaste:

1. Abra la Keychain Accessaplicación.
2. Asegúrate de estar en la loginsección de la barra de navegación izquierda.
3. Arrastre el .cerarchivo descargado a la lista de certificados.

6. Crear un perfil de aprovisionamiento

A continuación, puede utilizar el certificado que creó para crear un perfil de aprovisionamiento:

1. Regrese a la Certificates, Identifiers, & Profilessección en la página de su cuenta de desarrollador de Apple de los pasos 2 y 4.
2. Seleccione Profilesy seleccione el +símbolo para agregar un nuevo perfil.
3. En la página siguiente, seleccione App Store Connectdebajo Distributiony haga clic en Continue.
4. Se le pedirá que seleccione un ID de aplicación, elija el ID de paquete que creó en el Paso 2 y haga clic en Continue.
5. A continuación, se le pedirá que elija un certificado. Seleccione el certificado que creó en el paso anterior y haga clic en Continue.
6. Se te solicitará un nombre de perfil de aprovisionamiento. Usa tu ID de paquete y haz clic en Generate.
7. Por último, seleccione Downloaddescargar su .mobileprovisionarchivo.

7. Crea tu reserva de aplicación

Una vez que tenga un perfil de aprovisionamiento, puede crear una reserva de aplicación en su cuenta de desarrollador.

1. Regrese a la página de su cuenta de desarrollador de Apple y seleccione App Store Connect.
2. Seleccionar My Apps.
3. Seleccione el +símbolo y luego haga clic en New App:
4. Se le solicitarán detalles sobre su aplicación:
   1. Elige iOSla plataforma
   2. Utilice cualquier nombre que desee.
   3. Seleccione un idioma.
   4. Seleccione el ID del paquete que creamos en el paso anterior.
   5. SKU puede ser cualquier cadena que desees.
   6. Seleccione Full Accessen Acceso de usuario.
5. Finalmente, haz clic Createpara completar la reserva de tu aplicación.

8. Sube tu paquete de aplicación

Después de crear la reserva de tu app, serás redirigido a la página de detalles. Allí podrás agregar metadatos sobre tu app, como capturas de pantalla, descripciones y más.

Una vez que hayas completado todos los datos que deseas incluir con tu aplicación, es momento de cargar el paquete de tu aplicación PWA.

Primero, necesitarás iniciar sesión en Xcode :

1. Haga clic Xcodeen la barra de menú superior.
2. Haga clic en Settings.
3. Navegar hasta el Accountspanel.
4. Si aún no ve su cuenta de desarrollador de Apple, haga clic en el +símbolo en la parte inferior izquierda.
5. Inicie sesión en su cuenta.

A continuación, deberás asignar tu proyecto a tu cuenta :

1. Seleccione la Project Navigatorpestaña.
2. Seleccione su aplicación.
3. Seleccionar Build Settings.

4. Desplácese hacia abajo hasta la Signingsección.
5. En Code Signing Identity, establecer Releaseen Apple Distribution.

6. En Code Signing Style, establecer Releaseen Manual.

6. En Development Team, configure Releasesu equipo de cuenta de desarrollador de Apple.

7. En la misma página del proyecto, seleccione Signing & Capabilitiesy luego Release.

8. En Provisioning Profile, seleccione Download Profile.
9. Elija el perfil que creó en los pasos anteriores.

Por último, solo necesitas crear un archivo y subirlo:

1. En la parte superior de Xcode, seleccione el nombre de su simulador de iPhone y seleccione Any iOS Device (arm64).

2. A continuación, seleccione Product > Archivedesde la barra de menú superior de Mac OS.
3. Cuando finalice el proceso de archivado, seleccione Distribute App > App Store Connect > Upload.
4. ¡Sigue las instrucciones para cargar tu solicitud!

9. Enviar para revisión

Lo último que debes hacer es enviar tu aplicación para revisión:

1. Vaya a su lista de aplicaciones en App Store Connect.
2. Desplácese hasta la Buildsección.
3. Haga clic en Select a build before you submit your app.
4. Seleccione el archivo que acaba de crear.
5. Una vez que haya configurado y revisado los metadatos de su aplicación, haga clic Submit for Reviewpara completar el envío.

Tu PWA aún debe ser aprobada, pero si lo es, aparecerá en la App Store generalmente dentro de 24 a 48 horas.

Notificaciones push

PWA para iOS es compatible Push Notificationscon Firebase Cloud Messaging .

Cosas que debes hacer para habilitarlo:

1. Vaya al archivo AppDelegateTODO y descomente una fila debajo de cada .
2. Siga la documentación de FCM para iOS.
3. Para ver el código del JSlateral, eche un vistazo a este componente de ejemplo .
4. Recuerde que las notificaciones push solo se pueden depurar en dispositivos reales.

Compras dentro de la aplicación y suscripción de Apple

Es posible habilitar StoreKit 2 IAP para su PWA, pero es necesario realizar más pasos manuales.

1. Utilice la rama principal de nuestro repositorio como ejemplo.
2. Siga nuestra publicación de blog para obtener más instrucciones.

Ejemplos de código adicionales

Cualquier API no estándar compatible con esta solución se puede encontrar en nuestro repositorio de ejemplos .