Rénovez votre site Web en tant qu'application Web progressive –

Cet article sur la modification de votre site Web en tant qu'application Web progressive est inclus dans notre anthologie, JavaScript moderne . Si vous voulez que tout se mette à jour dans JavaScript, inscrivez-vous à SitePoint Premium et téléchargez-en une copie.

Il y a eu beaucoup de buzz autour des Progressive Web Apps (PWA) récemment, et beaucoup de gens se demandent si ils représentent l'avenir du web (mobile).

Je ne vais pas entrer dans le débat sur l'application native vs PWA, mais une chose est sûre: ils vont un long chemin pour améliorer le mobile et améliorer son expérience utilisateur.

Avec un accès Web mobile destiné à surpasser celui de tous les autres appareils combinés, pouvez-vous vous permettre d'ignorer cette tendance?

Les bonnes nouvelles sont que faire un PWA n'est pas difficile. En fait, il est tout à fait possible de prendre un site Web existant et de le convertir en un PWA. Et c'est exactement ce que je vais faire dans ce tutoriel. Au moment où vous avez terminé, vous aurez un site Web qui se comporte comme une application Web native. Il fonctionnera hors ligne et aura sa propre icône d'écran d'accueil.

Qu'est-ce qu'une application Web progressive?

Les applications Web progressives (appelées PWA ) sont une innovation passionnante dans la technologie Web. Les PWA comprennent un mélange de technologies pour faire fonctionner une application web comme une application mobile native. Les avantages pour les développeurs et les utilisateurs surmontent les contraintes imposées par les solutions Web uniquement et natives uniquement:

1. Vous n'avez besoin que d'une application développée avec les technologies Web W3C standard ouvertes. Il n'est pas nécessaire de développer des bases de code natives séparées.
2. Les utilisateurs peuvent découvrir et essayer votre application avant l'installation.
3. Inutile d'utiliser un AppStore, de respecter des règles obscures ou de payer des frais. Les mises à jour d'applications se font automatiquement sans intervention de l'utilisateur.
4. Les utilisateurs sont invités à "installer", ce qui ajoute une icône à leur écran d'accueil.
5. Le PWA affiche un écran de démarrage attrayant. être modifié si nécessaire pour fournir une expérience en plein écran.
6. Les fichiers essentiels sont mis en cache localement afin que les PWA répondent plus rapidement que les applications Web standard. (Ils peuvent même être plus rapides que les applications natives.)
7. L'installation est légère – peut-être quelques centaines de Ko de données en cache
8. Tous les échanges de données doivent se faire via une connexion HTTPS sécurisée. Les PWA fonctionnent hors ligne et peuvent synchroniser les données lorsque la connexion revient.

Il est tôt, mais les études de cas sont positives . Flipkart, le plus grand site de commerce électronique de l'Inde, a enregistré une augmentation de 70% des conversions de ventes et a triplé le temps passé sur le site en abandonnant son application native pour un PWA. Alibaba, la plus grande plate-forme de négociation commerciale au monde, a connu une augmentation du taux de conversion similaire de de 76% .

La technologie Solid PWA est disponible dans Firefox, Chrome et les autres navigateurs Blink. Microsoft travaille sur une implémentation Edge. Apple reste silencieux, bien qu'il y ait des commentaires prometteurs dans le plan quinquennal WebKit . Heureusement, la prise en charge des navigateurs est généralement hors de propos …

Les applications Web progressives sont des améliorations progressives

Votre application fonctionnera toujours dans les navigateurs qui ne prennent pas en charge la technologie PWA. L'utilisateur n'aura pas les avantages des fonctionnalités hors ligne, mais tout continuera à fonctionner comme avant. Étant donné les récompenses coût-bénéfice, il y a peu de raisons pas d'ajouter des technologies PWA à votre système.

Ce n'est pas seulement des applications

Google a dirigé le mouvement PWA La plupart des tutoriels décrivent comment créer une application mobile native basée sur Chrome à partir de zéro. Cependant, vous n'avez pas besoin d'une application spéciale d'une seule page ou devez suivre des directives de conception d'interface matérielles. La plupart des sites Web peuvent être numérisés en quelques heures. Cela inclut votre site WordPress ou statique

Code de démonstration

Le code de démonstration est disponible à partir de GitHub .

Il fournit un site Web simple de quatre pages avec quelques images, une feuille de style et un seul fichier JavaScript principal. Le site fonctionne dans tous les navigateurs modernes (IE10 +). Si le navigateur prend en charge les technologies PWA, l'utilisateur peut lire les pages précédemment consultées lorsqu'elles sont hors ligne.

Pour exécuter le code, assurez-vous que Node.js est installé, puis démarrez le serveur Web fourni dans votre terminal. avec:

 node ./server.js [port]

Dans le code ci-dessus, [port] est optionnel, et vaut par défaut 8888. Ouvrez Chrome ou un autre navigateur basé sur Blink comme Opera ou Vivaldi, puis naviguez jusqu'à http: // localhost: 8888 / (ou le port que vous avez spécifié). Vous pouvez également ouvrir les Outils de développement (F12 ou Cmd / Ctrl + Maj + I ) pour afficher divers messages de console.

Voir la page d'accueil, et peut-être un autre, puis déconnecter par:

1. arrêt du serveur web avec Cmd / Ctrl + C ou
2. cochez la case Hors connexion dans l'onglet Réseau ou Application – Travailleurs du service des Outils de développement.

Revisitez l'une des pages que vous avez consultées plus tôt et ils vont encore charger. Visitez une page que vous n'avez pas vue s'afficher avec une page "Vous êtes hors ligne" contenant une liste de pages visibles:

Connecter un périphérique

Vous pouvez également voir la démonstration page sur un smartphone Android connecté à votre PC / Mac via USB. Ouvrez le panneau Remote devices from Autres outils dans le menu à trois points en haut à gauche.

Sélectionnez Paramètres sur la gauche et cliquez sur Ajouter la règle pour transférer le port 8888 vers localhost: 8888. Vous pouvez maintenant ouvrir Chrome sur le smartphone et naviguer vers http: // localhost: 8888 / .

Vous pouvez utiliser le menu du navigateur pour "Ajouter à l'écran d'accueil". Faites quelques visites et le navigateur devrait vous inviter à "installer". Les deux options créent une nouvelle icône sur votre écran d'accueil. Parcourez quelques pages, fermez Chrome et déconnectez votre appareil. Vous pouvez ensuite lancer l'application PWA Website . Vous verrez un écran de démarrage et pourrez voir les pages que vous avez lues précédemment, même si vous n'avez pas de connexion au serveur.

Il existe trois étapes essentielles pour transformer votre site Web en une application Web progressive …

Étape 1: Activer HTTPS

Les PWA nécessitent une connexion HTTPS, pour des raisons qui apparaîtront sous peu. Les prix et les processus varient selon les hébergeurs, mais cela en vaut la peine, car la recherche Google classe les sites sécurisés plus haut.

HTTPS n'est pas nécessaire pour la démonstration ci-dessus car Chrome autorise l'utilisation de localhost ou d'une adresse 127.xxx pour tester. Vous pouvez également tester la technologie PWA sur les sites HTTP si vous lancez Chrome avec les indicateurs de ligne de commande suivants:

• - user-data-dir
• - unsafety-treat-insecure-origin-as -secure

Étape 2: Créer un manifeste d'application Web

Le manifeste d'application Web fournit des informations sur l'application telles que le nom, la description et les images utilisés par le système d'exploitation pour configurer les icônes d'écran d'accueil, les pages d'accueil et viewport. En substance, le manifeste est une alternative aux nombreux méta-tags d'icône et de thème spécifiques aux fournisseurs que vous avez peut-être déjà dans vos pages.

Le manifeste est un fichier texte JSON à la racine de votre application. Il doit être servi avec un Content-Type: application / manifeste + json ou Content-Type: application / json En-tête HTTP. Le fichier peut être appelé n'importe quoi mais a été nommé /manifest.json dans le code de démonstration:

 {
  "nom": "Site Web PWA",
  "short_name": "PWA",
  "description": "Un exemple de site web PWA",
  "start_url": "/",
  "display": "autonome",
  "orientation": "tout",
  "background_color": "#ACE",
  "theme_color": "#ACE",
  "icônes": [
    {
      "src"           : "/images/logo/logo072.png",
      "sizes"         : "72x72",
      "type"          : "image/png"
    },
    {
      "src"           : "/images/logo/logo152.png",
      "sizes"         : "152x152",
      "type"          : "image/png"
    },
    {
      "src"           : "/images/logo/logo192.png",
      "sizes"         : "192x192",
      "type"          : "image/png"
    },
    {
      "src"           : "/images/logo/logo256.png",
      "sizes"         : "256x256",
      "type"          : "image/png"
    },
    {
      "src"           : "/images/logo/logo512.png",
      "sizes"         : "512x512",
      "type"          : "image/png"
    }
  ]
}

Un lien vers ce fichier est requis dans le de toutes vos pages:

Les principales propriétés du manifeste sont:

• name : le nom complet de l'application à afficher à l'utilisateur
• short_name : nom court pour les situations où l'espace est insuffisant pour le nom complet
• description : une longue description de l'application
• start_url : l'URL relative pour lancer l'application (typiquement / ) [19659010] scope : la portée de navigation – par exemple, une portée de / app / limiterait l'application à ce dossier
• background_color : la couleur de fond utilisé pour les écrans de démarrage et le navigateur chrome (si nécessaire)
• theme_color : la couleur de l'application, généralement identique à l'arrière-plan, qui peut affecter l'affichage de l'application
• ]: l'orientation préférée – any natural [1 9459031] paysage paysage-primaire paysage-secondaire portrait portrait-primaire et portrait
• afficher : la vue préférée – fullscreen (pas de chrome), standalone (ressemble à une application native), minimal-ui (un petit ensemble de contrôles d'interface utilisateur) et navigateur (onglet navigateur classique)
• icons : un tableau d'objets image définissant le src URL, tailles et type (une plage d'icônes doit être définie)

MDN fournit une liste complète des propriétés du manifeste Web App .

La section Manifest de l'onglet Outils de développement de Google Chrome Application valide votre manifeste JSON et propose un lien "Ajouter à l'écran d'accueil", qui fonctionne sur d Périphériques esktop:

Étape 3: Création d'un agent de service

Les techniciens de service sont des proxies programmables qui peuvent intercepter et répondre aux requêtes réseau. Il s'agit d'un seul fichier JavaScript qui réside dans la racine de l'application.

Votre page JavaScript ( /js/main.js dans le code de démonstration) peut vérifier le support du service worker et enregistrer le fichier: [19659052] if ('serviceWorker' dans le navigateur) {

  // enregistrer le travailleur du service
  navigator.serviceWorker.register ('/ service-worker.js');

}

Si vous n'avez pas besoin de fonctionnalités hors connexion, créez simplement un fichier /service-worker.js vide. Les utilisateurs seront invités à installer votre application!

Les travailleurs des services peuvent être déconcertants, mais vous devriez être capable d'adapter le code de démonstration à vos propres fins. Il s'agit d'un script de travail Web standard que le navigateur télécharge (lorsque cela est possible) et s'exécute sur un thread distinct. Il n'a pas accès au DOM ou à d'autres API de pages, mais interceptera les requêtes réseau déclenchées par des changements de page, des téléchargements d'actifs et des appels Ajax.

C'est la principale raison pour laquelle votre site requiert HTTPS. Imaginez le chaos si un script tiers pouvait injecter son propre agent de service d'un autre domaine. Il serait capable d'examiner et de modifier tous les échanges de données entre le client et le serveur!

Les travailleurs de service réagissent à trois événements principaux: installer activer et chercher ]

Install Event

Cela se produit lorsque l'application est installée. Il est généralement utilisé pour mettre en cache les fichiers essentiels en utilisant l'API Cache .

Nous allons d'abord définir quelques variables de configuration pour:

1. Le cache nom ( CACHE ) version ). Votre application peut avoir plusieurs mémoires cache, mais nous en avons seulement besoin. Un numéro de version est appliqué, donc si nous apportons des modifications significatives, un nouveau cache sera utilisé et tous les fichiers précédemment mis en cache seront ignorés.
2. Une URL de page hors ligne ( offlineURL ). Il s'agit d'une page qui sera présentée lorsque l'utilisateur est hors ligne et tente de charger une page qu'il n'a pas visitée auparavant.
3. Un tableau de fichiers essentiels à installer pour assurer le fonctionnement hors ligne du site ( installFilesEssential ). Cela devrait inclure des ressources telles que CSS et JavaScript, mais j'ai également inclus la page d'accueil ( / ) et le logo. Vous devriez également inclure des variantes telles que / et /index.html si les URL peuvent être adressées de plusieurs façons. Notez que offlineURL est ajouté à ce tableau.
4. Facultativement, un tableau de fichiers souhaitables ( installFilesDesirable ). Ceux-ci seront téléchargés, si possible, mais n'abandonneront pas l'installation en cas d'échec.

 // configuration
const
  version = '1.0.0',
  CACHE = version + ':: PWAsite',
  offlineURL = '/ offline /',
  installFilesEssential = [
    '/',
    '/manifest.json',
    '/css/styles.css',
    '/js/main.js',
    "http://www.sitepoint.com/js/offlinepage.js",
    '/images/logo/logo152.png'
  ] .concat (offlineURL),
  installFilesDesirable = [
    '/favicon.ico',
    '/images/logo/logo016.png',
    '/images/hero/power-pv.jpg',
    '/images/hero/power-lo.jpg',
    '/images/hero/power-hi.jpg'
  ];

La fonction installStaticFiles () ajoute des fichiers au cache en utilisant l'API de cache basée sur la promesse . Une valeur de retour est uniquement générée lorsque les fichiers essentiels sont mis en cache:

 // installer des actifs statiques
function installStaticFiles () {

  return caches.open (CACHE)
    .then (cache => {

      // Cache les fichiers désirés
      cache.addAll (installFilesDesirable);

      // Cache les fichiers essentiels
      return cache.addAll (installFilesEssential);

    });

}

Enfin, nous ajoutons un écouteur d'événement install . La méthode waitUntil garantit que le technicien de maintenance n'installera pas tant que tout le code joint ne sera pas exécuté. Il exécute installStaticFiles () puis self.skipWaiting () pour rendre le service worker actif:

 // installation de l'application
self.addEventListener ('install', event => {

  console.log ('service worker: install');

  // Cache les fichiers core
  event.waitUntil (
    installStaticFiles ()
    .then (() => self.skipAttache ())
  )

});

Activer l'événement

Cela se produit lorsque le technicien de service est activé, soit immédiatement après l'installation, soit à son retour. Vous ne pouvez pas exiger ce gestionnaire, mais le code de démonstration en utilise un pour supprimer les anciens caches lorsqu'ils existent:

 // efface les anciens caches
function clearOldCaches () {

  return caches.keys ()
    .then (keylist => {

      retourner Promise.all (
        keylist
          .filter (touche => touche! == CACHE)
          .map (clé => caches.delete (clé))
      )

    });

}

// application activée
self.addEventListener ('activate', event => {

  console.log ('service worker: activate');

    // supprime les anciennes caches
  event.waitUntil (
    clearOldCaches ()
    .then (() => self.clients.claim ())
    )

});

Notez que l'appel final self.clients.claim () définit cet agent de service en tant que travailleur actif pour le site

Fetch Event

Cela se produit chaque fois qu'une requête réseau est effectuée. Il appelle la méthode respondWith () pour pirater les requêtes GET et retourner:

1. Un actif du cache.
2. Si # 1 échoue, l'actif est chargé à partir du réseau en utilisant le Fetch API ) (non lié à l'événement de récupération du service worker). Cet actif est ensuite ajouté au cache.
3. Si # 1 et # 2 échouent, une réponse appropriée est renvoyée

 // application récupère les données réseau
