Conversión del sitio web en una PWA de alta calidad

¡Convertir su sitio web en una PWA de alta calidad totalmente funcional (aplicación web progresiva) se puede hacer en una pausa de almuerzo! En este artículo, le guiará bien por el proceso completo.

Paso 1: Crear una tarjeta de informe en PWA Builder

En primer lugar, querrá comprobar si su sitio web tiene las características y metadatos que necesitan las PWA excelentes.

1. Vaya a PWA Builder.
2. Escriba la dirección URL del sitio web que desea convertir en una PWA y haga clic en Iniciar.
3. El generador de PWA mostrará una tarjeta de informe de PWA que indica las características que tiene su sitio web y no tiene.

Paso 2: Revisar la tarjeta de informe de PWA

La tarjeta de informe de PWA contiene la puntuación de su sitio web, de una puntuación máxima de 100. Las puntuaciones se basan en tres categorías de características.

Manifiesto

PWA evalúa el manifiesto de aplicación web del sitio web si hay uno disponible e identifica campos o valores tht son obligatorios, recomendados y opcionales. Para mejorar la puntuación, agregue valores que faltan, edite y vuelva a publicar el archivo de manifiesto o mediante el editor de manifiestos en línea.

Advertencia

Los cambios realizados en el editor de manifiestos en línea no se publicarán en su sitio web. El generador de PWA solo usará los cambios que realice al crear su PWA.

Los valores obligatorios deben estar presentes; de lo contrario, el generador de PWA no podrá crear su PWA. Los campos obligatorios incluyen simplemente tener un manifiesto, iconos, nombre, nombre corto y un start_url.

Los campos recomendados no son obligatorios, pero son importantes para la experiencia del usuario de PWA. Se recomienda encarecidamente proporcionar todos los valores recomendados, aunque PWA Builder puede crear una PWA sin ellos. Entre los valores recomendados se incluyen el modo de presentación, el color de fondo de la pantalla de presentación, la descripción, la orientación, las capturas de pantalla, las capturas de pantalla de alta resolución, el icono enmascarable, las categorías y los accesos directos.

Los campos opcionales no son obligatorios, pero se pueden especificar si procede. Los campos opcionales incluyen una clasificación por edades y aplicaciones relacionadas.

Trabajo de servicio

Un trabajo de servicio se ejecuta en segundo plano para habilitar características de aplicaciones web enriquecidas en las que, de lo contrario, habría errores 404. PWA Builder requiere que un trabajador de servicio cree su PWA, pero si no tiene uno, puede usar uno de varios trabajos de servicio precompilados proporcionados por PWA Builder. Para usar un trabajo de servicio precompilado:

1. Elija la pestaña Opciones de trabajo de servicio en el menú.
2. Seleccione el trabajo de servicio adecuado en la lista seleccionada. Tenga en cuenta que hay muchas opciones precompiladas; Asegúrese de elegir el trabajador del servicio más adecuado para su caso de uso específico.
3. Una vez que haya seleccionado el trabajador de servicio que desea usar, se le devolverá a la tarjeta de informe de PWA.

Seguridad

Todas las PWA compiladas con PWA Builder requieren tres protocolos de seguridad.

1. El sitio debe usar HTTPS.

2. El sitio debe tener un certificado HTTPS correspondiente.

   Si el sitio web no tiene un certificado HTTPS presente, puede publicar en Azure para obtener compatibilidad integrada con HTTPS. Como alternativa, hay herramientas gratuitas de terceros como Letsencrypt que le permitirán obtener un certificado HTTPS de forma gratuita.

3. El sitio no debe contener contenido mixto. El contenido mixto es cuando una página atendida a través de HTTPS contiene recursos cargados a través de HTTP. El contenido mixto pone en peligro la seguridad de HTTPS y su PWA.

Paso 3: Recopilar información importante del Centro de partners

Necesitarás varios fragmentos de información de tu cuenta del Centro de partners para crear tu PWA. Si no tiene una MSA, haga clic aquí para obtener instrucciones sobre cómo empezar. También tendrás que inscribirte en el Programa para desarrolladores de Windows.

Si aún no lo ha hecho, deberá crear la aplicación PWA reservando un nuevo nombre. Una vez que haya reservado su nombre, haga clic en el botón Iniciar el envío para crear un nuevo envío de aplicación.

A continuación, haga clic en la pestaña Administración de productos y seleccione Identidad del producto. La página de identidad del producto mostrará el identificador del paquete del producto, el identificador del publicador y el nombre para mostrar del publicador. Guarde estos valores y vuelva a PWA Builder.

Paso 4: Generar la PWA en PWA Builder

Ahora tiene todo lo que necesita para crear su PWA en PWA Builder. Vuelva al sitio de PWA Builder y haga clic en Generar.

El generador de PWA le pedirá la información que obtuvo del Centro de partners en el paso 3. Rellene los valores y haga clic en Generar.

Una vez que PWA Builder haya creado su PWA, el navegador lo descargará automáticamente. Su PWA se empaqueta en un archivo .zip que contiene seis archivos.

El archivo msix es el paquete de aplicación principal de PWA. Este archivo instalará la PWA en el equipo del usuario.

El archivo appx es un paquete de aplicación clásico. Se usa para instalar la PWA en versiones anteriores de Windows. Consulte Paquetes de aplicaciones clásicas para obtener más información.

Paso 5: Enviar los paquetes de la aplicación a Microsoft Store

Estos paquetes se pueden enviar a Microsoft Store de la misma manera que cualquier otra aplicación empaquetada que un archivo MSIX puede ser. Para obtener más instrucciones sobre cómo enviar los paquetes PWA a la tienda, consulta Envíos de aplicaciones.