Construyendo una PWA en Google, parte 1

Esta es la primera de una serie de publicaciones de blogEl término blog se usa para describir un diario virtual en Internet. El autor de un blogger puede publicar posts sobre cualquier tema. Los posts suelen estar presente de forma cronológica. El estilo de redacción de un blog suele ser informal y se escribe en primera persona. No obstante, además son posibles otros estilos, por ejemplo en el caso de los periódicos online, en los que la atención se centra más sobre las lecciones que aprendió el equipo de Google Bulletin al crear una PWA externa. En estas publicaciones compartiremos algunos de los desafíos que enfrentamos, los enfoques que tomamos para superarlos y consejos generales para evitar trampas. Esta no es de ninguna manera una descripción general completa de las PWA. El objetivo¿Qué es un objetivo?En marketing, un objetivo es el resultado que se pretende alcanzar en un periodo de tiempo, a través el uso de los recursos disponibles. Por tanto, se debe formular de una forma clara y hace falta que sea accesible y medible. más es compartir los aprendizajes de la experiencia de nuestro equipo.

Para esta primera publicación, primero cubriremos un poco de información general y luego profundizaremos en todo lo que aprendimos sobre los trabajadores de servicios.

Antecedentes

Bulletin estuvo en desarrollo activo desde mediados de 2017 hasta mediados de 2019.

Por qué elegimos construir una PWA

Antes de profundizar en el proceso de desarrollo, examinemos por qué crear una PWA fue una opción atractiva para este proyecto:

• Capacidad para iterar rápidamente. Especialmente valioso ya que Bulletin se probaría en múltiples mercados.
• Base de código único. Nuestros usuarios se dividieron aproximadamente en partes iguales entre Android e iOS. Una PWA significaba que podíamos crear una única aplicación web que funcionara en ambas plataformas. Esto aumentó la velocidad y el impacto del equipo.
• Actualizado rápidamente e independientemente del comportamiento del usuario. Las PWA pueden actualizarse automáticamente, lo que reduce la cantidad de clientes desactualizados en la naturaleza. Pudimos impulsar cambios importantes en el backend con un tiempo de migración muy corto para los clientes.
• Se integra fácilmente con aplicaciones propias y de terceros. Tales integraciones eran un requisito para la aplicación. Con una PWA, a menudo significaba simplemente abrir una URLEl URL (Localizador Uniforme de Recursos), es una dirección definida que apunta a la posición de un archivo en un servidor y lo recupera. Las URL se introducen en un navegador web para ingresar a documentos en la web o se incrustan como hipervínculos dentro de un documento. Se puede usar un Permalink para que una URL esté disponible de forma permanente. Componentes de una URL • prefijo de protocolo más.
• Se eliminó la fricción de instalar una aplicación.

Nuestro marco

Para Bulletin, usamos Polímero, pero cualquier marco moderno y bien soportado funcionará.

Lo que aprendimos sobre los trabajadores de servicios

No puedes tener una PWA sin una trabajador del servicio. Los trabajadores de servicios le brindan mucho poder, como estrategias avanzadas de almacenamiento en cachéUn caché es un tipo de memoria auxiliar de la que se puede recuperar a alta velocidad con una capacidad de almacenamiento relativamente pequeña. Se encuentra entre la unidad central de procesamiento (CPU) y la memoria principal. Ayuda a evitar el acceso al disco duro o los recálculos complejos almacenando temporalmente ciertos datos y haciéndolos disponibles rápidamente cuando sea necesario. El caché almacena una copia de la petición actual y más, capacidades fuera de línea, sincronización en segundo plano, etc. Si bien los trabajadores de servicios agregan algo de complejidad, descubrimos que sus beneficios superan la complejidad adicional.

Generalo si puedes

Evite escribir un script de trabajador de servicio a mano. Escribir trabajadores de servicios a mano requiere administrar manualmente los recursos almacenados en caché y reescribir la lógica que es común a la mayoría de las bibliotecas de trabajadores de servicios, como Neceser de costura.

Dicho esto, debido a nuestra pila de tecnología interna, no pudimos usar una biblioteca para generar y administrar nuestro trabajador de servicio. Nuestros aprendizajes a continuación reflejarán en ocasiones eso. Vaya a Problemas para los trabajadores de servicios no generados para leer más.

No todas las bibliotecas son compatibles con los trabajadores de servicios

