Publicación de una aplicación web progresiva en Microsoft Store

  • Artículo

La publicación de la aplicación web progresiva (PWA) en Microsoft Store aporta las siguientes ventajas:

Ventaja Descripción
Detectabilidad Los usuarios buscan naturalmente aplicaciones en la tienda de aplicaciones. Cuando publicas en Microsoft Store, millones de usuarios de Windows pueden descubrir tu PWA junto con otras aplicaciones de Windows. La Tienda muestra aplicaciones a través de categorías, colecciones seleccionadas y mucho más. Los portales de detección de aplicaciones proporcionan una experiencia de exploración y compra sencilla para los usuarios potenciales de la aplicación. Incluso puedes mejorar tu descripción de la Tienda con capturas de pantalla, una imagen de héroe y tráileres de vídeo: consulta Capturas de pantalla de la aplicación, imágenes y tráileres.
Confiabilidad Los clientes de Windows saben que pueden confiar en sus compras y descargas de Microsoft Store, porque cumplen las rigurosas directivas de Microsoft Store.
Instalación sencilla Microsoft Store proporciona una experiencia de instalación coherente y fácil de usar en todas las aplicaciones Windows 10 o posteriores.
Análisis de aplicaciones El panel del Centro de partners de Microsoft proporciona análisis detallados sobre el estado, el uso y mucho más de la aplicación.

Para publicar tu PWA en Microsoft Store, no se requieren cambios en el código. En su lugar, creas una reserva de aplicación en el Centro de partners de Microsoft, empaquetas tu PWA con PWA Builder y, a continuación, envías el paquete a Microsoft Store. En las secciones siguientes se explican estos pasos.

Creación de una reserva de aplicación

Para enviar la aplicación a Microsoft Store, usa el Centro de partners de Microsoft.

Para crear una reserva de aplicación:

  1. Para poder crear una reserva de aplicación, debe tener una cuenta microsoft personal (no una cuenta profesional de Microsoft o una cuenta de Microsoft educativa) que esté inscrita en el Programa para desarrolladores de Windows.

    1. Si aún no tiene una, cree una cuenta microsoft personal en account.microsoft.com.
    2. Inscríbase en el programa para desarrolladores de Windows siguiendo los pasos descritos en Abrir una cuenta de desarrollador en el Centro de partners.

  2. Una vez que la cuenta esté inscrita en el programa para desarrolladores de aplicaciones, siga estos pasos para crear una reserva de aplicación:

    1. Vaya al panel del Centro de partners. Inicie sesión con la cuenta que inscribió.
    2. En Áreas de trabajo, seleccione Aplicaciones y juegos. Aplicaciones y juegos | Aparece la página Información general.
    3. Seleccione Nuevo producto>MSIX o aplicación PWA.
    4. Cuando se le solicite, escriba un nombre para la reserva y, a continuación, seleccione Reservar nombre del producto.

    Creación de una reserva de aplicaciones en el Centro de partners de Microsoft

  3. Para mostrar los detalles del publicador para usarlos en la sección Empaquetar su PWA, seleccione Product managementProduct Identity (Identidad del producto de administración > de productos).

    Copia de la información del publicador desde el Centro de partners de Microsoft

  4. Copie y guarde los valores siguientes.

    • Identificador del paquete
    • Id. del publicador
    • Nombre para mostrar del publicador

Empaquetar tu PWA para la Tienda

Ahora que ha recopilado la información de publicación sobre la aplicación, genere un paquete de aplicación de Windows para su PWA mediante el Generador de PWA.

Para generar un paquete de aplicación:

  1. Vaya al Generador de PWA.

  2. En Enviar su PWA a almacenes de aplicaciones, escriba la dirección URL de su PWA en el cuadro de texto y, a continuación, haga clic en el botón Inicio .

    El PWA se evalúa para asegurarse de que está listo para almacenarse.

  3. Si la evaluación de la página de la tarjeta de informe PWABuilder indica que el PWA está listo para empaquetarse, continúe con el paso siguiente. Si la evaluación indica que la PWA no está lista para empaquetarse, examine la sección Elementos de acción para ver cómo mejorar su PWA:

    Página de la tarjeta de informe

  4. Una vez que la PWA esté lista para empaquetarse, en la esquina superior derecha de la página de la tarjeta de informe PWABuilder, haga clic en el botón Empaquetar para tiendas . Se abre un cuadro de diálogo que muestra el mensaje Awesome! ¡Tu PWA está lista para la tienda!.

  5. En Windows, haga clic en el botón Generar paquete . Se abre el cuadro de diálogo Opciones de paquete de Windows .

  6. Pegue los siguientes valores, que guardó en la sección Crear una reserva de aplicación anterior:

    • Identificador del paquete
    • Nombre para mostrar del publicador
    • Id. del publicador

    Pegar información del publicador en la página Opciones de paquete de Windows

  7. Haga clic en el botón Descargar paquete para descargar el paquete de Windows.

La descarga es un .zip archivo que contiene un .msixbundle archivo y un .classic.appxbundle archivo. Los dos paquetes de aplicaciones permiten que la PWA se ejecute en una amplia variedad de versiones de Windows.

Vea también:

Enviar el paquete de la aplicación a Microsoft Store

