Passer au contenu principal

ArtinTech Solution

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

La plainte la plus fréquente à propos de la lecture du journal en ligne ne concerne pas le design, mais le tunnel. Le lecteur ouvre l’édition chez lui et la termine dans un train qui perd le réseau entre deux gares. Dans Inkfold 1.1, nous avons fait de l’e-paper une application web installable qui garde l’édition ouverte lisible hors ligne. Sans magasin d’applications et sans second code.

Un manifeste généré à partir des réglages de la rédaction

Le manifeste de l’application web est une route, pas un fichier statique. Il reprend le nom du site, son slogan et sa couleur de marque dans les réglages de l’éditeur, et déclare trois icônes : un SVG vectoriel et des PNG de 192 et 512 pixels, le plus grand marqué maskable pour qu’Android puisse le découper dans n’importe quelle forme. Si la rédaction change le nom du journal, le nom de l’application installée change aussi, sans rien recompiler.

Un service worker avec trois règles simples

Nous avons gardé le service worker assez court pour être lu d’une traite :

  • Images de pages et ressources : cache d’abord. Leurs noms contiennent une partie aléatoire et ne changent jamais, la copie en cache est donc toujours juste.
  • HTML : réseau d’abord. En ligne, le lecteur reçoit toujours la une du jour ; la copie en cache ne sert qu’en cas de panne réseau.
  • La rédaction et les comptes lecteurs ne sont jamais mis en cache. Les requêtes vers l’administration et les pages de compte vont directement au réseau.

Les caches portent un numéro de version, et l’ancienne version est supprimée quand un nouveau service worker s’active : une mise à jour ne laisse jamais de fichiers périmés.

La liseuse demande toute l’édition

Ne garder que ce que le lecteur a vu par hasard laisserait des trous. À l’ouverture d’une édition, le script de la liseuse envoie donc au service worker un message avec l’image moyenne de chaque page que le visiteur a le droit de voir, et le worker télécharge en arrière-plan celles qui manquent, jusqu’à quatre-vingts par édition. Les pages premium verrouillées ne figurent jamais dans cette liste, car leurs images ne sont même pas envoyées à un visiteur sans accès.

L’e-paper Inkfold sur trois téléphones : accueil, liseuse et interface en bengali
Installé depuis le navigateur, l’e-paper s’ouvre en plein écran comme une application native.

Mettre des articles de côté

La lecture hors ligne va de pair avec une liste de lecture. Les lecteurs connectés peuvent désormais enregistrer un article ou une découpe d’un geste ; il apparaît sur leur page de compte avec la publication, la date et la page. Le point d’accès est idempotent, un double appui n’enregistre donc pas deux fois le même article, et il vérifie d’abord l’accès : un article d’une page verrouillée ne peut être enregistré que par quelqu’un qui a le droit de le lire.

Page de compte d’un lecteur Inkfold avec articles enregistrés et préférences
Articles enregistrés, préférences d’e-mail et paiements au même endroit.

À retenir

  • Générer le manifeste depuis les réglages pour que l’application suive la marque.
  • Cache d’abord pour les fichiers immuables, réseau d’abord pour le HTML, rien pour les zones privées.
  • Laisser la page dire au service worker ce qu’exige une copie hors ligne complète.
  • Ne jamais mettre en cache, ni même envoyer, un contenu que le visiteur n’a pas le droit de voir.

Plus tôt dans cette série : une liseuse en double page. Installez la démo Inkfold depuis le menu du navigateur de votre téléphone ; le logiciel est sur Charming Theme.

Vous voulez votre journal sur l’écran d’accueil de vos lecteurs ? Parlons-en — ArtinTech Solution développe des applications web progressives pour les éditeurs.

Share this article

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *