¿Qué es la Progresiva Aplicación Web / PWA? La progresiva aplicación web o PWA es una manera en la que nos proporcionan diversas funciones como notificaciones push, fondo de sincronización, botón de pantalla de inicio a nuestros usuarios para una mejor experiencia en la web o se puede decir de la Aplicación-como la experiencia con la web. La Progresiva Aplicación Web es rápido como un rayo, en comparación con el normal de la página web de nuestra aplicación. ¿por Qué tenemos que usar esto? En este momento de Web + Mobile época en la que los usuarios son en su mayoría dependientes de sus dispositivos, e incluso en el Móvil (el 80% de los usuarios de internet poseen un smartphone) mucho, no podemos hacer caso omiso de cualquier tipo de plataformas. Si estamos perdiendo el foco en cualquier plataforma, a continuación, seguramente vamos a perder contra de nuestro competidor. Independientemente de esto puede haber varias otras cosas que puede ser la razón con menos tráfico a nuestro sitio web. Como si nuestra web tiene un gran css, js archivos, demasiadas imágenes, varias familias de fuente (que no queremos ni necesitamos, pero tenemos que agregar) o los usuarios tienen una baja conexión a internet (no es su culpa, porque en el último Jefe y los Clientes siempre tienen la razón 😉 ) etc. Cualquiera que sea la razón, va en nuestra contra en términos de ingresos. Como un usuario de cualquier sitio web en términos de estos casos, seguramente estos serán mi punto de vista – Como Cliente punto de vista Clientes/ Usuarios son el alma de cualquier sitio web, si ellos no están, los que ya estamos muertos, o si no, entonces vamos a ser pronto. el 53% de los usuarios abandonan un sitio web si tarda más de 3 segundos en cargar! Y una vez cargado, esperan a ser rápido, no janky de desplazamiento o lento para responder interfaces. por Lo que podemos pensar, cómo mucho las expectativas de los clientes aumenta con nuestros competidores así. Es bastante simple, los clientes quieren una respuesta rápida a otras cosas que vendrán más adelante, como si le estamos dando Iphone7 de 1$, pero si la página no se abre entonces nadie va/pueden comprar. Si no estamos llenando todos los espacios en blanco en este momento de la tecnología de la época, entonces no podemos ganar 121bn yuanes ($18 millones) en un solo día. Como Desarrollador/ punto de vista del Propietario Como desarrollador, ¿cuál es el mayor problema básico que nos enfrentamos? Según yo, es la VELOCIDAD de nuestro sitio web, cómo de rápido se nos servir a las solicitudes de los clientes? Si la web de respuesta es rápido (estoy hablando de la mayoría frente a los datos como HTML/CSS o datos estáticos), obviamente, el cliente va a permanecer más tiempo más van a navegar a otro sitio en cuestión de minutos, es como fumar, no sabemos cuánto peligroso es ahora, pero en el último, estamos muertos lo hace de nuestro sitio web. Así que el desarrollador quiere una manera de acelerar las cosas y hay un montón de opciones para hacerlo, como la caché de nuestro contenido estático en la caché del navegador mediante la configuración de parámetros en el encabezado de la secuencia de comandos de servidor o uso de otra manera, pero realmente es la mejor manera? Lo que si, queremos actualizar algo justo después de la actualización anterior? ¿Realmente necesitamos para almacenar todo tipo de datos en la caché, como yo, normalmente, se utiliza MySql para la base de datos de modo que, obviamente, prefieren algún tipo de base de datos si el navegador proporciona ninguna? y puedo almacenar en ella fácilmente? Así que si os he dicho que podemos resolver estas cosas con PWA entonces, ¿cómo es ella :). Antes de eso vamos a ver, ¿qué es en realidad o lo que está detrás de ella? ¿Qué es? Como escribí PWA es una manera de obtener una aplicación móvil como la experiencia en la web, pero ¿qué hay detrás de este gran concepto. Es el Trabajador de Servicio (con el silencio de la felicidad 🙂 ). En realidad, como un desarrollador de cuál es el problema que me enfrentaba, sobre todo era que yo no era capaz de hackear solicitud si cualquier navegador envía al servidor o faltaba el único punto a su favor 😐 aquí viene el Trabajador de Servicio. El trabajador de servicio es un tipo de servidor proxy entre el servidor y el navegador del usuario. Todo va a pasar, si alguien está solicitando y podemos manipular las solicitudes y sus respuestas. Así, el trabajador de Servicio que nos proporciona una manera de hacer estas cosas con pocas líneas de código javascript. La sintaxis básica es como este /** * Webkul Software. * * @category Webkul, Uvdesk * @package Webkul_UVdesk_PWA * @author Nikhil * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com) * @license https://store.webkul.com/license.html */ // Few listener for PWA/service worker with registering service worker if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js').then(function(reg) { //our service worker code }) navigator.serviceWorker.addEventListener('controllerchange', function() { }); navigator.serviceWorker.addEventListener('statechange', function() { }); //our other service worker code } 1234567891011121314151617181920212223242526 /*** Webkul Software.** @category Webkul, Uvdesk* @package Webkul_UVdesk_PWA* @author Nikhil* @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)* @license https://store.webkul.com/license.html*/ // Few listener for PWA/service worker with registering service workerif ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js').then(function(reg) { //our service worker code }) navigator.serviceWorker.addEventListener('controllerchange', function() { }); navigator.serviceWorker.addEventListener('statechange', function() { }); //our other service worker code} ¿Qué podemos hacer con ella (trabajador de Servicio)? Con la ayuda de un Trabajador de Servicios, podemos hacer casi todo lo que no fuimos capaces de hacer, anteriormente. Con la ayuda de un trabajador de servicios, se pueden operar completamente en el navegador como el almacenamiento en caché de nuestro contenido, el almacenamiento de datos en IndexedDB y otra operación. Podemos proporcionar a la Web de manifiesto para el usuario de la aplicación como la experiencia. En esta imagen, podemos ver UVdesk icono en la página principal móvil Con la ayuda de ella, podemos examinar completamente UVdesk, como estamos viendo, en la aplicación. página principal Billete de vista de lista Además, podemos enviar notificaciones de Inserción a nuestros usuarios, les puede servir respuestas si el usuario de la red no funciona correctamente (el uso de memoria caché u otros que agregamos anteriormente). Sin Internet, pero no los datos de la caché sin embargo, Sin Internet, pero la porción de datos de Trabajador de Servicio Podemos proporcionar una notificación al usuario para actualizar si hemos actualizado algunos de los contenidos que se almacenan en el navegador del usuario. ¿qué es Lo siguiente? Sí, por supuesto, siempre hay algo de lo siguiente, nada se ha completado. En la siguiente, vamos a ver, en realidad, ¿cómo podemos construir esto para UVdesk y ¿cuáles son los problemas que enfrentamos? Gracias por su tiempo. Si usted tiene cualquier consulta, no dude en contactar con nosotros aquí support@uvdesk.com ¿hay algún ejemplo de esto? Por supuesto, sin ejemplo, ¿cómo vamos a aprender? Estos son algunos enlaces que he usado en el aprendizaje y en el momento de la escritura. Blog de Google Booking.com MDN y los grandes Jake Archibald Tag(s) fast pwa service worker speed uvdesk Category(s) progressive web app pwa service worker uvdesk