02
SEP

UpUp: Affichez vos pages web en mode déconnecté - Offline first

Publié le 02/09/15 à 07h47 par DJo

UpUp est une bibliothèque Javascript vous permettant de penser vos pages web en Offline First pour que vos visiteurs bénéficient toujours de contenu même une fois déconnectés.

UpUp est une bibliothèque Javascript vous permettant de penser vos pages web en Offline First pour que vos visiteurs bénéficient toujours de contenu même une fois déconnectés.

Après avoir pensé en Mobile First, il est temps de penser en Offline First !

Les internautes naviguent de plus en plus depuis un smartphone et souvent dans les transports ... synonymes de déconnexions régulières. Pour apporter toujous plus de confort de navigation à vos visiteurs, il est intéressant de leur proposer une continuité de lecture, même une fois déconnectés du réseau, en attendant qu'il reprenne quelques secondes plus tard.

C'est ce que propose UpUp, une bibliothèque Javascript légère, en ajoutant des fonctionnalités offline à vos pages web.

Grâce à des Service Workers, le navigateur va mettre en cache les données et assets spécifiées par UpUp pour les réafficher en cas de déconnexion et d'appel de la page.

Qui dit utilisation de Service Workers dit quelques contraintes à respecter pour que le script fonctionne:

  • Une connexion HTTPS sur votre site
  • Un navigateur moderne (Chrome 40+, Opera 27+ et Firefox 41+), les navigateurs inférieurs ou IE ne seront pas pris en compte par UpUp et n'auront pas de fonction offline.
  • La présence du fichier UpUp à la racine de votre site

Une fois ces contraintes en tête, vous n'aurez plus qu'à déclarer le contenu à rendre offline:

  <script src="/upup.min.js"></script>
  <script>
    UpUp.start({
      'content-url': 'offline.html',
      'assets': ['css/bootstrap.min.css', 'css/offline.css']
    });
  </script>

Automatiquement, la page offline.html et les assets CSS seront mis en cache pour être réaffichez en offline.

Il est possible d'aller bien plus loin et de mettre en cache des pages dynamiques en fonction de paramètres spécifiques, une onepage AngularJS ...

Un tutoriel complet explique pas à pas comment passer vos pages en mode offline.

 

Site Officiel

Baraguiné par julesm le 18/05/16 à 18h02
julesm sur La Ferme du Web
Merci pour l'info ça a l'air terrible ce mode d'affichage !
Baraguiné par martinjacob le 08/08/16 à 12h32
martinjacob sur La Ferme du Web
Un équipe des professionnelles disponible à votre services à l’île de France pour dépannage serrurier
consultez notre site
sos-serrurier-ouverture-de-porte.com/serrurier-val-d-oise-95.html
Baraguiné par aweige le 07/12/16 à 04h41
aweige sur La Ferme du Web
http://www.defro.fr Air Max pas cher
Baraguiné par sucessweb le 24/07/17 à 10h39
sucessweb sur La Ferme du Web
Merci pour le partage, je vais aller voir ça de plus près.

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web