Publicar una PWA en Microsoft Store

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

Para publicar su PWA en Microsoft Store, no es necesario realizar ningún cambio en el código. En su lugar, crea una reserva de aplicación en el Centro de partners de Microsoft, empaqueta tu PWA con PWA Builder y, a continuación, envía tu paquete a Microsoft Store. En las secciones siguientes se explican estos pasos.

Vea también:

• Introducción: Publicar la primera aplicación en Microsoft Store

Creación de una reserva de aplicaciones

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

Para crear una reserva de aplicaciones:

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

   1. Si aún no tiene una, cree una cuenta personal de Microsoft en account.microsoft.com.
   2. Inscríbete en el programa Windows Developer, siguiendo los pasos que se indican en Abrir una cuenta de desarrollador en el Centro de partners.

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

   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. Las aplicaciones y juegos | Aparece la página de información general.
   3. Seleccionar Nuevo producto>Aplicación MSIX o PWA.
   4. Cuando se le solicite, escriba un nombre para la reserva y, a continuación, seleccione Reservar nombre de producto.

   

3. Para mostrar los detalles del editor para su uso en la sección Empaquetar las PWA, seleccione Administración de> productosIdentidad del producto.

   

4. Copie y guarde los siguientes valores.

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

Empaquetar la PWA para Store

Ahora que has recopilado la información de publicación sobre la aplicación, genera un paquete de aplicación de Windows para tu PWA mediante PWA Builder.

Para generar un paquete de aplicación:

1. Vaya a PWA Builder.

2. En Enviar su PWA a las tiendas 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 .

   Su PWA se evalúa para asegurarse de que está lista para la tienda.

3. Si la evaluación en la página de la boleta de calificaciones de PWABuilder indica que su PWA está lista para empaquetarse, continúe con el siguiente paso. 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 la PWA:

   

4. Una vez que su PWA esté lista para empaquetarse, en la esquina superior derecha de la página de la boleta de calificaciones de PWABuilder, haga clic en el botón Empaquetar para tiendas . Se abre un cuadro de diálogo que muestra el mensaje ¡Impresionante! ¡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 aplicaciones anterior:

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

   

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 PWA se ejecute en una amplia variedad de versiones de Windows.

Vea también:

• ¿Qué es un paquete clásico?
• Empaquetado de paquetes MSIX.

Enviar el paquete de la aplicación a Microsoft Store

Para enviar la aplicación a Microsoft Store:

1. Ve al Centro de partners de Microsoft.

2. Seleccione la aplicación.

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

   

4. Cuando se te pida, proporciona información sobre la aplicación, como los precios y la clasificación por edades.

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

Después de enviar la aplicación, esta se revisa, normalmente en un plazo de 24 a 48 horas. Una vez aprobada la aplicación, su PWA estará disponible en la Microsoft Store.

Medir el uso de las PWA instaladas desde Microsoft Store

Cuando se inicia inicialmente la PWA, si se instaló desde Microsoft Store, Microsoft Edge incluye el encabezado siguiente Referer 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 de su PWA que se instaló desde Microsoft Store. En función del tráfico, puede ajustar el contenido de la aplicación para mejorar la experiencia del usuario. Esta característica es accesible tanto para el código del cliente como para el servidor. Para acceder a esta información en el lado del cliente, puede consultar document.referrer en su JavaScript.

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

De forma predeterminada, una PWA instalada 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.

Cuando un usuario se mueve fuera del ámbito de una PWA, se introduce la siguiente interfaz de usuario:

Redirección de dominios con PWA instaladas desde el explorador

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

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

Redirección de dominios con PWA instaladas desde Microsoft Store

Las PWA que se instalan desde Microsoft Store tienen una dirección URL de inicio codificada de forma rígida que apunta al dominio principal. Cuando se inicia la PWA, la PWA navega inicialmente al dominio principal y, a continuación, un cliente puede (si es necesario) ser redirigido a su dominio específico de la configuración regional. Si se produce esa redirección, 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 asegurarse de que los usuarios saben que han abandonado el contexto de la PWA. Esta interfaz de usuario agregada tiene sentido cuando un usuario carga una página desde otro sitio web en el contexto de la PWA. Sin embargo, esa interfaz de usuario adicional puede ser inapropiada cuando un usuario se mueve entre dominios que forman parte del mismo sitio web.

Impedir que se muestren 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 que se muestre la dirección URL adicional y la interfaz de usuario del título al redirigir a un dominio específico de la configuración regional.

En el futuro, las extensiones de ámbito permitirán que una 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 de 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 WICG.

Realizar actualizaciones en la aplicación

Por lo general, al actualizar el código de PWA, no es necesario crear un nuevo paquete de aplicación y volver a enviarlo a Microsoft Store . Por ejemplo, supongamos que realiza cambios en el código HTML, CSS o JavaScript del front-end 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 volver a enviarlo a Microsoft Store. Por ejemplo, en el manifiesto, puede cambiar el icono o el nombre de la aplicación, o agregar miembros del manifiesto como file_handlers, , protocol_handlerso share_target. Cuando se cambia el manifiesto, es necesario crear y enviar un nuevo paquete de aplicación, porque la información del archivo de manifiesto de la aplicación web se copia en el paquete de la aplicación de Windows, para una mejor integración con Windows.

Vea también

• Microsoft Store
• PWA Builder

Documentos en el repositorio de PWA Builder:

• Próximos pasos para llevar su PWA a Microsoft Store : probar y enviar su paquete de aplicación de PWA.
• Publicar una nueva aplicación en Store
• Actualizar una aplicación existente en Store: actualizar una aplicación existente de Store a una PWA.
• Recomendaciones de imagen para paquetes PWA de Windows : recomendaciones de imágenes para PWA en Store.
• ¿Qué es un paquete clásico? - Explicación del empaquetado de la aplicación.