Configuration PWA

GCM est une Progressive Web App, ce qui signifie que les membres et le personnel peuvent l'installer sur leur écran d'accueil de téléphone ou de bureau et la lancer comme une application native — plein écran, avec une icône, et même avec un support hors-ligne sur les plans Growth+. La page PWA App (barre latérale → PWA App) est l'endroit où vous indiquez au navigateur à quoi l'application installée doit ressembler et se comporter.

Ouvrir la page PWA

Cliquez sur PWA App dans la barre latérale. La page comporte cinq cartes, de haut en bas : Identité de l'application, Icône d'application, Thème, Mode d'affichage, Notifications push et Installer l'application.

Identité de l'application

Ces trois champs alimentent le manifeste PWA, que le navigateur lit en proposant « Installer l'application ».

Nom de l'application

Le nom complet de l'application affiché sur l'invite d'installation et (sur certaines plateformes) sous l'icône d'écran d'accueil. Par défaut, le nom de votre organisation. Gardez-le sous 45 caractères, sinon il est tronqué sur Android.

Nom court

La version plus courte utilisée quand il n'y a pas de place pour le nom complet — généralement sous l'icône d'écran d'accueil sur iOS et Android. Par défaut, le premier mot du nom de votre organisation. Visez 12 caractères ou moins.

Description

Une description d'un paragraphe de ce que fait l'application. Affichée dans les boîtes de dialogue d'installation de certains navigateurs. Optionnelle mais aide les membres à comprendre ce qu'ils installent.

Icône d'application

Deux tailles sont requises : 192×192 et 512×512. Les deux doivent être des PNG (JPEG et WebP sont aussi acceptés mais PNG s'affiche le plus fiablement sur les lanceurs).

Étapes de téléversement :

1. Cliquez sur Téléverser sous la taille que vous voulez définir.
2. Choisissez une image carrée. Le fichier est téléversé dans le bucket de stockage pwa-icons de votre organisation et l'URL du manifeste est mise à jour immédiatement — pas d'étape de sauvegarde séparée pour les icônes.
3. Répétez pour l'autre taille.

TIP

Utilisez le même design aux deux tailles — n'essayez pas de mettre plus de détail dans 512 juste parce qu'il y a plus de place. Les lanceurs affichent ces icônes à des tailles radicalement différentes (le 192 peut s'afficher à 48 px, le 512 à 256 px), donc un design propre unique qui se met à l'échelle est ce qu'il vous faut.

Limites de fichier :

• Taille max : 2 Mo par icône.
• Acceptés : image/png, image/jpeg, image/webp.

Si vous téléversez une image de mauvaise forme, le lanceur la centre sur un fond coloré (votre couleur de thème) — donc un logo circulaire sur fond carré blanc fonctionne bien, mais un logo horizontal est encadré.

Thème

Deux couleurs contrôlent les valeurs theme_color et background_color du manifeste.

Couleur de thème

La couleur que l'OS utilise pour la barre d'état (sur Android) et la barre de titre (sur les fenêtres de bureau installées). Choisissez quelque chose qui correspond à votre primaire de marque — beaucoup d'églises collent simplement le même code hex qu'elles ont utilisé dans Image de marque → Couleurs.

Couleur de fond

La couleur affichée pendant le bref moment entre le tap sur l'icône d'écran d'accueil et le premier rendu de l'application. Si un membre voit un flash blanc à chaque démarrage à froid et que ça vous dérange, définissez la couleur de fond sur votre primaire pour que le flash soit aux couleurs de la marque.

Les deux champs acceptent un code hex et ont un pastille de sélecteur de couleurs. Les valeurs sauvegardent dans app_settings sous pwa_theme_color / pwa_background_color.

Mode d'affichage

À quoi ressemble l'application installée quand elle est lancée. Trois options :

Mode	Comportement
Standalone (par défaut)	Ressemble à une application native — pas d'habillage de navigateur, votre icône dans la barre de titre. Le meilleur pour la plupart des organisations.
Fullscreen	Plein écran véritable — pas même de barre d'état. Utile pour les tablettes de pointage en kiosque.
Minimal UI	Garde une fine barre d'URL de style navigateur en haut. Utile si les membres ont fréquemment besoin de copier des URL depuis l'application.

Pour 99 % des organisations, Standalone est le bon choix. Changez seulement si vous avez une raison spécifique.

Notifications push

Activez Activer push si vous voulez que l'application envoie des notifications Web Push aux appareils installés (Android et bureau — iOS prend en charge push uniquement sur les PWA installées sous iOS 16.4+).

Quand activé :

• La première fois qu'un membre ouvre l'application installée, on lui demande d'autoriser les notifications.
• Les nœuds de flux de travail et rappels peuvent cibler Push comme canal.
• Le champ vapid_public_key affiche la clé VAPID publique de votre organisation (en lecture seule) — les fournisseurs push l'utilisent pour authentifier les abonnements.

WARNING

La paire de clés VAPID est générée côté serveur la première fois que push est activé. Elle est liée à votre organisation de façon permanente — si jamais vous la faites tourner, chaque appareil installé doit se réabonner (les membres sont re-sollicités). Ne faites pas tourner sauf nécessité.

Installer l'application

La dernière carte affiche le bouton d'installation lui-même. Si votre navigateur prend en charge beforeinstallprompt, le bouton est activé et vous pouvez installer GCM comme une application directement depuis cet écran.

Si le navigateur ne prend pas en charge l'invite programmatique (Safari sur iOS non), la carte affiche des instructions manuelles à la place — typiquement « tapez Partager, puis Ajouter à l'écran d'accueil » pour iOS, ou « ouvrez le menu du navigateur et sélectionnez Installer l'application » pour Chrome sur bureau.

Une fois installée, la carte détecte le mode standalone et affiche « L'application est déjà installée sur cet appareil » avec une coche verte — utile pour confirmer que l'installation a fonctionné avant de guider un membre.

Ce qui est sauvegardé où

Tous les paramètres PWA vont dans app_settings avec les clés pwa_* :

• pwa_app_name, pwa_short_name, pwa_description
• pwa_icon_192, pwa_icon_512 (URL de stockage)
• pwa_theme_color, pwa_background_color
• pwa_display_mode
• pwa_push_enabled
• vapid_public_key (en lecture seule, généré côté serveur)

Le frontend les lit au démarrage de l'application et les écrit dans /manifest.webmanifest pour que le navigateur voie les bonnes valeurs sans aller-retour supplémentaire.

Mettre à jour une application installée

Les PWA se mettent à jour automatiquement au prochain lancement quand un nouveau build est déployé. Les membres ne voient pas d'invite de mise à jour — le nouveau code s'exécute simplement la prochaine fois qu'ils ouvrent l'application. Si vous avez changé l'icône, les membres peuvent avoir besoin de désinstaller et réinstaller pour voir la nouvelle icône sur leur écran d'accueil (le lanceur la met en cache).

Pièges courants

« Mon icône est floue sur iOS. » iOS exige spécifiquement la 512×512. Si seule la 192 est définie, iOS la met à l'échelle et elle devient floue. Téléversez toujours les deux tailles.

« Les notifications push n'arrivent jamais. » Deux choses à vérifier : (1) push est activé ici, ET (2) l'application installée du destinataire a été ouverte au moins une fois sur l'appareil cible avec les notifications autorisées. Les abonnements push sont par appareil-par-navigateur — installer sur le téléphone ne donne pas le push à votre ordinateur portable.

« J'ai changé la couleur de thème et la barre d'état ne s'est pas mise à jour. » L'OS lit la couleur de thème au moment de l'installation et la met en cache. Réinstallez l'application sur l'appareil concerné pour récupérer la nouvelle couleur, ou attendez le prochain rafraîchissement de manifeste piloté par le navigateur (qui peut prendre des jours).

Étapes suivantes

• Image de marque — définissez votre couleur primaire d'abord ; réutilisez-la comme thème PWA.
• Rappels — le canal push peut déclencher des rappels d'événements.
• Canaux — push apparaît dans la liste des canaux une fois activé.