UPUP: AFFICHEZ VOS PAGES WEB EN MODE DÉCONNECTÉ

UPUP: AFFICHEZ VOS PAGES WEB EN MODE DÉCONNECTÉ

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