Algunas bibliotecas de JS hacen suposiciones que no funcionan como se esperaba cuando las ejecuta un trabajador del servicio. Por ejemplo, asumiendo window o document están disponibles, o usando una APIConcepto de API¿Qué es una API?Una API, siglas de Application Programming Interface o Interfaz de Programación de Apps, es un recopilatorio de código que se puede emplear para que varias apps se comuniquen entre ellas. Es algo que realiza una tarea equivalente a la interfaz de usuario al momento de promover la interacción entre persona y programa, solo que aplicado única y exclusivamente dentro del entorno del software.Aún cuando suene más no disponible para los trabajadores del servicio (XMLHttpRequest, almacenamiento local, etc.). Asegúrese de que las bibliotecas críticas que necesite para su aplicación sean compatibles con los trabajadores de servicios. Para esta PWA en particular, queríamos usar
gapi.js para la autenticación, pero no pudieron hacerlo porque no admitía a los trabajadores del servicio. Los autores de bibliotecas también deben reducir o eliminar suposiciones innecesarias sobre el contexto de JavaScriptJavaScript es un lenguaje de programación que funciona en el lado del cliente y con el que las webs pueden ser más funcionales. Incorporación en código HTML El código JavaScript puede ser incrustado en las páginas HTML, para que adquieran funcionalidad. Existen varias opciones. Puede estar entre las etiquetas <SCRIPT> y </SCRIPT>, puede estar contenido en un archivo externo, puede ser un parámetro de las etiquetas HTML, y puede estar más siempre que sea posible para respaldar los casos de uso de trabajadores de servicios, como evitar API incompatibles con trabajadores de servicios y evitar el estado global.

Evite acceder a IndexedDB durante la inicialización

No leas IndexedDB al inicializar su script de trabajador de servicio, o puede entrar en esta situación no deseada:

1. El usuario tiene una aplicación web con IndexedDB (IDB) versión N
2. Se incluye una nueva aplicación web con la versión N + 1 del BID
3. El usuario visita PWA, que activa la descarga de un nuevo trabajador de servicio
4. El nuevo trabajador de servicios lee del BID antes de registrarse install manejador de eventos, activando un ciclo de actualización del BID para pasar de N a N + 1
5. Dado que el usuario tiene un cliente antiguo con la versión N, el proceso de actualización del trabajador del servicio se bloquea ya que las conexiones activas todavía están abiertas a la versión anterior de la base de datos
6. El trabajador de servicio se cuelga y nunca instala

En nuestro caso, el caché se invalida en la instalación del trabajador del servicio, por lo que si el trabajador del servicio nunca se instaló, los usuarios nunca recibieron la aplicación actualizada.

Hazlo resistente

Aunque los scriptsConcepto de Scripts¿Qué son los Scripts?Los Scripts son fragmentos de código que se usan para dar forma a herramientas tanto en Internet como en el sector de la informática en general. Son una parte crucial del software, puesto que se trata exactamente del código que conforma a una aplicación en su totalidad o a una de sus funciones, como además el que puedes hallar explorando cómo está hecha una web.Desde más de los trabajadores de servicios se ejecutan en segundo plano, también se pueden finalizar en cualquier momento, incluso cuando se encuentran en medio de operaciones de E / S (red, IDB, etc.). Cualquier proceso de larga duración debería poder reanudarse en cualquier momento.

En el caso de un proceso de sincronización que cargó archivos grandes al servidorLos servidores son ordenadores centrales y potentes dentro del campo de la tecnología de la información que procesan y proporcionan software y archivos en una red. Desde el punto de vista de un cliente, varios ordenadores en una red pueden ponerse en contacto con el servidor central para conseguir la información solicitada. En la arquitectura cliente-servidor, el servidor puede ser un software que proporciona un servicio y se ejecuta en más y se guardó en el BID, nuestra solución para las cargas parciales interrumpidas fue aprovechar el sistema reanudable de nuestra biblioteca de carga interna, guardando la URL de carga reanudable en el BID antes de cargar y usar esa URL para reanudar una carga si no se completó la primera vez. Además, antes de cualquier operación de E / S de larga duración, el estado se guardaba en IDB para indicar en qué parte del proceso estábamos para cada registro.

No dependas del estado global

Debido a que los trabajadores del servicio existen en un contexto diferente, muchos símbolos que podría esperar que existan no están presentes. Gran parte de nuestro código se ejecutó tanto en window contexto, así como un contexto de trabajador de servicio (como registro, banderas, sincronización, etc.). El código debe estar a la defensiva con respecto a los servicios que utiliza, como el almacenamiento local o las cookies. Puedes usar
globalThis

para referirse al objeto global de una manera que funcione en todos los contextos. También use los datos almacenados en variables globales con moderación, ya que no hay garantía de cuándo se terminará el script y se desalojará el estado.

Desarrollo local

Un componente importante de los trabajadores de servicios es el almacenamiento en caché de los recursos localmente. Sin embargo, durante el desarrollo este es el opuesto de lo que desea, especialmente cuando las actualizaciones se realizan con pereza. Aún desea instalar el trabajador del servidor para poder depurar problemas con él o trabajar con otras API, como sincronización en segundo plano o notificaciones. En Chrome, puede lograr esto a través de Chrome DevTools habilitando el Bypass para red casilla de verificaciónSolicitud panel> Trabajadores de servicios panel) además de habilitar el Desactivar el caché casilla de verificación en el Red panel para deshabilitar también la memoria caché. Para cubrir más navegadoresConcepto de Navegadores¿Qué son los Navegadores?Los Navegadores son herramientas informáticas que utilizamos para, normalmente, navegar por Internet y visitar cualquier página web, al mismo tiempo de para hacer otras tareas como ver documentos, observar vídeos o reproducir contenido multimedia de cualquier tipo. Son un tipo de software sencillamente usual y bastante utilizado hoy en día.Insistimos en que es algo que se utiliza con mucha frecuencia, puesto que moverse por Internet más, optamos por una solución diferente al incluir una marca para deshabilitar el almacenamiento en caché en nuestro trabajador de servicio, que está habilitado de forma predeterminada en las compilaciones de desarrolladores. Esto asegura que los desarrolladores siempre obtengan sus cambios más recientes sin problemas de almacenamiento en caché. Es importante incluir el Cache-Control: no-cache encabezado también para evitar que el navegadorUn navegador (además: browser) es una herramienta informática que te permite ver documentos y datos y navegar por la red. Los navegadores pueden mostrar distintos tipos de recursos de información; principalmente documentos HTML, a pesar de todo, además son posibles otros tipos de archivos y contenido multimedia, como PDF, JPEG, MPEG, GIF o el lenguaje de meta marcado. A través el uso de complementos especiales y la configuración respectivo, los más almacene en caché cualquier activo.

Faro

Faro proporciona una serie de herramientas de depuración útiles para las PWA. Escanea un sitio y genera informes que cubren PWA, rendimiento, accesibilidadAccesibilidad significa que algo puede ser usado, obtenido, acercado, ingresado o alcanzado. De ello pueden derivarse dos significados aplicables a Internet. En primer lugar, la provisión de acceso a Internet a las personas con discapacidad o a las personas mayores lo más libre viable de barreras y, en segundo lugar, la accesibilidad y la legibilidad de una web para un crawler. Accesibilidad en términos de ausencia de barreras Actualmente, Internet más, SEO  ¿Qué es SEO o search engine optimization?   Conjunto de prácticas destinadas a mejorar el posicionamiento de una web en el ranking de resultados de los motores de búsqueda. Al contrario que la estrategia SEM, que contempla la inclusión de enlaces contratados para obtener este objetivo, el procedimiento SEO se ocupa exclusivamente de los resultados naturales (no pagados) localizados por el algoritmo propio de cada buscador. Para esto contempla ajustar más y otras mejores prácticas.
Nosotros recomendamos ejecutando Lighthouse en integración continua para avisarle si no cumple con alguno de los criterios para ser PWA. En realidad, esto nos sucedió una vez, donde el trabajador del servicio no estaba instalando y no nos dimos cuenta antes de un impulso de producción. Tener Lighthouse como parte de nuestro CI lo habría evitado.

Adopte la entrega continua

Debido a que los trabajadores del servicio pueden actualizar automáticamente, los usuarios carecen de la capacidad de limitar las actualizaciones. Esto reduce significativamente la cantidad de clientes desactualizados en la naturaleza. Cuando el usuario abría nuestra aplicación, el trabajador del servicio servía al cliente anterior mientras descargaba el nuevo cliente con pereza. Una vez que el nuevo cliente se descargó, le pedirá al usuario que actualice la página para acceder a nuevas funciones. Incluso si el usuario ignoraba esta solicitud, la próxima vez que actualizara la página, recibiría la nueva versión del cliente. Como resultado, es bastante difícil para un usuario rechazar las actualizaciones de la misma manera que puede hacerlo para las aplicaciones nativas.

Pudimos impulsar cambios importantes en el backend con un tiempo de migración muy corto para los clientes. Por lo general, damos un mes para que los usuarios se actualicen a clientes más nuevos antes de realizar cambios importantes. Dado que la aplicación funcionaría mientras estaba obsoleta, era posible que los clientes más antiguos existieran en la naturaleza si el usuario no había abierto la aplicación durante mucho tiempo. En iOS, los trabajadores del servicio son
desalojado después de un par de semanas
por lo que este caso no sucede. Para Android, este problema podría mitigarse si no se publica mientras está obsoleto o si el contenidoEl contenido puede ser muy difícil de definir con precisión. Es una definición que se refiere a las declaraciones contenidas en un documento o publicación de cualquier tipo y puede incluir las tecnologías de la información y la comunicación. Esto cubre todos los tipos de medios como imágenes y texto. A parte de esto, en el campo de la optimización de motores de búsqueda, los términos duplicar contenido, contenido único, más caduca manualmente después de algunas semanas. En la práctica, nunca encontramos problemas con clientes obsoletos. Cuán estricto quiere ser un equipo dado aquí depende de su caso de uso específico, pero las PWA brindan una flexibilidad significativamente mayor que las aplicaciones nativas.

