Ir al contenido principal

ArtinTech Solution

Offline E-Paper Reading with a Service Worker and a Web App Manifest

La queja más habitual sobre leer el periódico en línea no es el diseño, sino el túnel. El lector abre la edición en casa y la termina en un tren que pierde la señal entre estaciones. En Inkfold 1.1 convertimos el e-paper en una app web instalable que mantiene legible sin conexión la edición abierta. Sin tienda de aplicaciones y sin un segundo código.

Un manifiesto generado desde los ajustes de la redacción

El manifiesto de la app web es una ruta, no un archivo estático. Toma el nombre del sitio, el lema y el color de marca de los ajustes del editor y declara tres iconos: un SVG escalable y PNG de 192 y 512 píxeles, el mayor marcado como maskable para que Android pueda recortarlo con cualquier forma. Si la redacción cambia el nombre del periódico, cambia también el de la app instalada, sin recompilar nada.

Un service worker con tres reglas sencillas

Mantuvimos el service worker lo bastante pequeño como para leerlo de una vez:

  • Imágenes de página y recursos: primero la caché. Sus nombres incluyen una parte aleatoria y nunca cambian, así que la copia guardada siempre es correcta.
  • HTML: primero la red. Con conexión, el lector siempre recibe la portada de hoy; la copia guardada solo se usa si falla la red.
  • La redacción y las cuentas de lector nunca se guardan. Las peticiones al panel y a las páginas de cuenta van directamente a la red.

Las cachés llevan versión, y la versión antigua se elimina cuando se activa un nuevo service worker, de modo que una actualización nunca deja archivos obsoletos.

El lector pide la edición completa

Guardar solo lo que el lector vio por casualidad dejaría huecos. Por eso, al abrir una edición, el script del lector envía al service worker un mensaje con la imagen media de cada página que el visitante puede ver, y el worker descarga en segundo plano las que faltan, hasta ochenta por edición. Las páginas premium bloqueadas nunca están en esa lista, porque sus imágenes ni siquiera se envían a quien no tiene acceso.

El e-paper de Inkfold en tres móviles: portada, lector e interfaz en bengalí
Instalado desde el navegador, el e-paper se abre a pantalla completa como una app nativa.

Guardar noticias para más tarde

La lectura sin conexión encaja con una lista de lectura. Los lectores con sesión iniciada pueden guardar una noticia o un recorte con un toque, y aparece en su página de cuenta con publicación, fecha y página. El endpoint es idempotente, así que un doble toque no guarda la misma noticia dos veces, y antes comprueba el acceso: quien no puede leer una noticia de una página bloqueada tampoco puede guardarla.

Página de cuenta del lector en Inkfold con noticias guardadas y preferencias
Noticias guardadas, preferencias de correo y pagos en un solo lugar.

Ideas clave

  • Generar el manifiesto desde los ajustes para que la app siga la marca.
  • Caché primero para archivos inmutables, red primero para HTML y nada para zonas privadas.
  • Dejar que la página indique al service worker qué necesita una copia completa sin conexión.
  • No guardar, ni siquiera enviar, contenido que el visitante no puede ver.

Antes en esta serie: un visor a doble página. Instala la demo de Inkfold desde el menú del navegador de tu móvil para probarla; el software está en Charming Theme.

¿Quieres tu periódico en la pantalla de inicio de tus lectores? Hablemos — ArtinTech Solution crea aplicaciones web progresivas para editores.

Share this article

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *