Progressive Web App

Accéder à un site WordPress via un smartphone Android

Il existe  plusieurs façons d’accéder à un site WordPress depuis son smartphone : avec un navigateur, grâce à une application ou en utilisant une « Progressive Web App ».

Cette dernière solution permet d’accéder au site depuis une icône placée sur l’écran d’accueil, comme avec une application. La différence essentielle tient au fait qu’on ne peut pas utiliser les ressources spécifiques du smartphone : localisation, appareil photo…

L’intérêt d’une Progressive Web App

Les Progressive Web Apps offrent les avantages suivants :

  • le chargement est plus rapide que via un navigateur,
  • l’affichage se fait en plein écran,
  • le site peut être consulté hors connexion internet,
  • l’espace mémoire nécessaire est plus faible que pour une véritable application,
  • pas de mise à jour à réaliser sur son smartphone.

WordPress ne gère pas nativement les spécifications nécessaires pour créer une Progressive Web Apps. Heureusement, des extensions permettent de rendre un site WordPress « PWA compatible ».

Installer une extension « Progressive Web App »

Comme pour toutes les extensions disponibles sur WordPress.org, il faut d’abord se connecter à l’administration du site sur lequel on installe l’extension :

Dans le tableau de bord, survoler avec la souris le menu « Extensions » puis cliquer sur le sous-menu « Ajouter » :

Sous-menu "Ajouter" du menu "Extensions"
Ajouter une extension

Dans la zone de saisie Choix "Mot-clé" pour rechercher des extensions saisir « progressive web app » puis cliquer sur les liens « Plus de détails » pour choisir parmi les extensions proposées :

Affichage des extensions PWA dans le répertoire WordPress.com
Extensions « Progressive Web App » proposées dans le répertoire WordPress.com

Cliquer sur le bouton  dans la zone de l’extension que vous choisissez :

Le bouton doit s’animerBouton "Installer" devient "Installation"puis devenir .
Cliquer sur le bouton pour que l’extension puisse être utilisée.

La page des extensions doit apparaître avec :

  1. en haut de page la mention « Extension activée »,

    message de confirmation de l'activation de l'extension
    confirmation de l’activation de l’extension
  2. dans le corps de la page, une zone dédiée à l’extension choisie (pour l’exemple, j’ai choisi la première extension proposée mais je ne fais pas de recommandation entre les extensions n’ayant pas le temps de les tester à fond) :

    cartouche de gestion de l'extension pwa dans la page des extensions
    zone de l’extension pwa

Paramétrer l’extension

Le paramétrage de l’extension est accessible via un lien qui :

  • pour certaines extensions apparaît en haut de page suite à l’installation :
message en haut de la page des extensions avec lien vers le paramétrage de la dernière extension activée
lien en haut de page pour paramétrer l’extension pwa

 

  • pour toutes les extensions et à tout moment, apparaît dans la zone de gestion de l’extension (« Réglage » ou « Settings » en anglais) :
lien "Settings" dans la zone de gestion de l'extension
lien dans la zone de gestion de l’extension

Le paramétrage diffère d’une extension à l’autre, mais on retrouve généralement les paramètres suivants :

  • le nom de l’application telle qu’elle apparaîtra sur le smartphone,
  • une icône qui apparaîtra sur la page des applications du smartphone :
    Afichage des paramètres de l'extension PWA avec notamment la saisie du nom et le téléchargement d'icônes
    Paramètres d’une extension PWA

    Se connecter depuis le smartphone

Depuis le smartphone, lancer un navigateur (par exemple Chrome) :

Cliquer sur l'icône d'un navigateur
Lancer un navigateur

Saisir l’adresse web (url) du site WordPress à consulter :

Saisie de l'adresse du site WordPress dans la barre d'adresse du navigateur
Saisie de l’adresse du site WordPress

Taper sur les trois points verticaux situés en haut et à droite pour afficher un menu contextuel :

Les trois points représentant le menu contextuel se situe en haut et à droite du smartphone
Taper sur le signe du menu contextuel

Dans le menu qui s’affiche, choisir l’option « Ajouter à l’écran d’accueil » :

Le menu contextuel s'affiche avec une option "Ajouter à l'écran d'accueil"
Taper sur l’option « Ajouter à l’écran d’accueil »

L’icône associée au site dans le paramétrage de l’extension WordPress apparaît sur l’écran d’accueil :

L'icône s'affiche sur l'écran d'accueil
Ajout de l’icone du site WordPress sur l’écran d’accueil

3 réflexions sur « Accéder à un site WordPress via un smartphone Android »

  1. J’ai un Android.
    Je n’ai pas installé extension « Progressive Web App » sur mon site.
    J’ouvre Chrome. Je tapes son adresse web.
    Je clique sur les 3 points verticaux = je trouve l’option « Ajouter à l’écran d’accueil » !
    Je n’ai donc pas besoin de ces extension « Progressive Web App », ou alors je n’ai rien compris à vos conseils.
    Cordialement.

  2. Bonjour,
    Si vous cliquez sur l’icône, le site s’ouvre dans le navigateur.
    Avec une extension installée sur le site, l’ouverture se fait indépendamment du navigateur, peut être consulté hors ligne, et grâce à un système de cache s’affiche plus vite. J’ajoute que vous choisissez l’icône à afficher sur la page d’accueil du smartphone.
    Merci pour votre commentaire, je vais compléter mon article pour ajouter ces précisions.
    Daniel Farnier

Laisser un commentaire

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