Obtener valores de cookies en un trabajador de servicios

A veces es necesario acceder a los valores de las cookies en el contexto de un trabajador de servicios. En nuestro caso, necesitábamos acceder a los valores de las cookies para generar un token para autenticar las solicitudes de API de origen. En un trabajador de servicios, las API síncronas como document.cookies no están disponibles. Siempre puede enviar un mensaje a los clientes activos (con ventana) desde el trabajador del servicio para solicitar los valores de las cookies, aunque es posible que el trabajador del servicio se ejecute en segundo plano sin ningún cliente con ventana disponible, como durante una sincronización en segundo plano. Para solucionar esto, creamos un punto final en nuestro servidor frontendEl frontend de una web describe la parte que el visitante puede ver. Incluye todo el contenido que se muestra y que es visible para el público o los usuarios que han iniciado sesión. Diseño del frontend El frontend es muchas veces llamado GUI (Graphical User Interface) porque es la interfaz que los visitantes pueden ver y utilizar. El frontend se usa principalmente para mostrar varios tipos de contenido y más que simplemente devolvía el valor de la cookieUna cookie es un registro que es almacenado por un servidor web en el disco duro del usuario. El archivo recibido es una combinación de caracteres formada por números y letras, que asigna una cierta identidad al usuario (cliente). No podrán exceder un tamaño máximo de 4 KB y contendrán, por ejemplo, información sobre la extensión de la visita o sobre lo que el usuario haya pulsado. Cuando el cliente más al cliente. El trabajador del servicio realizó una solicitud de red a este punto final y leyó la respuesta para obtener los valores de las cookies.

Con el lanzamiento de la
API de la tienda de cookies, esta solución alternativa ya no debería ser necesaria para los navegadores que la admiten, ya que proporciona acceso asincrónico a las cookies del navegador y puede ser utilizada directamente por el trabajador del servicio.

Escollos para los trabajadores de servicios no generados

Asegúrese de que la secuencia de comandos del trabajador del servicio cambie si cambia algún archivo en caché estático

Un patrón de PWA común es que un trabajador del servicio instale todos los archivos de aplicaciones estáticas durante su
install fase, que permite a los clientes acceder directamente a la caché de la API de almacenamiento en caché para todas las visitas posteriores. Los trabajadores del servicio solo se instalan cuando el navegador detecta que la secuencia de comandos del trabajador del servicio ha cambiado de alguna manera, por lo que teníamos que asegurarnos de que el archivo de la secuencia de comandos del trabajador del servicio cambiara de alguna manera cuando cambiaba un archivo en caché. Hicimos esto manualmente al incrustar un hash del conjunto de archivos de recursos estáticos dentro de nuestro script de trabajador de servicio, por lo que cada versión produjo un archivo JavaScript de trabajador de servicio distinto. Bibliotecas de trabajadores de servicios como
Neceser de costura Automatice este proceso por usted.

Examen de la unidad

Las API de trabajador de servicio funcionan agregando detectores de eventos al objeto global. Por ejemplo:

self.addEventListener('fetch', (evt) => evt.respondWith(fetch('/foo')));

Esto puede ser difícil de probar porque necesita simular el disparador del eventoConcepto de Evento¿Qué es un Evento?Un Evento es una actividad de carácter social que suele tener cierta proyección a nivel público y, de esta manera, suscita el interés de un determinado sector relacionado con la temática o con la razón por el que se celebra. Es un tipo de acto que suele tener mucha repercusión a nivel empresarial.Podemos hallar distintos tipos de eventos, desde los deportivos hasta los empresariales, pasando más, el objeto del evento, esperar el respondWith() devolución de llamada, y luego esperar la promesa, antes de finalmente afirmar el resultado. Una forma más sencilla de estructurar esto es delegar toda la implementación a otro archivo, que se prueba más fácilmente.

import fetchHandler from './fetch_handler.js';
self.addEventListener('fetch', (evt) => evt.respondWith(fetchHandler(evt)));

Debido a las dificultades de la prueba unitaria de un script de trabajador de servicio, mantuvimos el script de trabajador de servicio central lo más básico posible, dividiendo la mayor parte de la implementación en otros módulos. Dado que esos archivos eran solo módulos JS estándar, podrían probarse unitariamente más fácilmente con bibliotecas de prueba estándar.

Estén atentos para las partes 2 y 3

En las partes 2 y 3 de esta serie hablaremos sobre la gestión de medios y problemas específicos de iOS. Si desea preguntarnos más sobre la creación de una PWA en Google, visite nuestros perfiles de autor para averiguar cómo contactarnos: