Un mécanisme de stockage hors-ligne des publications web à travers les applications web progressives (PWA).

- Intervenant : Aurélien Saguet, étudiant en stage chez Kelis

Ce qui existait déjà avant

Vocabulaire

  • Hors-ligne : la publication est stockée sur notre appareil

  • Cache : mémoire qui permet de stocker des données.

  • Synchronisation : différence entre la publication locale et le serveur.

  • Mise à jour : récupérer la dernière version de la publication.

Publier en tant que PWA

old-publi-en-pwa.png

L’interface

old-pwa.png
old-controls.png

Passage hors-ligne

old-popup.png

Les problèmes

  • conflits avec des éléments externes à la publication (exemple : Moodle)

  • mise à jour forcée

  • pas d’indication claire sur l’état de mise à jour

  • reconnexion à un serveur impossible

Qu'est-ce qu'une Progressive Web App (PWA) ?

pwa.png

  • utilise les technologies du web

  • accessible via un navigateur (Chrome, Firefox, etc.)

  • installable sur un appareil

  • peut fonctionner hors-ligne

  • peut accéder à la caméra, notifications push, géolocalisation, etc.

Nouvelles extensions PWA

Nouveautés attendues

  • Indiquer clairement l'état de mise à jour

  • Identifier possibles problèmes synchro (ressource distante en 404, pas de réseau,...)

  • Pouvoir se reconnecter quand hors-ligne

Améliorations attendues

  • Interface utilisateur, ergonomie

  • Meilleure gestion du cache

Paramétrage du mode hors-ligne avec PWA

Ancienne extension PWA

old-publi-en-pwa.png

Nouvelle extension PWA

paramétrage-web.png

Exemple avec une publication Opale

L'interface utilisateur

opale-offline.PNG
controles.png

Mode par défaut : ressource servie par le serveur

Fonctionne comme un site web « classique »

online (1).png

Mode hors-ligne

offline.png

Possibilité de mise à jour en mode hors-ligne

màj.png

Reconnexion au serveur pour détecter les mises à jours

auth.png
Liste des raccourcis clavier

Liste des fonctions de navigation et leurs raccourcis clavier correspondant :

  • Bloc Suivant : flèche droite, flèche bas, barre espace, page suivante, touche N
  • Bloc Précédent : flèche gauche, flèche haut, retour arrière, page précédente, touche P
  • Diapositive Suivante : touche T
  • Diapositive Précédente : touche S
  • Première diapositive : touche Début
  • Revenir à l'accueil : touche H
  • Menu : touche M
  • Agrandir la taille de la police : touche +
  • Réduire la taille de la police : touche -
  • Restaurer la taille de la police : touche *
  • Télécommande : touche R
  • Plein écran : touche F
  • Cacher outils : touche Z
  • Fermer zoom : touche Échap.