Cómo convertir un sitio web en una aplicación web progresiva

En muy poco tiempo, las PWA han dejado una marca muy destacada en la industria de las aplicaciones móviles.

El concepto que Google quiere que conozcases un respiro para la industria que continuamente ha estado haciendo las mismas afirmaciones una y otra vez:

En cuanto a los sitios web: Velocidad de carga lenta y tasa de resonancia baja

Con respecto a las aplicaciones móviles: Las aplicaciones que ocupan mucho espacio en la memoria dependen de la conexión de red y de los largos pasos que los usuarios tendrán que pasar desde que encuentran una aplicación hasta que comienzan a usarla.

Dado que las aplicaciones web progresivas (PWA) se descargan directamente de un sitio web y también se ejecutan como un sitio web, los usuarios se benefician de tres maneras:

  • Le ahorran el tiempo que lleva encontrar una aplicación en la tienda, instalarla y luego proporcionar información para iniciarla.
  • Debido a que las aplicaciones web progresivas funcionan como un sitio web, ocupan un espacio de almacenamiento mínimo en el dispositivo y
  • Dado que en su mayoría funcionan como un sitio web, el concepto de almacenamiento en caché es cierto, lo que permite que la aplicación se ejecute incluso cuando no hay conexión a la red.
Encuentra aquí

razones para Convierta su sitio web existente a PWA

Beneficios de las PWA

Además de ofrecer estos beneficios obvios a los usuarios, las aplicaciones web progresivas, la combinación ideal de sitios web y aplicaciones móviles, también se han convertido en la fórmula rentable para el éxito empresarial. Por eso la gente está ansiosa. convertir página web en aplicación.

Encuentra aquí

Él beneficios que aportan las PWA a las empresas porque es fácilmente detectable, porque ocupa menos espacio en la memoria, porque tiene poca costo de desarrolloy, por último, el funcionamiento sin conexión a gran velocidad se puede medir al ver el cambio en las cifras de crecimiento de estas marcas famosas:

Beneficios-que-la-aplicación-web-progresiva-aporta-a-las-empresas

Las historias de éxito como estas y muchas de ellas en la industria son suficientes para que todas las empresas móviles modernas busquen la mejor empresa de desarrollo de aplicaciones web progresivas y busquen formas de convertir sitios web a PWA.

Si también estás planeando convertir sitio web a aplicación web progresiva y aprovecha todo el bajo costo de inversión que ofrece el concepto, estás en el El lugar correcto.

Lectura adicional – Costo de desarrollo de aplicaciones web progresivas 2022

Estos son los pasos exactos para convertir un sitio web PHP a PWA o Cómo convertir un sitio web en una aplicaciónsegún lo compartido por Google con nuestro equipo de Desarrolladores de aplicaciones web progresivas (una de las ventajas de ser una de las agencias de desarrolladores oficiales de Google).

Pero primero lo primero. Conoce los elementos necesarios para crear la PWA desde un sitio web o si quieres convertir la página web en aplicación.

Como Convierte un sitio web en PWA

Para convertir sitio web a PWAaquí están las tres cosas necesarias –

  1. Un dispositivo Android conectado con Chrome 52 o superior,
  2. Una comprensión básica de Git y Chrome DevTools,
  3. El código de ejemplo y
  4. Un editor de texto

Una vez que haya terminado, prepárese para convertir web a PWA o convertir sitio web en aplicación web.

Paso 1: Cargue la URL

El primer paso para migrar su sitio a PWA es clonar el repositorio de GitHub desde la línea de comando:

$ git clone https://github.com/googlecodelabs/migrate-to-progressive-web-apps.git

Esto ayudará a desarrollar una Migrar a PWA directorio con el código completo de cada paso. Para este codelab específico, cargue el obras archivo y luego haga los cambios allí.

Después de verificar su código, use la ‘Aplicación de servidor HTTP simple’ para servir el archivo de trabajo en el puerto 8887.

Después de eso, podrá cargar la URL para convertir el sitio web a PWA.

Paso 2: vea el sitio en su teléfono móvil

Este es el segundo paso para convertir el sitio web en una aplicación web progresiva. En caso de que tenga un dispositivo Android conectado a su escritorio, escriba esto en su URL: chrome://inspect. Esto le permitirá definir un puerto de reenvío con la ayuda del puerto que escribió antes para el mismo puerto en el dispositivo.

Presionar Ingresar para eso salvar.

Ahora podrá acceder a la versión básica de su sitio web en: http://localhost:8887/ en el teléfono Android conectado.

Paso 3: agregue etiquetas de encabezado modernas

