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

En muy poco tiempo, las PWA han dejado una huella 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 presentado las mismas quejas 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 se ejecutan como un sitio web, los usuarios se benefician de tres maneras:

  • Ahorran el tiempo que lleva encontrar una aplicación en la tienda, instalarla y luego proporcionar información para iniciarla.
  • Como las aplicaciones web progresivas funcionan como un sitio web, ocupan un espacio de almacenamiento mínimo en el dispositivo y
  • Como funcionan principalmente como un sitio web, el concepto de almacenamiento en caché es válido, 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 PWA

Además de brindar 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 comercial. Por eso la gente está ansiosa por 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 viene con costo de desarrolloy, por último, el funcionamiento sin conexión a gran velocidad se puede medir observando el cambio en las cifras de crecimiento de estas marcas famosas:

Beneficios que aporta Progressive Web App 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 planeas convertir sitio web a aplicación web progresiva y aproveche al máximo el beneficio de bajo costo de inversión que el concepto tiene para ofrecer, usted está en el interior El lugar correcto.

Estos son los pasos exactos para Cómo 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 Convierte la página web en una aplicación.

Cómo Transformar 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 muestra y
  4. un editor de texto

Una vez que los tenga listos, 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

Si lo hace, le ayudará a desarrollar una Migrar a PWA directorio con el código completo de cada paso. Para este laboratorio de código específico, cargue el trabaja archivo y luego haga los cambios allí.

Una vez que se haya verificado 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, puede cargar la URL para convertir el sitio a PWA.

Paso 2: Obtenga una vista previa del sitio web en su dispositivo móvil

Este es el segundo paso para convertir el sitio 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á configurar un puerto con la ayuda del puerto que escribió antes para el mismo puerto en el dispositivo.

Presionar Iniciar sesión por ese ahorro.

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 cabeza modernas

Para convertir el sitio web en una aplicación móvil, lo primero que deberá 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á la metainformación del sitio para que aparezca 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. Después de escribir la línea de código, una vez que vuelva a cargar el sitio, encontrará el sitio adecuado para su dispositivo.
  • Manifiesto – En la segunda línea de su código, hizo referencia al archivo, un movimiento que es necesario para controlar cómo se agrega el sitio a las pantallas de inicio.

Después de eso, 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 como 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 la 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 web en una aplicación, para eso, abra su archivo site.js y péguelo:

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. Asegúrate de que funciona correctamente recargando la página y verificando: 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 admita notificaciones automáticas e incluso funcione sin conexión.

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

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

Prueba 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, todo lo que tiene que hacer es agregar un componente que tenga la ‘versión’ del service worker. Cuando esto cambia, el movimiento de instalación ocurre nuevamente, almacenando en caché las funciones que habrían cambiado.

Felicidades, ahora ya sabes cómo convertir Web solicitud a PWA y si siguió los pasos uno al lado del otro, ¡incluso 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 tendrá que llenar los vacíos y pasar del Punto A en el proceso al Punto C. Si está leyendo esto como un emprendedor entusiasta que busca para convertir wordpress para una aplicación web progresiva o si desea crear una aplicación desde un sitio web, yo diría que no haga esto sin contar con el apoyo de un proveedor de servicios de desarrollo de aplicaciones progresivas con experiencia.

Aunque estos pasos son explicativos en el interior 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 de los elementos entre líneas, déle el trabajo a un empresa de desarrollo de PWA que tiene experiencia en el dominio. Los expertos responderán todas las preguntas relacionadas. 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

DIRECTOR Y CO-FUNDADOR