¿Cómo crear e instalar una aplicación web progresiva en la computadora?

Las aplicaciones web progresivas o las aplicaciones de Chrome son aplicaciones ligeras que se instalan y ejecutan en sistemas operativos y navegadores basados ​​en Chrome. Es compatible con la mayoría de los dispositivos informáticos y está diseñado principalmente para máquinas Chrome OS. Podemos crear manualmente las aplicaciones web progresivas y luego instalarlas en la computadora como una aplicación independiente dentro de los navegadores Chrome OS o Chromium.

Las aplicaciones web progresivas, o más conocidas como aplicaciones de Chrome, son aplicaciones web de tamaño pequeño que son en su mayoría JavaScripts integrados y son compatibles con todos los navegadores principales.

Aunque son livianos, se las arreglan para incluir la mayoría de los conjuntos de funciones requeridos. Solo toma un par de segundos para su instalación, y la razón de la popularidad de PWA es que tiene todo lo que uno puede imaginar.



Estas aplicaciones ofrecen una gran cantidad de beneficios que muchos editores han comenzado a integrar sus contrapartes de PWA en sus sitios web.

Entonces, si usted es un editor o desarrollador que quiere subirse a este carro, esta guía está aquí para ayudarlo.

Aquí hay instrucciones detalladas que lo ayudarán a crear, probar, enviar y posteriormente instalar Progressive Web Apps en su computadora.

Contenido

Crear aplicación PWA

Cree una carpeta en blanco en su escritorio, dándole a la aplicación PWA el mismo nombre que la carpeta.

Después de eso, debe codificar y crear un archivo de manifiesto dentro de esa carpeta. Para eso, use un editor de texto como Bloc de notas++ y crear un nuevo JSON o Notación de objetos de JavaScript expediente.

Ingrese la información deseada dentro del archivo de manifiesto para su aplicación PWA. Debe tener los siguientes valores:

  • nombre: el nombre que aparecerá en Chrome Web Store
  • version — La versión de los metadatos
  • icons: una matriz que especifica los íconos que usa su elemento
  • descripción — Una cadena de 132 caracteres (máximo) que describe su extensión

Por ejemplo, aquí hay un archivo JSON para una aplicación de marcadores que puede consultar:

  Información del archivo de muestra de manifiesto

Continuando, una vez que se completa la codificación, debe verificar que los códigos tengan el formato correcto. Para eso, puede usar una herramienta de validación JSON como JSONLint .

  Validación del código JSON en el validador JSONLint

Si la validación es exitosa, guarde este archivo como manifiesto.json .

A continuación, deberá diseñar un logotipo para su aplicación. Asegúrese de que el tamaño sea 128p por 128p . Una vez creado el logotipo, guárdelo como 128.png dentro de la misma carpeta donde está presente su archivo JSON.

  Imagen y archivo JSON del manifiesto de la aplicación de Chrome

Eso es todo. Ha creado con éxito la versión en miniatura deseada de una aplicación PWA. Ahora vamos a ponerlo a prueba.

Prueba de la aplicación PWA

Inicie el navegador Chrome en su PC y luego diríjase a la ubicación a continuación: cromo://extensiones/ para abrir la página de extensiones de Chrome. Habilitar el Modo desarrollador alternar desde la parte superior derecha de la página y hacer clic en el carga desempaquetada botón.

  Habilite el modo de desarrollador de extensiones en el navegador Chrome y agregue la carpeta de extensión local desempaquetada

Ahora navegue y seleccione la carpeta de la aplicación PWA en la ventana del explorador, y presione el botón Seleccione la carpeta botón.

  Seleccione la carpeta PWA de la aplicación Chrome para probar en el navegador Chrome

Una vez que se carga la aplicación, abra una nueva pestaña y haga clic en el ícono de Aplicaciones dentro del navegador Chrome. Alternativamente, también puede visitar cromo://aplicaciones/ en la barra de direcciones.

Seleccione su PWA creado y verifique si funciona correctamente o no. Si encuentra algún problema, realice los cambios necesarios en el manifiesto.json y vuelva a cargar el paquete en Chrome a través de la opción Cargar sin empaquetar, como se mencionó anteriormente.

Ahora realice la verificación nuevamente y, si ha solucionado todos los errores, publíquelo en Chrome Web Store.

Publica tu aplicación en Chrome Web Store