self.addEventListener ('fetch', événement => {

  // abandonne les requêtes non-GET
  if (event.request.method! == 'GET') renvoie;

  laissez url = event.request.url;

  event.respondWith (

    caches.open (CACHE)
      .then (cache => {

        return cache.match (event.request)
          .then (réponse => {

            if (réponse) {
              // retourne le fichier en cache
              console.log ('cache fetch:' + url);
              réponse de retour;
            }

            // faire une requête réseau
            return fetch (event.request)
              .then (newreq => {

                console.log ('récupération du réseau:' + url);
                if (newreq.ok) cache.put (event.request, newreq.clone ());
                return newreq;

              })
              // app est déconnecté
              .catch (() => offlineAsset (url));

          });

      })

  )

});

L'appel final à offlineAsset (url) renvoie une réponse appropriée en utilisant un couple de fonctions d'assistance:

 // est l'URL de l'image?
let iExt = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp'] .map (f => '.' + f);
La fonction isImage (url) {

  return iExt.reduce ((ret, ext) => ret || url.endsWith (ext), false);

}


// renvoie l'actif hors ligne
function offlineAsset (url) {

  if (isImage (url)) {

    // renvoie l'image
    retourner une nouvelle réponse (
      '',
      {headers: {
        'Content-Type': 'image / svg + xml',
        'Cache-Control': 'pas de magasin'
      }}
    )

  }
  autre {

    // retourner la page
    return caches.match (offlineURL);

  }

}

La fonction offlineAsset () vérifie si la requête est pour une image et retourne un SVG contenant le texte "offline". Toutes les autres demandes retournent la page offlineURL .

La section Service Worker de l'onglet Application de développement de Google Chrome fournit des informations sur vos travailleurs, avec des erreurs et des facilités. forcer le rechargement et mettre le navigateur hors ligne:

La section Stockage du cache répertorie tous les caches dans la portée actuelle et les actifs mis en cache qu'ils contiennent. Vous devrez peut-être cliquer sur le bouton Actualiser lorsque le cache est mis à jour:

Sans surprise, la section Clear storage peut supprimer votre service worker et ses caches: [19659004]

Bonus Étape 4: Créer une page hors ligne utile

La page hors ligne peut être du code HTML statique informant l'utilisateur que la page demandée n'est pas disponible hors connexion. Cependant, nous pouvons également fournir une liste d'URL de pages qui sont disponibles à lire.

L'API de cache est accessible dans notre script main.js . Toutefois, l'API utilise des promesses qui échouent dans les navigateurs non pris en charge et entraînera l'arrêt de l'exécution de JavaScript. Pour éviter cela, nous allons ajouter du code qui vérifie si l'élément de liste hors ligne et l'API Caches sont disponibles avant de charger un autre fichier JavaScript /js/offlinepage.js (qui doit être présent dans installFilesEssential tableau ci-dessus):

 // charger le script pour remplir la liste de pages hors ligne
if (document.getElementById ('cachedpagelist') && 'cache' dans la fenêtre) {
  var scr = document.createElement ('script');
  scr.src = "http://www.sitepoint.com/js/offlinepage.js";
  scr.async = 1;
  document.head.appendChild (scr);
}

/js/offlinepage.js localise le cache le plus récent par nom de version, obtient une liste de toutes les clés d'URL, supprime les URL autres que des pages, trie la liste et l'ajoute au noeud DOM avec le ID cachedpagelist :

 // nom du cache
const
  CACHE = ':: PWAsite',
  offlineURL = '/ offline /',
  list = document.getElementById ('cachedpagelist');

// récupère toutes les caches
window.caches.keys ()
  .then (cacheList => {

    // Trouver les caches par et les plus récents
    cacheList = cacheList
      .filter (cName => cName.includes (CACHE))
      .sort ((a, b) => a - b);

    // ouvre le premier cache
    caches.open (listeList [0])
      .then (cache => {

        // Récupère les pages mises en cache
        cache.keys ()
          .then (reqList => {

            let frag = document.createDocumentFragment ();

            reqList
              .map (req => req.url)
              .filter (req => (req.endsWith ('/') || req.endsWith ('.html')) &&! req.endsWith (offlineURL))
              .Trier()
              .forEach (req => {
                laisser
                  li = document.createElement ('li'),
                  a = li.appendChild (document.createElement ('a'));
                  a.setAttribute ('href', req);
                  a.textContent = a.pathname;
                  frag.appendChild (li);
              });

            if (list) list.appendChild (frag);

          });

      })

  });