Para convertir un sitio web en una aplicación móvil, lo primero que tendrá que hacer es hacer que el sitio web sea compatible con dispositivos móviles y, en segundo lugar, deberá agregar un Manifiesto de aplicación web. El manifiesto describirá los metadatos del sitio para que aparezcan en la pantalla de inicio del usuario.

Si no tiene un sistema de plantillas, agregue estas líneas:

<head>

<meta name= “viewport” content=”width=device-width, user-scalable=no” />

<link rel= “manifest” href= “manifest.json” />

</head>

  • ventana de visualización – La primera línea consta de una metaetiqueta que especifica la ventana gráfica. Este elemento te ayudará con la capacidad de respuesta. Una vez que escriba la línea de código después de recargar el sitio web, encontrará el sitio web adecuado para su dispositivo con precisión.
  • Manifiesto – En la segunda línea de su código, hizo referencia al archivo, un movimiento necesario para controlar cómo se agrega el sitio a las pantallas de inicio.

Una vez hecho esto, abra un editor de texto. Es hora de escribir JSON. En la sección short_name, especifique lo que se mostrará en la pantalla de inicio e intente mantenerlo dentro 15 caracteres.

Luego guarde su archivo con el nombre manifest.json y vuelva a cargar la página en el dispositivo Android y vaya al menú superior derecho y opte por ‘Añadir a la pantalla principal‘. ¡Ahora podrá ver su icono en su pantalla de inicio!

Paso 4: agregar un trabajador de servicio

Service Worker es el script de fondo que el navegador puede ejecutar mientras el usuario no está en la página. Es el elemento que soporta offline y está activo cuando se envía la notificación.

Crear un trabajador de servicio

Copie este código en un nuevo archivo y guárdelo como sw.js.

/** An empty service worker! */

self.addEventListener (‘fetch’, function(event)

{

/** An empty fetch handler! */

});

Y es eso.

Registrar el trabajador de servicio

Deberá registrar el código en el código de su sitio web para convertir la página en una aplicación, para eso, abra su archivo site.js y pegue esto:

navigator.serviceWorker && navigator.serviceWorker.register(‘./sw.js’).then(function(registration) {  console.log(‘Excellent, registered with scope: ‘, registration.scope);});

Ahora el código se ejecutará en cada carga de página. Compruebe si funciona correctamente recargando la página y comprobando: chrome://serviceworker-internals/

Ahora, su sitio web podrá solicitar a los usuarios que lo instalen en sus pantallas de inicio y, en segundo lugar, podrá hacer que su sitio web sea compatible con las notificaciones automáticas e incluso trabajar sin conexión.

Paso 5: Haz que el sitio funcione sin conexión

El primer paso sería abrir el script sw.js y obtener el objeto de caché. Una vez que haya hecho eso, actualice el código y aplique todo el sitio al caché.

Experimente cómo está funcionando ahora. Desinstala la aplicación actual y cárgala en Chrome. Luego actualice la página y seleccione ‘Añadir a la pantalla principal‘ en el menú de la esquina derecha.

Para cumplir con la regla de que cuando cambia el Service Worker, la página debe recargarse y reinstalarse, simplemente agregue un componente que tenga la ‘versión’ del service worker. Cuando eso cambia, el movimiento de instalación ocurre nuevamente, almacenando en caché los recursos que habrían cambiado.

Felicidades, ahora ya sabes cómo convertir Web aplicación a PWA y si ha seguido los pasos uno al lado del otro, ¡ahora ha migrado su sitio a una aplicación web progresiva!

Ver más información

*Descargo de responsabilidad*: estos pasos le darán a usted, el desarrollador, una idea exacta de cómo deberá completar los espacios en blanco y pasar del Punto A en el proceso al Punto C. Si está leyendo esto como un emprendedor entusiasta que Si desea convertir WordPress en una aplicación web progresiva o desea crear una aplicación desde un sitio web, diría que no lo haga sin contar con el apoyo de un proveedor experimentado de servicios de desarrollo de aplicaciones progresivas.

Si bien estos pasos son explicativos en el cómo convertir un sitio web en una aplicación o convertir aplicación web a aplicación web progresiva, hay una serie de elementos que surgen como parte del proceso cuando te sientas con el verdadero proceso de desarrollo. Entonces, en lugar de probar tus manos con los pasos hacer aplicación de sitio web y encuentra un resultado diferente porque no estaba seguro entre líneas, déle el trabajo a un empresa de desarrollo de PWA que se especializa en el dominio. Los expertos responderán todas las preguntas relacionadas con cómo convertir un sitio web en una aplicación, cómo convertir un sitio web en una aplicación.


1650517804 170 ¿Como convertir un sitio web en una aplicacion movil

EL AUTOR

Sudeep Srivastava

Co-Fundador y Director