Antes de continuar con la publicación de la aplicación, primero deberá verificar sus audiencias objetivo. Se clasifican en cuatro segmentos:

  • Público: Tu aplicación estará disponible para todos.
  • No incluido en listado: Disponible solo para aquellos con quienes compartes el enlace directo de tu PWA. No aparecería en Chrome Web Store.
  • Privado: Disponible solo para los evaluadores y depuradores cuyos nombres haya incluido en el panel del desarrollador.
  • Editores de grupo : disponible para los editores que hayan pagado una tarifa de desarrollador única.

Una vez que haya tomado una decisión, comencemos con los pasos para publicar su aplicación. Primero, crear un archivo ZIP del paquete de su aplicación que tiene el 128.png y el manifiesto.json expediente.

  Comprimir la carpeta de aplicaciones de Chrome en ZIP

A continuación, tendrá que registrarse como el Desarrollador de Chrome Web Store . Dirigirse a este sitio y continúe con las instrucciones en pantalla para registrarse como desarrollador de Chrome Web Store.

  Regístrate como desarrollador de Chrome Web Store

Una vez creada su cuenta, vaya a la Panel para desarrolladores de Chrome e inicia sesión con tus credenciales. Haga clic en Agregar ítem nuevo > Elija el archivo y navegue hasta el archivo ZIP de su aplicación; selecciona y presiona el Subir botón.

Una vez que se cargue el archivo, deberá completar algunos detalles adicionales. Rellene los datos y haga clic en el Enviar para revisión botón situado en la parte superior derecha.

  Enviar la aplicación Chrome PWA para su revisión

Después de eso, habilite la casilla de verificación si desea que la aplicación PWA sea pública usando Publicar automáticamente después de que haya pasado la revisión, y haga clic en Enviar para revisión en el cuadro de diálogo de confirmación.

  Envíe la aplicación web de Chrome para que la revise el equipo de desarrollo

Su aplicación se someterá a revisión y se publicará en el Tienda virtual de Chrome y si todo va bien (si hubieras fijado el público objetivo en Público).

También recibirá el estado de la revisión y la publicará automáticamente si todo se ve bien.

Instalar la aplicación PWA en la computadora

Ahora que su aplicación está publicada, vamos a instalarla en su PC.

Dirígete a Chrome Web Store y abre la página de detalles de la aplicación. Haga clic en el Añadir a Chrome (Ejemplo a continuación).

  Agregar a Chrome Extension Chrome Web Launcher

Haga clic en el Agregar extensión en el cuadro de diálogo de confirmación que aparece.

  Agregue Chrome Web Store Launcher al navegador Chrome

Eso es todo; la aplicación se instaló correctamente en su PC y está disponible en cromo://aplicaciones/ .

En caso de que haya agregado su aplicación PWA al sitio web, el proceso será ligeramente diferente.

Dirígete a tu sitio web y luego haz clic en el icono Instalar situado en el extremo derecho del cuadro multifunción (como referencia, tomemos el sitio web de compresión de imágenes de Google Squoosh)

  Ícono de instalación en URL o barra de direcciones

Hacer clic Instalar en el cuadro de confirmación, y luego instalará el PWA.

  Instale la aplicación Squoosh PWA en el navegador Chrome

Conclusión: crear e instalar PWA

Completamos la guía sobre cómo podrías crear una aplicación de Chrome. Asimismo, también se han enumerado los pasos para publicarlos y luego instalarlos en su computadora.

Considere establecer su demografía en el Público si desea que su PWA llegue a un público más amplio. Pero si la aplicación se encuentra actualmente en la fase de prueba, entonces es mejor asignarle la etiqueta Privada/No listada, probarla exhaustivamente y solo hacerla Pública.

Además, no hay un marco de tiempo fijo en el que se verificará su aplicación. Por lo general, depende del tipo de aplicación que haya enviado. Y cualesquiera que sean los resultados, el equipo te lo notificará por correo electrónico.

Dicho esto, concluimos esta guía sobre cómo crear e instalar la aplicación PWA. Si tiene alguna pregunta sobre las instrucciones mencionadas anteriormente, háganoslo saber.

Por último, estos son los navegadores web recomendados para su computadora y teléfono móvil que debe probar.

ventanas Mac OS iOS Androide linux
ventanas cromadas cromo mac cromo ios cromo androide FirefoxLinux
Firefox ventanas SafariMac safari ios Android de borde cromo linux
Ventanas de borde firefox mac iOS de borde Samsung Internet borde linux

Si tienes alguna idea sobre ¿Cómo crear e instalar una aplicación web progresiva en la computadora? , entonces siéntase libre de entrar a continuación