Comment publier et mettre à jour votre Progressive Web App ?

Votre PWA

Votre app peut aussi être une Progressive Web App, ou PWA : un site web qui fonctionne comme une app, dans n'importe quel navigateur, sur téléphone ou ordinateur, sans store. Voici comment la publier (l'activer) et la tenir à jour.

Tout commence dans « Publish my project », en haut de chaque page. Votre PWA se publie immédiatement, sans prérequis.

Avant de publier

Avant de publier, donnez son icône à votre PWA. Dans « My App », « App icon », Custom, sous PWA, c'est « Apple Touch Icon ».

Ensuite, dans la barre latérale, ouvrez Publish, PWA, Publish : la page « PWA publication ».

Cinq étapes facultatives vous permettent d'aller plus loin : votre propre nom de domaine, le référencement, les notifications web push, une clé de carte et un sitemap. Aucune n'est obligatoire.

Un avertissement signale quand une fonctionnalité demande un complément dans une PWA : ici, celle qui utilise la géolocalisation demande une clé d'API.

Et Redirection définit où vont les visiteurs si vous désactivez un jour votre PWA.

Publier votre PWA

Quand vous êtes prêt, cliquez sur « Publish my PWA ».

GoodBarber génère votre PWA. Cela prend quelques minutes.

Votre PWA est en ligne, à sa propre adresse. Suivez le lien, ou scannez le QR code avec votre téléphone.

Pour la désactiver, vous cliqueriez sur Disable : les visiteurs iraient vers la page choisie dans Redirection.

Dans « Publish my project », votre PWA est maintenant Live.

Ouvrir votre PWA

Ouvrez son adresse dans un navigateur. Sur ordinateur, votre app s'affiche comme un site web.

Sur un téléphone, elle a tout l'air de votre app.

Les visiteurs peuvent aussi l'installer : dans le menu de Chrome, c'est « Install and create shortcut ».

Un appui sur Install… et votre icône rejoint leurs apps… et s'ouvre en plein écran, comme une app native.

Mettre à jour votre PWA

Changez maintenant un élément de l'app : dans l'en-tête, « Logo color », par exemple.

L'aperçu l'affiche aussitôt… mais pas votre PWA : elle montre ce que vous avez publié en dernier.

« Publish my project » affiche « Update now » : des modifications attendent d'être publiées.

Dans Publish, PWA, Update, « Live update » liste les modifications qui partent avec « Update now ».

D'autres, comme une nouvelle extension ou une autorisation, demandent de régénérer votre PWA : elles attendent ici que vous cliquiez sur « Rebuild my PWA ».

Pour publier votre modification, ouvrez « Publish my project » et cliquez sur « Update now »… puis confirmez.

Quelques secondes plus tard, votre projet est mis à jour.

Rechargez votre PWA : la modification est là. Les visiteurs la verront la prochaine fois qu'ils l'ouvriront.

Les nouveaux contenus

Le contenu, c'est différent. Publiez un article dans l'une de vos sections… et il est aussitôt dans votre PWA, sans mise à jour à faire.

« Publish my project » affiche toujours « Project updated ». Désormais, c'est là que vous publierez vos modifications.