Para enviar la aplicación a Microsoft Store:

  1. Vaya al Centro de partners de Microsoft.

  2. Seleccione la aplicación.

  3. Haga clic en el botón Iniciar el envío .

    Inicio de un nuevo envío de aplicaciones en el Centro de partners de Microsoft

  4. Cuando se le solicite, proporcione información sobre la aplicación, como los precios y la clasificación por edad.

  5. En el símbolo del sistema Paquetes , seleccione los .msixbundle.classic.appxbundle archivos y que generó en la sección Empaquetar su PWA .

Después de completar el envío, la aplicación se revisa, normalmente en un plazo de 24 a 48 horas. Después de recibir la aprobación, el PWA está disponible en Microsoft Store.

Medir el uso de la PWA instalada desde Microsoft Store

Cuando se inicia la PWA inicialmente, si la PWA se instaló desde Microsoft Store, Microsoft Edge incluye el siguiente Referer encabezado con la solicitud de la primera navegación de la aplicación web.

Referer: app-info://platform/microsoft-store

Use esta característica para medir el tráfico distinto del PWA que se instaló desde Microsoft Store. En función del tráfico, puedes ajustar el contenido de la aplicación para mejorar la experiencia del usuario. Esta característica es accesible para el código de cliente y servidor. Para obtener acceso a esta información en el lado cliente, puede consultar document.referrer en JavaScript.

Redirección a dominios específicos de la configuración regional sin mostrar una interfaz de usuario adicional

De forma predeterminada, un PWA instalado desde Microsoft Store muestra una interfaz de usuario adicional cuando la aplicación se redirige a un dominio específico de la configuración regional. La interfaz de usuario agregada muestra la dirección URL y el título de la página. Esta interfaz de usuario se agrega porque la navegación al dominio específico de la configuración regional se considera fuera del ámbito.

En la ilustración siguiente se muestra la interfaz de usuario que se introduce cuando un usuario se mueve fuera del ámbito de un PWA.

La interfaz de usuario adicional con dirección URL y título de página cuando la aplicación se redirige a otro dominio

Redireccionamiento de dominio con PWA instalados desde el explorador

Un manifiesto de aplicación web está asociado a un único dominio. Sin embargo, algunas PPA usan dominios específicos de la configuración regional para sus clientes en regiones específicas del mundo. Al visitar el PWA en un explorador web, los clientes pasan sin problemas del dominio principal (por ejemplo, contoso.com) a un dominio específico de la configuración regional (por ejemplo, contoso.co.ke), porque la redirección se produce durante la carga inicial de ese sitio web.

Por lo tanto, los clientes que instalan el PWA desde Microsoft Edge instalarían el PWA desde el dominio específico de la configuración regional. Los inicios posteriores de la PWA van directamente a ese dominio específico de la configuración regional, en lugar de ir primero al dominio principal.

Redireccionamiento de dominio con PPA instalados desde Microsoft Store

Los PWA instalados desde Microsoft Store tienen una dirección URL de inicio codificada de forma rígida que apunta al dominio principal. Cuando se inicia el PWA, el PWA navega inicialmente al dominio principal y, a continuación, un cliente puede redirigirse (según sea necesario) a su dominio específico de la configuración regional. Si se produce ese redireccionamiento, la navegación se considera "fuera del ámbito". Como resultado, la aplicación muestra la dirección URL y el título de la página en la parte superior de la página.

Mostrar la dirección URL y el título de la página es una característica de seguridad para garantizar que los usuarios sepan que han dejado el contexto de la PWA. Esta interfaz de usuario agregada tiene sentido cuando un usuario carga una página de otro sitio web en el contexto de la PWA. Sin embargo, esa interfaz de usuario agregada puede ser inapropiada cuando un usuario se mueve entre dominios que forman parte del mismo sitio web.

Impedir que se muestre la dirección URL y el título específicos de la configuración regional

Actualmente es imposible, para las aplicaciones instaladas desde Microsoft Store, evitar mostrar la dirección URL y la interfaz de usuario de título adicionales al redirigir a un dominio específico de la configuración regional.

En el futuro, las extensiones de ámbito permitirán que un PWA capture la navegación a rutas de acceso, subdominios o incluso sitios distintos de su propio ámbito. La característica de extensiones de ámbito está en desarrollo activo y aún no está lista para usarse. Para obtener más información sobre el estado de desarrollo de esta característica en Chromium, consulte la característica Extensiones de ámbito de aplicación web en Estado de la plataforma Chrome.

Una vez que la característica se pueda usar en Microsoft Edge, la documentaremos aquí. Mientras tanto, para obtener más información sobre cómo funcionarán las extensiones de ámbito, consulte el documento explicativo en el repositorio de WICG.

Realizar actualizaciones en la aplicación

Por lo general, al actualizar el código PWA, no es necesario crear un nuevo paquete de aplicación y enviarlo de nuevo a Microsoft Store. Por ejemplo, supongamos que realiza cambios en el código HTML de front-end, CSS o JavaScript de la aplicación, o en el trabajo del servicio. La próxima vez que el usuario inicie la aplicación, el explorador que ejecuta la aplicación descargará los cambios desde el servidor web.

Sin embargo, si realiza cambios en el archivo de manifiesto de la aplicación web, debe crear un nuevo paquete de aplicación y enviarlo de nuevo a Microsoft Store. Por ejemplo, en el manifiesto, puede cambiar el icono de aplicación o el nombre de la aplicación, o agregar miembros de manifiesto como file_handlers, protocol_handlerso share_target. La creación y el envío de un nuevo paquete de aplicación es necesario cuando se cambia el manifiesto, ya que la información del archivo de manifiesto de la aplicación web se copia en el paquete de aplicación de Windows para una mejor integración con Windows.

Vea también