Si vous pensez que le débogage JavaScript est difficile, les techniciens ne seront pas très amusants! L'onglet Application de Chrome fournit un ensemble complet de fonctionnalités et des instructions de journalisation sont également affichées sur la console.

Vous devriez envisager de lancer votre application dans une fenêtre de navigation , car les fichiers mis en cache ne sont pas conservés après la fermeture de l'onglet.

Firefox propose un débogueur JavaScript accessible à partir de l'option Service Workers du menu des outils.

Enfin, l'extension Lighthouse pour Chrome fournit également des informations utiles sur la mise en œuvre de votre PWA.

PWA Gotchas

Les applications Web progressives nécessitent de nouvelles technologies, donc soyez prudent informé. Cela dit, il s'agit d'une amélioration de votre site Web qui ne devrait pas durer plus de quelques heures et n'a aucun effet négatif sur les navigateurs non supportés.

Les opinions des développeurs varient, mais il y a plusieurs points à considérer …

Le site de démonstration cache la barre d'URL, que je ne recommanderais pas à moins d'avoir une application à une seule URL telle qu'un jeu. Les options manifestes display: minimal-ui ou display: browser sont probablement les meilleures pour la plupart des sites

Cache Overload

Vous pouvez mettre en cache chaque page et chaque élément de votre site. C'est bien pour les petits sites, mais serait-ce pratique pour ceux qui ont des milliers de pages? Personne n'est susceptible de s'intéresser à tout votre contenu, et les limites de stockage des appareils pourraient être dépassées. Même si vous ne stockez que des pages visitées et des ressources comme la démonstration, le cache risque de se développer excessivement.

Peut-être que:

• ne met en cache que des pages importantes telles que la maison, le contact et les articles les plus récents. , des vidéos et d'autres fichiers volumineux
• essuyant régulièrement des anciens fichiers en cache
• fournissant un bouton «stocker cette page pour la lecture hors ligne» afin que l'utilisateur puisse choisir ce qu'il cache

Cache Refreshing

dans le cache avant le chargement du réseau. C'est génial lorsque les utilisateurs sont hors ligne, mais cela signifie qu'ils peuvent afficher d'anciennes pages même lorsqu'ils sont en ligne.

Les URL pour les ressources telles que les images et les vidéos ne devraient jamais changer, donc la mise en cache à long terme est rarement un problème. Vous pouvez vous assurer qu'ils restent en cache pendant au moins un an (31 536 000 secondes) avec l'en-tête HTTP Cache-Control :

 Cache-Control: max-age = 31536000

Les pages, les fichiers CSS et les fichiers de script peuvent changer plus fréquemment. Vous pouvez donc définir une expiration plus courte de 24 heures et la valider sur la version du serveur en ligne:

 Cache-Control: must-revalidate, max-age = 86400

Vous pouvez également envisager des techniques de suppression de cache pour vous assurer que les anciennes ressources ne peuvent pas être utilisées – par exemple, nommer votre fichier CSS styles-abc123.css et modifier le hachage à chaque publication. devenez complexe, donc je vous recommande de lire les meilleures pratiques de mise en cache de Jake Archibold et les getchas max-age .

Liens utiles

Les ressources suivantes sont utiles si vous voulez en savoir plus sur Progressive Web Apps :

Il y a aussi beaucoup d'articles en ligne qui ont influencé la manière dont j'ai abordé ce code de démonstration. N'hésitez pas à adapter le code et laissez-moi savoir comment ça s'est passé. Bonne chance

Cet article a été révisé par AJ Latour Panayiotis «pvgr» Velisarakos et Dave Maxwell . Merci à tous les pairs évaluateurs de SitePoint pour avoir rendu le contenu de SitePoint le meilleur possible!

Craig est un consultant Web indépendant au Royaume-Uni qui a créé sa première page pour IE2.0 en 1995. Depuis, il préconise les normes, l'accessibilité et meilleures techniques HTML5. Il a écrit plus de 1000 articles pour SitePoint et vous pouvez le trouver @craigbuckler